AZ Tools

Paleta tonal Material Design 3

Color

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.

—
Presets
Paleta tonal
T 0#000000
WCAG 21.00:1
T 10#050013
WCAG 20.67:1
T 20#1c0042
WCAG 18.62:1
T 30#341767
WCAG 14.34:1
T 40#4d3486
WCAG 9.76:1
T 50#6851a5
WCAG 6.35:1
T 60#856fc6
WCAG 5.09:1
T 70#a38de7
WCAG 7.52:1
T 80#c1b0ff
WCAG 10.92:1
T 90#dfd8ff
WCAG 15.40:1
T 95#efecff
WCAG 18.11:1
T 99#fcfbff
WCAG 20.38:1
T 100#ffffff
WCAG 21.00:1
Exportación — Propiedades CSS
: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

  1. Elige un color base con el picker o pega un hex.
  2. Renombra la paleta si quieres (prefijo del export, p. ej. `--primary-40`).
  3. Elige formato de export — variables CSS, config Tailwind, JSON tokens o variables SCSS — y copia.
  4. 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

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).

Color00

Generador de CSS Box Shadow

Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.

Color00

Conversor de Formatos de Color

Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.

Color00

Generador de Gradientes CSS

Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.

Color00

Generador de Paleta de Colores

Crea paletas armoniosas desde un color base con seis esquemas.

Color00

Comprobador de Contraste de Color

Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.

Color00