Color
Paleta
Rampas de color desde el tuyo, y cuáles de sus pasos aguantan texto.
Pulsa un color para copiarlo.
Todo se calcula en sRGB, que es lo que cualquier pantalla puede pintar. Las paletas de Tailwind y de Radix apuntan a P3, así que sus pasos intermedios se ven algo más vivos que estos en una pantalla que lo soporte.
Qué tinta aguanta cada paso
Con qué color de texto se puede escribir encima de cada paso, a 4,5:1 —el AA de WCAG 2.2 para texto de cuerpo—. Los pasos del centro casi nunca aguantan ninguno de los dos: sirven de fondo, de borde y de icono grande, no de texto.
- Aaaguanta blanco
- Aaaguanta negro
- ninguno de los dos
El CSS, listo para copiar
Sale en oklch() y no en hexadecimal a propósito: el hexadecimal es de ocho bits y redondearlo mueve la luminosidad lo bastante como para romper la escalera. Debajo tienes los hexadecimales por si los necesitas.
:root {
--color1-50: #eff6fe;
--color1-100: #ddebff;
--color1-200: #bfd9fe;
--color1-300: #9ac2fe;
--color1-400: #6ba4fd;
--color1-500: #3b82f6;
--color1-600: #2867d3;
--color1-700: #1b4daa;
--color1-800: #10347c;
--color1-900: #081e51;
--color1-950: #030f2e;
--color2-50: #f0f8f0;
--color2-100: #ddf0dd;
--color2-200: #bbe4be;
--color2-300: #8ed496;
--color2-400: #54bf6b;
--color2-500: #16a34a;
--color2-600: #0d843d;
--color2-700: #06662f;
--color2-800: #034720;
--color2-900: #012c12;
--color2-950: #001708;
--color3-50: #fff2f1;
--color3-100: #ffe2e0;
--color3-200: #fec8c3;
--color3-300: #fea59d;
--color3-400: #fd776e;
--color3-500: #f64943;
--color3-600: #dc2626;
--color3-700: #a61312;
--color3-800: #710704;
--color3-900: #480301;
--color3-950: #290200;
}