Generador de tonos claros y oscuros

Cómo usar el generador de tonos claros y oscuros

1. Elige un Color base con la muestra o escribe un valor en Código de color: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) o un nombre CSS como teal.
2. Elige un Paso: 5 %, 10 %, 20 % o 25 %. Con el 10 % obtienes tonos claros al 10 %, 20 % … 100 % y el mismo número de tonos oscuros.
3. Elige cómo Mezclar en: OKLCH (perceptual) o sRGB (clásico). Las dos filas se actualizan al instante: Tonos claros (mezclados con blanco) y Tonos oscuros (mezclados con negro), ambas a partir del color base.
4. Pulsa Copiar bajo cualquier muestra para copiar su código HEX.
5. En Exportar como, elige Variables CSS, Configuración de Tailwind (v3), Tailwind @theme (v4), Variables SCSS o JSON, indica un Nombre como primary o brand y usa Copiar o Descargar para obtener el código.

Tintes, sombras y matices

En teoría del color, un tinte (tint) es un color mezclado con blanco, una sombra (shade) es un color mezclado con negro y un matiz (tone) es un color mezclado con gris. En esta herramienta los llamamos simplemente tonos claros y tonos oscuros. El porcentaje indica cuánto blanco o negro se añade: un tono claro al 30 % es un 70 % de color base y un 30 % de blanco. Al 100 % se llega al blanco o al negro puros, por eso la última muestra de cada fila es siempre #FFFFFF o #000000: marca el final de la escala.

Los tonos claros y oscuros son la forma más rápida de crear una escala coherente a partir de un único color de marca: fondos claros y estados hover con los tonos claros; bordes, estados pulsados y texto oscuro con los oscuros.

¿Mezcla en OKLCH o en sRGB?

sRGB (clásico) mezcla directamente los valores de rojo, verde y azul. Es lo que hacen la mayoría de los generadores antiguos y equivale a color-mix(in srgb, …) en CSS. La fórmula de un tono claro es simplemente channel + (255 − channel) × p, y la de un tono oscuro, channel × (1 − p). Es predecible, pero los pasos no son uniformes a la vista: los azules tienden a virar hacia el morado al aclararse y los tonos oscuros suelen verse apagados.

OKLCH (perceptual) mezcla en el espacio de color OKLCH, diseñado por Björn Ottosson en 2020, como color-mix(in oklch, …) en CSS. La luminosidad, el croma y el tono se interpolan por separado. El blanco y el negro no tienen tono, así que el tono base se mantiene en toda la escala, y cada paso cambia la luminosidad en una cantidad visualmente parecida. Los colores que quedarían fuera de la gama sRGB se recuperan reduciendo el croma, no recortando canales, así que el tono se mantiene estable. Para sistemas de diseño, esto suele dar escalas más limpias y uniformes.

Cómo usar la exportación

• Variables CSS genera un bloque :root con variables como --primary-tint-20 y --primary-shade-40, listo para pegar en una hoja de estilos.
• Configuración de Tailwind (v3) da un objeto colors para theme.extend.colors; después escribes clases como bg-primary-tint-20 o text-primary-shade-60. DEFAULT contiene el color base, así que bg-primary también funciona.
• Tailwind @theme (v4) da variables --color-… para la configuración basada en CSS de Tailwind 4.
• Variables SCSS y JSON sirven para otras herramientas de compilación y tokens de diseño.

Los nombres se pasan a minúsculas y los espacios se convierten en guiones, así que «Brand Blue» pasa a brand-blue.