Generador de tonalidades de color
Elige o pega un color para obtener una escala equilibrada de 11 pasos del 50 al 950, como construyen sus paletas los sistemas de diseño como Tailwind CSS, además de los clásicos tintes, sombras y tonos. Cada muestra indica su contraste, se copia con un clic y se exporta a Tailwind, variables CSS, SCSS o JSON.
Última actualización:
Escala de color 50 – 950 · haz clic en una muestra para copiarla
Tintes mezclados con blanco, 0 – 90%
Sombras mezcladas con negro, 0 – 90%
Tonos mezclados con gris #808080, 0 – 90%
Exportar
Cómo usar Generador de tonalidades de color
- Elige un color base con el selector o escribe un código HEX como #3b82f6 (también funcionan rgb() y los nombres de color).
- Elige el método: OKLCH da pasos visualmente uniformes; HSL coincide con herramientas más antiguas.
- Ponle nombre al color (por ejemplo primary o brand) para que la exportación use ese nombre.
- Pulsa Generar o simplemente edita el color; la escala, los tintes, las sombras y los tonos se actualizan en vivo. Haz clic en una muestra para copiarla.
- Exporta: elige Tailwind, CSS, SCSS o JSON y luego copia el código o descarga el archivo.
Cómo se construye la escala 50–950
Los sistemas de diseño modernos describen cada color como una escalera de pasos. Tailwind CSS, por ejemplo, los llama 50, 100, 200 … 900 y 950, donde el 50 es casi blanco, el 500 es el color "principal" y el 950 es casi negro. Este generador asigna a cada paso una luminosidad objetivo en el espacio de color OKLCH y mantiene el matiz de tu color en toda la escala:
| Paso | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Luminosidad OKLCH | 97% | 94% | 89% | 81% | 70% | 62% | 55% | 49% | 42% | 38% | 28% |
| Croma (relativo) | 8% | 16% | 30% | 52% | 80% | 100% | 98% | 90% | 78% | 65% | 45% |
Tu color se coloca en el paso con la luminosidad más cercana y se mantiene exactamente como lo escribiste. Los pasos más claros se reparten de forma uniforme entre tu color y el blanco, y los más oscuros entre tu color y el negro. El croma (saturación) se reduce cerca de los extremos de la escalera para que los pasos más pálidos y más oscuros no parezcan neón, y a cualquier color que quede fuera de la gama sRGB de la pantalla se le reduce el croma hasta que encaje, sin cambiar su luminosidad ni su matiz.
Tintes, sombras y tonos: las fórmulas
Las tres filas clásicas mezclan tu color con blanco, negro o gris medio en los canales sRGB. Para cada valor de rojo, verde y azul c y una cantidad de mezcla t de 0 a 0.9:
- Tinte = c + (255 − c) × t
- Sombra = c × (1 − t)
- Tono = c + (128 − c) × t
Ejemplo resuelto con #3b82f6 (59, 130, 246) al 50%: el tinte es (157, 193, 251) = #9dc1fb, la sombra es (30, 65, 123) = #1e417b y el tono es (94, 129, 187) = #5e81bb. Los valores se redondean al número entero más cercano.
Explicación de las etiquetas de contraste
Cada muestra indica la relación de contraste WCAG 2 de su color de texto (blanco o negro, el que tenga más contraste) frente a la muestra. La relación es (L1 + 0.05) ÷ (L2 + 0.05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro.
| Etiqueta | Relación | Adecuado para |
|---|---|---|
| AAA | 7 : 1 o más | Texto de cuerpo para todos, incluidas personas con baja visión |
| AA | 4.5 : 1 o más | Texto de cuerpo normal y botones |
| AA18 | 3 : 1 o más | Solo texto grande (18 pt, o 14 pt en negrita) e iconos |
| No apto | menos de 3 : 1 | Solo decoración, no para texto |
Un patrón habitual es usar los pasos 50–200 para fondos, 500–600 para botones con texto blanco y 700–900 para texto sobre fondos claros.
Preguntas frecuentes
¿Cuál es la diferencia entre tintes, sombras y tonos?
Un tinte es un color mezclado con blanco, una sombra es un color mezclado con negro y un tono es un color mezclado con gris. Los tintes se vuelven más claros, las sombras más oscuras y los tonos más apagados manteniendo aproximadamente la misma luminosidad.
¿Cómo se eligen los pasos del 50 al 950?
Cada paso tiene una luminosidad objetivo similar a la de la paleta predeterminada de Tailwind CSS, desde aproximadamente un 97% de luminosidad en el 50 hasta un 28% en el 950. Tu color se coloca en el paso cuya luminosidad se acerca más a la suya, y los demás pasos se reparten de forma uniforme desde ahí hacia el blanco y el negro.
¿Por qué usar OKLCH en lugar de HSL?
OKLCH es un espacio de color perceptual: cambios iguales en su luminosidad parecen cambios iguales a la vista, y el matiz se mantiene estable a medida que los colores se aclaran u oscurecen. La luminosidad HSL no es perceptual, así que el amarillo al 50% parece mucho más claro que el azul al 50%, y sus pasos pueden verse desiguales.
¿Mi color exacto está en la escala?
Sí. Tu color se usa sin cambios en su paso natural (marcado con un punto), o en el 500 si eliges Siempre 500. Los demás pasos se generan a su alrededor.
¿Qué significan las etiquetas AA y AAA?
Son niveles de contraste WCAG 2 para texto dibujado sobre la muestra en el color de la etiqueta (blanco o negro). AA requiere una relación de contraste de al menos 4.5:1 para texto normal, AAA requiere 7:1. El texto grande solo necesita 3:1 para AA, que se muestra como AA18.
¿Cómo uso la paleta en Tailwind CSS?
Para Tailwind v3, pega el objeto exportado en theme.extend.colors en tailwind.config.js. Para Tailwind v4, pega el bloque @theme en tu archivo CSS principal. Luego usa clases como bg-primary-500 o text-primary-900.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.