Generador de Matices y Tonos de Color

Genera matices (más claros) y tonos (más oscuros) de cualquier color hex. Crea una paleta de 10 pasos para sistemas de diseño, escalas de colores estilo Tailwind y variables CSS.

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

Cómo usar Generador de Matices y Tonos de Color

1Ingresa un color hex base o usa el selector de color.
2Ve 10 matices (variantes más claras) y 10 tonos (variantes más oscuras).
3Haz clic en cualquier muestra para copiar su valor hex.
4Exporta propiedades personalizadas o configuración de Tailwind.

ZenovayAnalytics

Convierte tu tráfico en clientes.

Seguimiento de visitantes en tiempo real
Privacidad primero, sin aviso de cookies
Configurado en dos minutos

Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS

Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.

Generador de Sombra de Caja CSS

Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.

Generador de Borde Redondeado CSS

Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.

Área de Juego CSS Flexbox

Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Cuál es la diferencia entre un matiz y una sombra?▾

Un matiz (tint) se crea añadiendo blanco a un color, haciéndolo más claro mientras se preserva el tono. Una sombra (shade) se crea añadiendo negro, haciéndolo más oscuro. Juntos, los matices y las sombras forman una escala de color. Los sistemas de diseño modernos (como Tailwind CSS, Material Design y Ant Design) usan escalas de 50 a 900, donde 50 es el matiz más claro y 900 es la sombra más oscura.

¿Cómo usa Tailwind CSS las escalas de color?▾

Tailwind CSS proporciona una escala de 11 pasos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) para cada color con nombre. Al crear colores de marca personalizados, extiende la configuración de Tailwind con su propia escala. Esta herramienta genera escalas compatibles con el formato de Tailwind. Puede copiar el resultado como objeto de configuración de Tailwind o como propiedades CSS personalizadas (--color-brand-50 a --color-brand-900).

¿Qué es el espacio de color HSL?▾

HSL (Tono, Saturación, Luminosidad) representa los colores de una manera intuitiva para generar escalas. El Tono (0–360°) es el ángulo del color en la rueda de colores. La Saturación (0–100%) es la intensidad del color — 0% es gris. La Luminosidad (0–100%) es el brillo — 0% es negro, 100% es blanco. Para crear matices, aumente la luminosidad hacia el 100%. Para crear sombras, disminúyala hacia el 0%.

¿Cuál es la diferencia entre los métodos de generación de sombras?▾

Interpolación lineal (mezclando con blanco/negro): sencilla pero puede verse lavada o sucia en los extremos. Ajuste de luminosidad HSL: más uniforme perceptualmente pero puede sobresaturar las sombras oscuras. Ajustado con croma (OKLCH/LCH): el más preciso perceptualmente — mantiene luminosidad percibida consistente. Herramientas como Radix UI y shadcn/ui usan OKLCH para sus sistemas de color. Esta herramienta usa HSL, que proporciona un buen equilibrio entre precisión y compatibilidad.

¿Cómo uso las escalas de color en CSS?▾

Defina los colores como propiedades personalizadas CSS (variables): :root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; } Luego úselos como var(--color-brand-50) en sus estilos. Para el modo oscuro, redefina las mismas variables en un @media (prefers-color-scheme: dark) o clase .dark. Las propiedades personalizadas CSS se pueden redefinir en cualquier nivel del DOM, lo que las hace muy potentes para el diseño de temas.