Generador de paletes de colors

Com funciona el generador de paletes de colors

Què fa l’eina

El generador de paletes de colors crea esquemes de colors harmoniosos a partir de qualsevol color base utilitzant principis establerts de teoria del color. Selecciona un color base i tria entre sis tipus d’harmonia — complementària, anàloga, triàdica, tetràdica, complementària dividida o monocromàtica — per generar a l’instant una paleta coordinada. Cada color generat mostra valors HEX, RGB i HSL llestos per copiar al teu CSS, eina de disseny o guia d’estil.

Casos d’ús habituals per a desenvolupadors

Dissenyadors i desenvolupadors utilitzen generadors de paletes quan inicien projectes nous, creen sistemes de disseny o actualitzen els colors de marca. Escenaris habituals inclouen generar colors d’accent complementaris per a un color principal de marca, crear esquemes de colors anàlegs per a visualitzacions de dades, construir paletes triàdiques per a temes d’IU vibrants i explorar variacions monocromàtiques per a dissenys minimalistes. L’eina també és útil per generar conjunts de propietats personalitzades de CSS i tokens de color en JSON per a sistemes de disseny.

Tipus d’harmonia de color

Les harmonies de color es basen en el cercle cromàtic. Els colors complementaris se situen oposats (180°) i creen un contrast alt. Els colors anàlegs són adjacents (±30°) i transmeten cohesió. Els colors triàdics estan espaiats uniformement a intervals de 120° per a una vivacitat equilibrada. La tetràdica (rectangle) utilitza quatre colors a intervals de 90°. La complementària dividida combina una base amb dos colors adjacents al seu complementari. La monocromàtica varia la lluminositat i la saturació d’un únic to per obtenir paletes subtils i unificades.

Errors habituals i casos límit

Les paletes generades són punts de partida, no dissenys finals. Comprova sempre les ràtios de contrast entre els colors generats per garantir l’accessibilitat. Els colors base molt saturats o molt foscos poden produir paletes amb poca llegibilitat. Recorda que els colors en pantalla es veuen diferents en impressió. Prova les paletes amb contingut real i elements d’IU en lloc de basar-te només en previsualitzacions de mostres.

Quan utilitzar aquesta eina vs codi

Utilitza aquesta eina del navegador per a l’exploració interactiva i la generació ràpida de paletes durant sprints de disseny. Per a sistemes de disseny en producció, implementa la generació de paletes de manera programàtica amb biblioteques com chroma.js, culori o polished, que poden generar harmonies, imposar ràtios de contrast i integrar-se amb pipelines de build.