Generador de paletas de colores accesibles a partir de tu marca

La forma más sencilla de aclarar u oscurecer un color es mezclarlo con blanco o negro en sRGB o cambiar la L de HSL. Ambas dan escalas desiguales. La luminosidad de HSL no es perceptual: un amarillo al 50 % parece mucho más claro que un azul al 50 %, así que el «mismo» paso tiene un contraste muy distinto según el tono. Mezclar con blanco en sRGB desplaza el tono: los azules viran a morado y los rojos, a rosa.

OKLCH, la forma cilíndrica del espacio OKLab que Björn Ottosson publicó en 2020 y que hoy forma parte de CSS Color Level 4, separa las tres cosas que importan al diseñar:

Como L sigue lo claro que parece un color, los pasos iguales de L dan escalas que se perciben uniformes en cualquier tono, y el contraste con blanco o negro cambia de forma predecible de un paso a otro. Por eso Tailwind CSS v4 define su paleta por defecto en OKLCH.

Cómo construye la escala este generador

1. El color de marca se convierte a OKLCH y se sitúa en el paso con la luminosidad de referencia más cercana (o en el paso que elijas). Conserva su HEX exacto.
2. Los pasos más claros se reparten de forma uniforme en L entre el color de marca y L ≈ 97,5 % (paso 50); los más oscuros, entre el color de marca y L ≈ 25 % (paso 900).
3. El tono no cambia. El croma se atenúa hacia el extremo claro —los tintes muy claros con todo el croma parecen fluorescentes— y baja como mucho un tercio hacia el oscuro.
4. Cualquier color fuera del gamut sRGB vuelve a él reduciendo el croma y manteniendo L y H, como recomienda CSS Color 4.
5. Cada HEX se redondea a 8 bits por canal y el contraste se calcula con ese valor redondeado, que es el que acabarás usando.

Para cada paso, la tabla muestra la relación de contraste WCAG 2.2 con texto blanco puro (#fff) y negro puro (#000):

• AA — al menos 4,5:1: apto para texto normal, etiquetas y enlaces.
• Grande — entre 3:1 y 4,5:1: solo para texto desde 24 px (18,66 px en negrita) y elementos no textuales como iconos, bordes e indicadores de foco (WCAG 1.4.11).
• No — por debajo de 3:1: solo decoración, nunca texto.

Como los pasos siguen la luminosidad perceptual, el resultado es parecido en casi todos los tonos: el texto blanco cumple AA en 600–900 y el negro en 50–500. Prácticamente ningún color cumple con ambos: 4,5:1 frente a blanco y frente a negro a la vez solo es posible en una franja muy estrecha de luminancia relativa (0,175–0,183). Por eso los sistemas de diseño usan 600 o 700 para los botones principales con texto blanco y reservan 400–500 para rellenos, gráficos y texto grande.

La columna APCA muestra el contraste de luminosidad (Lc) del borrador de WCAG 3 para texto blanco y negro. Por encima de 75 es cómodo para texto de lectura, por encima de 60 para etiquetas de interfaz y por encima de 45 para titulares. APCA aún no es un estándar: úsalo para elegir entre opciones que ya cumplen WCAG 2.2.

Parejas dentro de la paleta

Las interfaces tintadas —avisos informativos, filas seleccionadas, etiquetas, pistas de onboarding— ponen un paso oscuro sobre un paso claro del mismo tono. La lista de parejas indica, para cada fondo, qué pasos de texto alcanzan 4,5:1. Como regla general, los pasos separados por cinco o más posiciones (50 con 600, 100 con 700) suelen cumplir; los contiguos, nunca.

• Nombra por función, no por valor. Exporta la escala como --brand-50 … --brand-900 y asigna funciones encima: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Si la marca cambia, solo tocas una lista.
• Documenta las parejas aprobadas. Deja por escrito qué paso de texto va sobre qué fondo para que nadie ponga texto 400 sobre fondo 100 con prisas.
• El tema oscuro es otra asignación. Reutiliza la escala al revés —pasos claros para texto, oscuros para superficies— y vuelve a comprobar las parejas: combinaciones oscuras que cumplen WCAG 2 pueden verse apagadas, algo que APCA muestra mejor.
• Los estados también necesitan contraste. Hover y pulsado suelen bajar un paso; el indicador de foco necesita 3:1 frente al fondo que lo rodea.
• Los colores semánticos (éxito, aviso, error) se generan igual, cada uno desde su color base. El amarillo y el verde lima solo se reconocen en pasos claros, donde el texto blanco no cumple: ponles texto oscuro.

Para comprobar una pareja concreta, incluidos colores fuera de la paleta o capas semitransparentes, usa el comprobador de contraste de color.

1. Ottosson B. A perceptual color space for image processing, 2020 — OKLab y OKLCH, matrices de conversión.
2. W3C. CSS Color Module Level 4 — notación oklch() y ajuste de gamut reduciendo el croma.
3. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — criterios 1.4.3, 1.4.6 y 1.4.11, luminancia relativa y relación de contraste.
4. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — valores Lc.
5. W3C Design Tokens Community Group. Design Tokens Format Module, borrador — estructura $type y $value de la exportación de tokens.