Generador de paletes de colors

Com utilitzar el generador de paletes de colors

1. Tria un Color base amb la mostra de color, o escriu qualsevol codi a Codi del color base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), un nom CSS…).
2. Escull una Harmonia: Complementària, Anàloga, Triàdica, Complementària dividida, Tetràdica (rectangle), Quadrada o Monocromàtica.
3. Tria el Cercle cromàtic: HSL (clàssic) o OKLCH (perceptual). La paleta s’actualitza quan canvies qualsevol opció; Genera la paleta també l’actualitza.
4. Copia un sol color amb el botó Copia que hi ha sota la seva mostra, o tria un format a Exporta com a (Llista HEX, Variables CSS, Variables SCSS, Matriu JSON o Colors de Tailwind) i fes servir Copia o Baixa per a tota la paleta.

Cada mostra indica el seu codi HEX en negre o en blanc, el que tingui millor contrast, i la seva posició respecte al color base (per exemple +120°).

Les harmonies de color

Les harmonies de color són angles fixos al cercle cromàtic. A partir del to base, l’eina gira el to i conserva la saturació i la lluminositat del color base.

• Complementària (0°, 180°): el color oposat. Contrast màxim, ideal per a un botó d’acció davant d’un color principal de marca.
• Anàloga (−60°, −30°, 0°, +30°, +60°): colors veïns al cercle. Combinacions tranquil·les i naturals que van bé per a fons i il·lustracions.
• Triàdica (0°, 120°, 240°): tres tons equidistants. Vivaç i equilibrada; normalment un color domina i els altres dos són d’accent.
• Complementària dividida (0°, 150°, 210°): els dos veïns del complementari. Contrast fort amb menys tensió que una parella complementària pura.
• Tetràdica (rectangle) (0°, 60°, 180°, 240°): dues parelles complementàries. Paletes riques que necessiten un color dominant per mantenir la coherència.
• Quadrada (0°, 90°, 180°, 270°): quatre tons equidistants.
• Monocromàtica: un sol to en cinc graus de lluminositat, de fosc a clar. Ideal per a estats d’interfície, gràfics i dissenys subtils.

Cercle HSL o OKLCH?

El cercle HSL (clàssic) és el tradicional, utilitzat per la majoria d’eines de disseny i tutorials. El seu inconvenient és que angles iguals no semblen igual de lluminosos: el groc a 60° sembla molt més clar que el blau a 240° amb la mateixa lluminositat HSL.

El cercle OKLCH (perceptual) gira el to al model de color Oklab, dissenyat perquè la lluminositat es vegi uniforme. Les paletes construïdes amb ell tenen colors de pes visual semblant, cosa que ajuda a obtenir contrastos accessibles. Alguns colors girats poden quedar fora del que pot mostrar una pantalla; l’eina en redueix aleshores una mica la croma perquè es puguin visualitzar.

Com utilitzar la paleta exportada

Variables CSS produeix un bloc :root amb --color-1, --color-2… que pots enganxar en un full d’estils. Variables SCSS dóna línies $color-1: …;, Matriu JSON dóna una llista de cadenes HEX per a scripts, i Colors de Tailwind dóna un objecte colors amb claus 100, 200, 300… per enganxar a la configuració de Tailwind.

Abans de publicar, comprova el contrast del text: una harmonia garanteix tons agradables, no text llegible. Fes servir neutres foscos o clars per al text principal i reserva els colors saturats de la paleta per a accents, botons i gràfics.