Generador de tonos de color
Genera una escala 50-950 desde un color base para superficies UI, bordes, hover y modo oscuro.
Continuar con este color
Qué ofrece esta página
- Genera tintes claros y tonos oscuros desde un color.
- Parte del color original marcado y comprueba el texto y fondo reales antes de asignar colores a botones o textos.
- Exporta la escala como variables CSS, Tailwind CSS v3/v4 o JSON.
Bueno para
- Escalas Tailwind
- Design tokens
- Hover
Cómo usarlo
Ejemplo práctico
Comprueba el texto y el fondo reales juntos. El nombre del color o el número del tono no garantizan texto legible.
:root {
--brand: #E24B4A; /* original at 400, not necessarily 500 */
--button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }¿Puedo usarlo con el generador principal?
Sí. Empieza aquí, abre la herramienta principal de Chromoforge con el mismo color base y exporta la paleta.
¿Para qué sirve cada paso de una escala 50-950?
Los números de los tonos son identificadores. Los claros suelen servir de fondo y los oscuros de texto, pero los roles dependen del color inicial y del contraste del par. No asumas que 500 es el original ni que cualquier 600 sirve para un botón.
¿Conviene interpolar los tonos en HSL o en OKLCH?
OKLCH separa luminosidad percibida y croma mejor que HSL. Esta herramienta usa objetivos fijos de luminosidad con croma variable, conserva el original en el paso más cercano y recorta colores fuera del gamut a sRGB. No garantiza distancias visuales iguales.