Pack de tokens de color de marca — escala HEX HSL OKLCH
Genera un pack de tokens de color de marca desde un solo base en el navegador. Pasos: elige el base (HEX o selector), consulta HEX/RGB/HSL/OKLCH, crea la escala 50–950 con parejas negro/blanco en cada paso y copia variables CSS o JSON. Al abrir carga el azul de ejemplo #2563eb — nada se sube.
Cómo funciona
Introduce o elige un color base de marca. La página muestra HEX, RGB, HSL y OKLCH, genera una escala de 11 pasos (50–950) con vista previa de UI y recomienda texto negro o blanco con ratio en cada muestra. Copia variables CSS o JSON cuando la rampa encaje — todo local.
Reglas que debes conocer
Qué esperar de la escala, los espacios de color, las pistas de contraste y la privacidad.
- El paso 500 es tu base. Por debajo se aclara mezclando hacia blanco; por encima se oscurece hacia negro (mezcla lineal en sRGB).
- El bloque base lista HEX, RGB, HSL y OKLCH del mismo color. OKLCH usa conversión sRGB → lineal → OKLab para alinearlo con la sintaxis CSS moderna.
- Cada muestra recomienda texto negro o blanco — el que ofrezca mayor contraste en ese fondo. Los ratios siguen la luminancia relativa WCAG; las etiquetas AA son orientativas.
- Privacidad: generación, vista previa y copia al portapapeles ocurren en local en esta pestaña.
Ejemplo
Carga la muestra (#2563EB). El bloque de espacios muestra HEX, RGB, HSL y OKLCH del base; la cuadrícula lista 50–950 con texto negro o blanco recomendado y ratio de contraste. Copiar CSS devuelve :root { --color-50: …; … --color-950: …; } listo para tu hoja de estilos.
Cuándo encaja
- Sistemas de diseño: parte de un HEX de marca y entrega una rampa 50–950 coherente más variables CSS.
- Modo oscuro: revisa tintes claros (50–300) para superficies y tonos profundos (700–950) para texto sobre marca.
- Entrega a desarrollo: copia tokens JSON o propiedades CSS en lugar de reescribir HEX desde una captura.
Frequently asked questions
¿Mi color sale del navegador?
No. El cálculo y la exportación se ejecutan en esta pestaña; tus colores no se envían a ningún servidor.
¿Cómo se construye la escala 50–950?
El paso 500 coincide con tu color base. Los pasos más claros (50–400) se mezclan hacia blanco; los más oscuros (600–950) hacia negro. La mezcla es lineal en sRGB para mantener el matiz estable.
¿Qué significan las columnas de contraste?
Cada muestra compara texto negro y blanco sobre ese fondo y elige el que da mayor contraste WCAG. Las etiquetas muestran el ratio y si el texto normal probablemente cumple AA (4,5:1) o AA grande (3:1).
¿Qué incluyen Copiar CSS y Copiar JSON?
Copiar CSS genera propiedades personalizadas :root (--color-50 a --color-950). Copiar JSON entrega la misma escala más los espacios del base en datos estructurados para tokens de diseño.
¿Cuándo usar el comprobador de contraste?
Son sugerencias rápidas negro/blanco por paso. Para pares personalizados o niveles WCAG exactos, abre el comprobador de contraste WCAG y pega el HEX de cualquier muestra.
Related tools
Consultas o comentarios
¿Algo poco claro, roto o que falte? Redacta un mensaje abajo — leemos cada nota sobre estas herramientas.