¿Cómo creo versiones más claras y oscuras de un color?
Generador de tonalidades y matices: matices (mezclados con blanco) a la izquierda, base en el centro, tonalidades (mezcladas con negro) a la derecha.
La interpolación OKLCH conserva el tono al mezclar: el azul se aclara/oscurece pero sigue leyéndose como azul, no gris.
Ideal para estados hover/active, variantes de botón y pares de modo oscuro. Todo en local.
Cómo usarlo
- Elige un color base (HEX, picker nativo, cuentagotas de pantalla).
- Elige el número de pasos: 3 (sutil), 5 (equilibrado), 7 (detallado), 10 (rampa tipo Tailwind).
- A la derecha: matices (con blanco) → base ★ → tonalidades (con negro). Pulsa para copiar el HEX.
- Debajo: variables CSS listas para soltar en `:root`.
- Truco: una salida de 10 pasos → muy cerca de Tailwind 100/200/.../900 de tu color de marca.
Cuándo es útil
Dónde se notan tonalidades y matices - usos típicos:
- Estados hover / active: botón base + matiz para hover (más claro) + tonalidad para active (más oscuro).
- Botones ghost / outline: matiz-300 como fondo, base como borde, tonalidad-700 como texto.
- Modo oscuro: las tonalidades 700 y 800 son candidatas para fondos de modo oscuro.
- Estado deshabilitado: matiz-200 como botón "fantasma".
- Tarjetas con elevación: matiz-100 como fondo de tarjeta sobre un cuerpo blanco.
- Consistencia de marca: cuando el color de marca #ef4444 es demasiado brillante para un header, usa la tonalidad-300 como alternativa más equilibrada.
- Educación: nota que "azul 50% puro" en OKLCH se ve perceptualmente al 50%, en HSL no: por eso nuestros matices/tonalidades se sienten uniformemente espaciados.
Preguntas y respuestas
Matiz (tint) = color original + blanco (versión más clara). Tonalidad (shade) = color original + negro (versión más oscura). Distinto del "tone" (original + gris), que no generamos porque se usa poco.