Generador de Paleta de Colors - Crea Esquemes de Colors Harmoniosos

Què és un generador de paletes de colors?

Un generador de paletes de colors és una eina que crea un conjunt de colors que combinen a partir d’un color inicial, anomenat color primari. Aquest generador rep un color primari i un tipus d’harmonia, i després calcula la resta de la paleta mitjançant les regles de la teoria del color. Els quatre tipus d’harmonia compatibles són complementària, anàloga, triàdica i monocromàtica.

Com crea una paleta l’eina

L’eina converteix el color primari del codi hexadecimal (com ara #3B82F6) al model de color HSL. HSL descriu un color amb tres nombres:

• To: la posició del color en una roda de colors de 360 graus (0° és el vermell, 120° és el verd i 240° és el blau).
• Saturació: la intensitat del color, des de 0 % (gris) fins a 100 % (color pur).
• Lluminositat: la proximitat del color al negre o al blanc, des de 0 % (negre) fins a 100 % (blanc).

Cada tipus d’harmonia desplaça el to, la lluminositat o tots dos, i després converteix el resultat de nou en un codi hexadecimal.

Com calcular els colors complementaris

La fórmula:

$h' = (h + 180) \bmod 360$

on h és el to del color primari en graus i h′ és el to nou. El pas mod retorna a la roda un resultat que supera una volta completa.

La saturació i la lluminositat es mantenen iguals.

Exemple resolt: El blau pur, #0000FF, té un to de 240°, una saturació de 100 % i una lluminositat de 50 %. En sumar-hi 180° s’obté un to de 60°. En convertir el to 60° de nou a hexadecimal, amb la mateixa saturació i lluminositat, s’obté #FFFF00, un groc. Per tant, aquesta eina combina el blau amb el groc, no amb el taronja.

Això pot resultar confús perquè a les classes d’art sovint s’ensenya una roda de colors diferent, la roda de pigments RYB (vermell-groc-blau), en què l’oposat del blau és el taronja. Aquesta eina funciona amb la roda HSL basada en RGB que utilitzen les pantalles, de manera que els seus parells complementaris difereixen dels de la roda de mescla de pintures.

Com calcular els colors anàlegs

Els colors anàlegs se situen a prop del color primari a la roda. L’eina genera dos tons a 30° i dos tons a 60° del to primari, tots amb la mateixa saturació i lluminositat.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

on h és el to del color primari.

Exemple resolt: El blau, #0000FF (to 240°), produeix el to 270° (#8000FF), el to 210° (#0080FF), el to 300° (#FF00FF) i el to 180° (#00FFFF). Amb el color primari, la paleta conté cinc colors.

Com calcular els colors triàdics

Els colors triàdics estan separats 120° a la roda i formen un trio equidistant amb el color primari.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Exemple resolt: El vermell, #FF0000 (to 0°), produeix el to 120° (#00FF00, verd) i el to 240° (#0000FF, blau). El conjunt de tres colors és vermell, verd i blau, els mateixos tres tons que s’utilitzen com a colors primaris a les pantalles digitals.

Com calcular els colors monocromàtics

Els colors monocromàtics mantenen el mateix to i saturació i només en canvien la lluminositat. L’eina desplaça la lluminositat 15 i 30 punts percentuals en cada direcció, limitada entre 5 % i 95 %.

$l \pm 15, \qquad l \pm 30$

on l és la lluminositat del color primari, expressada en punts percentuals.

Exemple resolt: El blau, #0000FF (lluminositat 50 %), produeix una lluminositat de 65 % (#4D4DFF), una lluminositat de 35 % (#0000B3), una lluminositat de 80 % (#9999FF) i una lluminositat de 20 % (#000066).

A causa dels límits de 5 % i 95 %, un color primari que ja és molt clar o molt fosc pot arribar dues vegades al mateix límit. El negre, #000000, dona una lluminositat de 15 % (#262626), de 5 % (#0D0D0D), de 30 % (#4D4D4D) i de 5 % de nou (#0D0D0D), de manera que un color es repeteix.

Ús de l’eina

1. Tria un color primari amb el selector de colors o escriu un codi hexadecimal com #3B82F6.
2. Tria un tipus d’harmonia: complementària, anàloga, triàdica o monocromàtica.
3. Consulta la paleta generada. Cada mostra de color mostra el seu codi hexadecimal en un botó.
4. Fes clic en aquest botó per copiar el codi hexadecimal o utilitza «Copy All Colors» per copiar tota la paleta alhora.

Comprovar el contrast per a l’accessibilitat

Cada mostra de color mostra dues insígnies petites: una per al contrast amb el blanc i una per al contrast amb el negre. L’eina calcula una relació de contrast mitjançant la fórmula WCAG (Pautes d’accessibilitat al contingut web):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

on C és la proporció de contrast.

L1 correspon a la luminància relativa del color més clar i L2 correspon a la luminància relativa del color més fosc. La luminància es calcula a partir dels valors vermell, verd i blau del color. Una insígnia mostra «AA» quan la proporció és 4,5 o superior, el mínim de la WCAG per al text de mida normal. Mostra «!» quan la proporció és inferior a 4,5. En passar el cursor per damunt d’una insígnia es mostra la proporció exacta. El text negre sobre un fons blanc obté una proporció de 21, el valor màxim possible.

L’eina utilitza la mateixa regla de contrast per triar el color del botó de còpia de cada mostra. Compara el color de la mostra amb el negre i amb el blanc, i després hi posa el dels dos que es llegeix millor. El canvi es produeix amb una luminància relativa d’aproximadament 0,179, el punt en què les dues proporcions són iguals.

Preguntes freqüents

Què és un generador de paletes de colors? És una eina que produeix un conjunt de colors que combinen, a partir d’un color primari i d’una regla d’harmonia triada.

Per què aquesta eina combina el blau amb el groc en lloc del taronja en els colors complementaris? L’eina gira el to 180° a la roda HSL, basada en la manera com les pantalles combinen la llum vermella, verda i blava. La roda de pintures vermell-groc-blau que s’ensenya a les classes d’art produeix parells complementaris diferents perquè combina pigments en lloc de llum.

Quants colors produeix cada tipus d’harmonia? La complementària en produeix 2 en total (inclòs el color primari). La triàdica en produeix 3. L’anàloga en produeix 5. La monocromàtica en produeix 5.

Quin model de color utilitza internament l’eina? HSL (to, saturació i lluminositat). Converteix el codi hexadecimal d’entrada a HSL, fa els càlculs i després converteix el resultat de nou a hexadecimal.

L’eina comprova si els colors són accessibles? Sí. Cada mostra indica si té prou contrast amb el blanc i amb el negre per complir l’estàndard WCAG AA per al text normal, que exigeix una proporció d’almenys 4,5.

Puc utilitzar més d’un tipus d’harmonia en un projecte? Sí. Molts dissenys combinen tipus d’harmonia; per exemple, un conjunt anàleg per als colors principals i un color complementari per a un botó o un ressaltat.

Formats de color

L’eina escriu cada color generat com un codi hexadecimal de sis dígits precedit del signe # (per exemple, #ff0000 per al vermell). Els codis hexadecimals corresponen directament als valors vermell, verd i blau, cadascun entre 0 i 255. El color primari es mostra exactament tal com s’ha introduït, de manera que una forma abreujada de tres dígits com #F00 es manté en format curt. Els codis de tres dígits representen el mateix color que la forma de sis dígits: cada dígit es duplica, de manera que #F00 és #FF0000. HSL és una manera alternativa de descriure els mateixos colors mitjançant el to, la saturació i la lluminositat en lloc de les quantitats de vermell, verd i blau.