Generador de tints i ombres d'un color

Com utilitzar el generador de tints i ombres

1. Tria un Color base amb la mostra, o escriu un valor a Codi del color: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) o un nom CSS com teal.
2. Escull un Pas: 5 %, 10 %, 20 % o 25 %. Amb 10 %, obtens tints al 10 %, 20 % … 100 % i el mateix nombre d’ombres.
3. Tria com Barreja a: OKLCH (perceptual) o sRGB (clàssic). Les dues files s’actualitzen alhora: Tints (barrejats amb blanc) i Ombres (barrejades amb negre), cadascuna a partir de la base.
4. Fes clic a Copia sota qualsevol mostra per copiar-ne el codi HEX.
5. A Exporta com a, tria Variables CSS, Configuració de Tailwind (v3), Tailwind @theme (v4), Variables SCSS o JSON, defineix un Nom com primary o brand, i després Copia o Baixa el codi.

Tints, ombres i tons

En la teoria del color, un tint és un color barrejat amb blanc, una ombra és un color barrejat amb negre, i un to és un color barrejat amb gris. El percentatge indica quant blanc o negre s’afegeix: un tint del 30 % és un 70 % de color base i un 30 % de blanc. Al 100 % s’arriba al blanc pur o al negre pur, i per això l’última mostra de cada fila sempre és #FFFFFF o #000000; marca el final de l’escala.

Els tints i les ombres són la manera més ràpida de construir una escala coherent a partir d’un sol color de marca: fons clars i estats de desplaçament del cursor amb els tints, vores, estats premuts i text fosc amb les ombres.

Barreja en OKLCH o en sRGB?

sRGB (clàssic) barreja directament els valors de vermell, verd i blau. És el que fan la majoria de generadors més antics i coincideix amb color-mix(in srgb, …) de CSS. La fórmula d’un tint és simplement canal + (255 − canal) × p, i la d’una ombra canal × (1 − p). És previsible, però els passos no són perceptualment uniformes: els blaus tendeixen a virar cap al porpra quan s’aclareixen, i les ombres fosques sovint queden apagades.

OKLCH (perceptual) barreja a l’espai de color OKLCH dissenyat per Björn Ottosson el 2020, com color-mix(in oklch, …) de CSS. La lluminositat, la croma i el to s’interpolen per separat. El blanc i el negre no tenen to, de manera que el to de la base es conserva fins al final, i cada pas canvia la lluminositat en una quantitat visualment semblant. Els colors que quedarien fora de la gamma sRGB es retornen reduint la croma, no retallant canals, de manera que el to es manté estable. Per als sistemes de disseny, això sol donar escales més netes i més uniformes.

Com utilitzar l’exportació

• Variables CSS produeix un bloc :root com --primary-tint-20 i --primary-shade-40, a punt per enganxar en un full d’estils.
• Configuració de Tailwind (v3) dona un objecte colors per a theme.extend.colors; després escrius classes com bg-primary-tint-20 o text-primary-shade-60. DEFAULT conté la base, de manera que bg-primary també funciona.
• Tailwind @theme (v4) dona variables --color-… per a la configuració basada en CSS de Tailwind 4.
• Variables SCSS i JSON van bé per a altres eines de compilació i tokens de disseny.

Els noms es converteixen a minúscules i els espais passen a guionets, de manera que «Brand Blue» passa a ser brand-blue.