Saltar al contenido

Generador de escalas de color

Crea una escala legible de once tonos desde un color base y copia CSS listo para usar.

Color base

Ingresa un color hexadecimal de seis dígitos. La escala válida se actualiza al instante.

Escala generada

Cada muestra usa la etiqueta negra o blanca más legible.

50

Etiqueta #000000

Contraste 19.57:1

AA Cumple

AAA Cumple

100

Etiqueta #000000

Contraste 17.10:1

AA Cumple

AAA Cumple

200

Etiqueta #000000

Contraste 14.35:1

AA Cumple

AAA Cumple

300

Etiqueta #000000

Contraste 11.93:1

AA Cumple

AAA Cumple

400

Etiqueta #000000

Contraste 9.53:1

AA Cumple

AAA Cumple

500

Etiqueta #000000

Contraste 7.31:1

AA Cumple

AAA Cumple

600

Etiqueta #000000

Contraste 5.01:1

AA Cumple

AAA No cumple

700

Etiqueta #FFFFFF

Contraste 6.64:1

AA Cumple

AAA No cumple

800

Etiqueta #FFFFFF

Contraste 10.82:1

AA Cumple

AAA Cumple

900

Etiqueta #FFFFFF

Contraste 16.58:1

AA Cumple

AAA Cumple

950

Etiqueta #FFFFFF

Contraste 20.22:1

AA Cumple

AAA Cumple

Exportar tokens

Elige variables CSS estándar o tokens de tema de Tailwind CSS v4.

Formato de exportación

Vista previa del código

:root {
	--brand-50: #FFF5F0;
	--brand-100: #FFE2D6;
	--brand-200: #FFCAB3;
	--brand-300: #FFB18E;
	--brand-400: #FF9260;
	--brand-500: #FF6A00;
	--brand-600: #D15500;
	--brand-700: #9E3F00;
	--brand-800: #6C2800;
	--brand-900: #3A1200;
	--brand-950: #120300;
}