Primitivos
Escalas de color
El método con el que DesignToken101 construye la escala del acento y la de los neutros a partir del color de marca, el resultado con su contraste y cómo crear las variables en Figma.
Última revisión:
Con el espacio de color decidido, puedes construir las escalas. DesignToken101 parte de un único color de marca, #33CC99, y genera dos escalas de once pasos: la del acento y la de los neutros. En esta lección verás el método paso a paso, el resultado y lo que dice sobre el uso de cada color.
En esta página
- El método
- La escala del acento
- La escala de neutros
- Lo que la escala dice sobre su uso
- El nombre de las paletas
- En Figma
- Lo que te llevas
El método
- Convertir la marca a oklch, #33CC99 → L 0,755 · C 0,145 · H 165,4
- Elegir una curva de referencia, L y C de green de Tailwind CSS
- Colocar la marca en su paso, El de L más cercana: 500
- Escalar el croma, 0,145 ÷ 0,219 ≈ 0,66 en todos los pasos
- Mantener el tono, H 165,4 en los once pasos
- Ajustar a sRGB, Reducir el croma si no cabe
- Comprobar el contraste, WCAG 2.2 sobre el hex
1. Convertir la marca a oklch. #33CC99 es oklch(0.755 0.145 165.4). Por qué oklch lo viste en Espacio de color.
2. Elegir una curva de referencia. Una escala de once pasos necesita once luminosidades (L) y once cromas (C). Se pueden decidir a ojo, pero es difícil que los saltos queden regulares. El método copia esas cifras de una escala ya probada: la curva de referencia.
"Curva" significa cómo cambian L y C a lo largo de los pasos. En una escala como las de Tailwind CSS, la L baja del 50 (casi blanco) al 950 (casi negro), y el C sube hacia los pasos centrales y vuelve a bajar en los extremos, porque los colores muy claros o muy oscuros admiten menos croma (puedes verlo en oklch.com: la gama se estrecha arriba y abajo).
DesignToken101 toma la curva de green de Tailwind CSS v4, porque su tono (≈150) es cercano al de la marca (165,4) (Tailwind CSS: Colors). Los valores del script coinciden con el CSS fuente de Tailwind CSS 4.3.3 (theme.css). De green se toman dos columnas, L y C; el tono es el de la marca. Así queda la referencia y lo que sale de ella:
| Paso | L de green | C de green | L de emerald | C de emerald |
|---|---|---|---|---|
| 50 | 0,982 | 0,018 | 0,982 | 0,012 |
| 100 | 0,962 | 0,044 | 0,962 | 0,029 |
| 200 | 0,925 | 0,084 | 0,925 | 0,056 |
| 300 | 0,871 | 0,150 | 0,871 | 0,099 |
| 400 | 0,792 | 0,209 | 0,792 | 0,139 |
| 500 | 0,723 | 0,219 | 0,755 | 0,145 (marca) |
| 600 | 0,627 | 0,194 | 0,627 | 0,129 |
| 700 | 0,527 | 0,154 | 0,527 | 0,102 |
| 800 | 0,448 | 0,119 | 0,448 | 0,079 |
| 900 | 0,393 | 0,095 | 0,393 | 0,063 |
| 950 | 0,266 | 0,065 | 0,266 | 0,043 |
La L de emerald es la de green en todos los pasos menos en el 500, que es la de la marca. El C de emerald es el de green multiplicado por 0,66 (paso 4).
3. Colocar la marca en su paso. La marca va exacta, sin retocar, en el paso cuya L se parece más a la suya. Su L es 0,755; en la curva de green, el 400 tiene 0,792 y el 500, 0,723. El más cercano es el 500.
4. Escalar el croma. La marca es menos intensa que la referencia: en el paso 500, 0,145 frente a 0,219. El croma de todos los pasos se multiplica por esa proporción, 0,66. Así la escala entera tiene la intensidad de la marca.
5. Mantener el tono. Todos los pasos usan el tono de la marca, 165,4. De la referencia se toman L y C, nunca el tono.
6. Ajustar a sRGB. Si un paso no cabe en sRGB, se reduce su croma y se conservan L y H. Con este color de marca ningún paso lo necesita.
7. Comprobar el contraste. Se calcula con la fórmula de WCAG 2.2 sobre el hex de cada paso (Understanding 1.4.3).
Recomendación
El método es nuestro, no una norma. Lo elegimos porque se puede reproducir con un script y porque el color de marca aparece tal cual en la escala. Si tu marca tiene otro tono, usa como referencia la curva de Tailwind CSS cuyo tono se parezca más al suyo: el método funciona igual, porque de la referencia toma L y C, no el tono.
La escala del acento
- 50, #F2FCF7
- 100, #E1F9EE
- 200, #C4F3DD
- 300, #93EAC5
- 400, #4FD7A6
- 500, #33CC99, Color de marca
- 600, #0EA075
- 700, #1A7D5C
- 800, #1F624A
- 900, #1F503E
- 950, #0D2C20
| Paso | oklch | Hex | Contraste con blanco | Contraste con neutral/950 |
|---|---|---|---|---|
| 50 | 0.982 0.012 165.4 | #F2FCF7 | 1,05 | 18,86 |
| 100 | 0.962 0.029 165.4 | #E1F9EE | 1,11 | 17,86 |
| 200 | 0.925 0.056 165.4 | #C4F3DD | 1,22 | 16,19 |
| 300 | 0.871 0.099 165.4 | #93EAC5 | 1,42 | 13,94 |
| 400 | 0.792 0.139 165.4 | #4FD7A6 | 1,81 | 10,92 |
| 500 | 0.755 0.145 165.4 | #33CC99 (marca) | 2,05 | 9,63 |
| 600 | 0.627 0.129 165.4 | #0EA075 | 3,33 | 5,93 |
| 700 | 0.527 0.102 165.4 | #1A7D5C | 5,08 | 3,89 |
| 800 | 0.448 0.079 165.4 | #1F624A | 7,23 | 2,73 |
| 900 | 0.393 0.063 165.4 | #1F503E | 9,23 | 2,14 |
| 950 | 0.266 0.043 165.4 | #0D2C20 | 15,02 | 1,32 |
Fíjate en el 500: su L (0,755) no es la de la referencia (0,723), porque es la de la marca. Es el único paso que no sigue la curva.
La escala de neutros
Los neutros son los grises de la interfaz: fondos, texto y bordes. Tailwind CSS tiene dos escalas grises: neutral, sin croma, y gray, con un ligero tinte azulado (theme.css). El método mezcla las dos y les da el tono de la marca:
- L de
neutral. - C de
graymultiplicado por 0,5: un tinte suave. - H de la marca, 165,4.
- 50, #F9FAFA
- 100, #F4F5F5
- 200, #E3E6E5
- 300, #D1D5D3
- 400, #9BA39F
- 500, #6C7671
- 600, #4B5550
- 700, #38433E
- 800, #1F2924
- 900, #101A15
- 950, #050C09
| Paso | oklch | Hex | Contraste con blanco | Contraste con neutral/950 |
|---|---|---|---|---|
| 50 | 0.985 0.001 165.4 | #F9FAFA | 1,05 | 18,89 |
| 100 | 0.970 0.002 165.4 | #F4F5F5 | 1,09 | 18,09 |
| 200 | 0.922 0.003 165.4 | #E3E6E5 | 1,26 | 15,73 |
| 300 | 0.870 0.005 165.4 | #D1D5D3 | 1,48 | 13,33 |
| 400 | 0.708 0.011 165.4 | #9BA39F | 2,58 | 7,65 |
| 500 | 0.556 0.013 165.4 | #6C7671 | 4,70 | 4,20 |
| 600 | 0.439 0.015 165.4 | #4B5550 | 7,74 | 2,55 |
| 700 | 0.371 0.017 165.4 | #38433E | 10,29 | 1,92 |
| 800 | 0.269 0.017 165.4 | #1F2924 | 14,99 | 1,32 |
| 900 | 0.205 0.017 165.4 | #101A15 | 17,79 | 1,11 |
| 950 | 0.145 0.014 165.4 | #050C09 | 19,76 | 1,00 |
Recomendación
Neutros tintados con el tono de la marca, con un tinte suave. Un gris puro también funciona; el tinte busca que los grises y el acento parezcan de la misma familia. Es una decisión estética: si tu marca no la necesita, usa tint=0.
Lo que la escala dice sobre su uso
WCAG 2.2 pide un contraste mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande (Understanding 1.4.3). Las tablas ya te dicen qué combinaciones sirven:
- El color de marca no admite texto blanco: 2,05:1. Con texto oscuro (
neutral/950) llega a 9,63:1. - Para texto blanco sobre el acento hace falta el
700o más oscuro: 5,08:1. - Para un enlace sobre fondo blanco tampoco sirve el
500. El700sí. - El gris más claro que sirve para texto sobre blanco es
neutral/500: 4,70:1.
Qué combinación usa la web para cada cosa se decide en los tokens semánticos (Semánticos de color), y el contraste se estudia a fondo en el módulo Accesibilidad (Contraste de texto).
El nombre de las paletas
La paleta del acento se llama emerald: su tono, 165,4, está cerca del de emerald de Tailwind CSS, entre 162 y 173 según el paso (theme.css). No se llama brand ni accent, por la regla que viste en Qué es un primitivo.
La de los neutros se llama neutral, como la escala gris de Tailwind CSS: se nombra por su naturaleza, no por un tono.
En Figma
En la colección Primitives, crea una variable Color por paso: color/emerald/50 … color/emerald/950 y color/neutral/50 … color/neutral/950 (Figma: Create and manage variables).
- Escribe el valor en hex, el de la tabla o el que te dé el script.
- En el scope, desmarca todas las propiedades.
- Marca Hide from publishing (Figma: Hide styles, components, and variables when publishing).
- Añade el code syntax Web:
var(--t101-color-emerald-500).
Recomendación
Los primitivos de color no tienen scope y se ocultan al publicar: nadie los aplica a un diseño. Su única función es ser el destino de los tokens semánticos. Así, quien diseña con la biblioteca elige color/text/neutral/default, y no neutral/900. Lo ampliamos en La colección completa.
Desde la raíz del repositorio:
python3 tools/scales.pyEl script imprime cada escala con su oklch, su hex y su contraste con blanco y con neutral/950, y marca el paso de la marca. También escribe tools/scales.json.
Para generar las escalas de otra marca, cambia los valores de entrada al final del script. El color va en HSL (grados, porcentaje, porcentaje):
tools/scales.py
ACCENT_HSL = (160, 60, 50) # color de marca de DesignToken101: #33CC99 (S8)
TINT = 0.5 # croma de los neutros: gray × 0,5 (S11); 0 = gris puro
out = build(ACCENT_HSL, TINT)build aplica el método de esta lección. TINT es el multiplicador del croma de los neutros.
Lo que te llevas
- Una escala de color tiene once pasos, del 50 al 950, con la curva de luminosidad y croma de una escala de referencia.
- El color de marca va exacto en su paso, y el croma se ajusta a su intensidad.
- La tabla de contraste dice qué pasos sirven para texto y cuáles no.
Fuentes
- Tailwind CSS: Colors
- Tailwind CSS: theme.css (código fuente, v4.3.3)
- WCAG 2.2: Understanding 1.4.3 Contrast (Minimum)
- Figma: Create and manage variables and collections
- Figma: Hide styles, components, and variables when publishing
- Björn Ottosson: A perceptual color space for image processing (blog del autor de Oklab)