Paleta tonal Material Design 3
A partir de un solo color base, construye una paleta de 13 tonos (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) siguiendo las convenciones de Material Design 3. Cada tono conserva el matiz del color base y empuja el croma tan alto como permita el gamut sRGB a la luminosidad objetivo, usando una rampa perceptual OKLCH. Útil para design tokens, themar una librería UI o sistemas de color accesibles — se muestra el ratio de contraste contra el mejor de blanco/negro en cada tono para elegir parejas seguras de primer plano/fondo.
:root {
--primary-0: #000000;
--primary-10: #050013;
--primary-20: #1c0042;
--primary-30: #341767;
--primary-40: #4d3486;
--primary-50: #6851a5;
--primary-60: #856fc6;
--primary-70: #a38de7;
--primary-80: #c1b0ff;
--primary-90: #dfd8ff;
--primary-95: #efecff;
--primary-99: #fcfbff;
--primary-100: #ffffff;
}Tonos generados con OKLCH (luminosidad perceptual) y recortados al gamut sRGB. Aproxima Material 3 HCT con bastante fidelidad.
Cómo usar
- Elige un color base con el picker o pega un hex.
- Renombra la paleta si quieres (prefijo del export, p. ej. `--primary-40`).
- Elige formato de export — variables CSS, config Tailwind, JSON tokens o variables SCSS — y copia.
- Haz clic en cualquier muestra para copiar su hex.
Preguntas frecuentes
- ¿Es el mismo algoritmo HCT de Google?
- El espíritu es parecido, pero no es idéntico. Material Color Utilities usa HCT (basado en CAM16); esta herramienta usa OKLCH (Björn Ottosson, 2020), un espacio perceptual cómodo para navegadores. Tonos de la misma luminosidad se ven comparables, pero los hex exactos pueden diferir.
- ¿Por qué varía el croma entre tonos?
- sRGB no puede reproducir colores muy saturados en luminosidades muy oscuras o muy claras — la herramienta busca el croma máximo dentro del gamut mediante búsqueda binaria. Por eso el tono 90 se ve apagado y el tono 50 suele ser el más vivo.
- ¿Cómo leer el ratio de contraste?
- Es el contraste de luminosidad WCAG contra el mejor de blanco o negro. ≥4,5 pasa AA para texto normal; ≥3,0 pasa AA para texto grande y componentes UI.
- ¿Y los roles para modo oscuro?
- M3 mapea `primary` a tono 40 en claro y tono 80 en oscuro, `on-primary` a tono 100 / tono 20, etc. Esta herramienta da la escala tonal cruda — la asignación de roles depende de tu spec de tema.
Herramientas relacionadas
Exportador de Tokens de Color
Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Generador de Tintes y Sombras
Genera tintes (más claros), sombras (más oscuros) y tonos (con gris) desde cualquier color base — 2 a 20 pasos, en HEX, RGB o HSL.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador aleatorio de ejercicios de práctica musical
Tonalidad, escala, acorde, tempo, compás y enfoque técnico aleatorios para practicar instrumento — 12 raíces cromáticas, 15 escalas (modos, pentatónica, blues, disminuida, frigia dominante), 14 cualidades de acorde hasta novenas y 20 indicaciones de articulación.