Generador de tonos de color
Convierte un color HEX base en una escala OKLCH, HSL o RGB con pasos ajustables, avisos de contraste WCAG por paso y exportación a CSS, Tailwind y JSON.
Generador de tonos de color — Introduce un único color base en HEX y crea al instante una escala completa usando interpolación perceptualmente uniforme en OKLCH o HSL —tono estable con luminosidad repartida por igual— o la mezcla lineal RGB clásica, con el número de pasos que quieras. Ajusta el tono y la saturación, consulta un aviso de contraste WCAG por paso que muestra qué tonos siguen siendo legibles como texto sobre blanco y sobre negro, y copia toda la rampa como propiedades personalizadas de CSS, una configuración de color de Tailwind o JSON. Todo se ejecuta por completo en tu navegador; ningún color se envía a un servidor.
¿Qué es Generador de tonos de color?
El Generador de tonos de color convierte un color HEX base en una escala completa de tintes y sombras lista para un sistema de diseño. En lugar de mezclar solo linealmente en RGB, puede interpolar en OKLCH o HSL para que el tono se mantenga estable y la luminosidad quede repartida por igual, dando una rampa perceptualmente equilibrada sin pasos apagados ni lavados. Tú eliges cuántos pasos genera —de 2 a 24, o una lista personalizada de etiquetas separadas por comas—, desplazas el tono o escalas la saturación, y lees un aviso de contraste WCAG por paso que muestra qué tonos funcionan como texto sobre blanco y sobre negro. La escala terminada se copia como propiedades personalizadas de CSS, un objeto de configuración de color de Tailwind o JSON con un clic.
Cómo usar Generador de tonos de color
- Escribe un color base en el campo Color base (HEX) con el formato #rrggbb o #rgb, o haz clic en la muestra grande para elegirlo visualmente.
- Elige un espacio de color: OKLCH o HSL para una rampa perceptualmente uniforme con tono estable, o RGB para la mezcla lineal clásica.
- Fija cuántos pasos quieres (2–24), o abre Ajustes para introducir una lista de pasos personalizada separada por comas, desplazar el tono, escalar la saturación y definir el nombre de color de la exportación.
- Lee las dos celdas de contraste de cada fila —la letra A sobre blanco y sobre negro—, resaltadas cuando ese tono cumple el WCAG AA para texto.
- Copia el HEX de un solo paso, o copia toda la escala como variables CSS, una configuración de Tailwind o JSON con los botones de copia.
Ejemplos
Rampa OKLCH uniforme desde un azul de marca
Elige OKLCH y mantén 11 pasos: la escala 50–950 reparte la luminosidad por igual manteniendo el tono azul, así ningún paso se ve apagado ni lavado como puede pasar con la mezcla lineal RGB.
Config de Tailwind personalizada de cinco pasos
Introduce 100, 300, 500, 700, 900 como lista de pasos personalizada para emitir cinco muestras, y luego cópialas como un objeto de color de Tailwind con esas mismas etiquetas como claves, o como variables CSS y JSON.
Preguntas frecuentes
- ¿Cuál es la diferencia entre las opciones RGB, HSL y OKLCH?
- RGB mezcla tu color linealmente hacia el blanco y el negro, lo que es rápido pero puede verse irregular en los tonos medios. HSL y OKLCH, en cambio, mantienen el tono estable y reparten la luminosidad por igual; OKLCH es perceptualmente uniforme, así que cada paso parece un salto de brillo idéntico. Elige OKLCH para la rampa más equilibrada.
- ¿Cuántos tonos puedo generar y puedo nombrarlos?
- Fija cualquier número de pasos de 2 a 24. Un valor de 11 usa la numeración conocida de Tailwind (50, 100…900, 950); otros valores se reparten por igual de 50 a 950. También puedes escribir una lista personalizada de etiquetas separadas por comas en Ajustes, que anula el número de pasos y nombra cada paso tal como lo escribes.
- ¿Cómo se calcula el aviso de contraste WCAG?
- Para cada tono, la herramienta calcula la relación de contraste WCAG frente al blanco puro y al negro puro a partir de la luminancia relativa. Las dos pequeñas celdas de cada fila muestran la letra A sobre blanco y sobre negro y se resaltan cuando la relación llega a 4.5:1 (AA para texto normal); pasa el cursor para ver la relación exacta y si es AA o AAA.
- ¿Se suben mis datos de color a algún sitio?
- No. El cálculo de color, las comprobaciones de contraste y las tres exportaciones se ejecutan por completo en tu navegador, así que ningún valor de color se envía a un servidor. Funciona sin conexión y mantiene tu paleta privada.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen con resaltado de sintaxis en tu navegador, con más de 20 lenguajes, temas y fondos personalizados, números de línea y exportación a PNG o SVG.
Verificador de contraste de color
Comprueba el contraste WCAG 2.1 y la puntuación APCA Lc entre texto y fondo, revisa las insignias AA, AAA y 3:1 y aplica el color válido más cercano.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Simulador de daltonismo
Sube una imagen y previsualiza cómo se ve con protanopía, deuteranopía, tritanopía o daltonismo total, y luego descarga el resultado simulado.