CSS
Explica formatos de color modernos, espacios perceptuales, transparencia, color-mix y contraste suficiente para interfaces accesibles y consistentes.
CSS puede expresar color en distintos espacios, pero una paleta útil también debe conservar contraste, estados y significado.
:root {
--brand: oklch(62% 0.19 285);
--text: oklch(22% 0.02 270);
--surface: oklch(98% 0.01 270);
}color: rebeccapurple;
color: #663399;
color: rgb(102 51 153);
color: hsl(270 50% 40%);Todos pueden representar colores sRGB. La sintaxis moderna permite alpha separado por /:
background: rgb(0 0 0 / 0.5);color: oklch(65% 0.18 285);L → luminosidad perceptual
C → croma
H → tonoEs útil para crear escalas donde los pasos de luminosidad se sientan más consistentes que en HSL.
No todos los tonos admiten el mismo croma dentro del gamut del dispositivo.
color: color(display-p3 0.4 0.2 0.9);Puede representar colores fuera de sRGB en pantallas compatibles. Declara un fallback anterior:
.button {
background: #6b46c1;
background: color(display-p3 0.42 0.24 0.86);
}border-color: color-mix(
in oklch,
var(--text) 20%,
transparent
);Mezcla colores en un espacio elegido. El espacio modifica el resultado visual.
.icon {
fill: currentColor;
border: 1px solid currentColor;
}Reutiliza el valor calculado de color, ideal para iconos y controles que deben seguir el texto.
--brand-dark: oklch(from var(--brand) calc(l - 0.12) c h);Permiten derivar canales de otro color. Son potentes para tokens, pero revisa compatibilidad y evita fórmulas que produzcan colores fuera de gamut o contraste insuficiente.
color: rgb(0 0 0 / 0.6);El resultado depende del fondo. Un texto translúcido puede cumplir contraste en una superficie y fallar en otra.
Evalúa texto contra su fondo final, incluyendo:
No dependas solo de inspección visual.
.field[aria-invalid="true"] {
border-color: var(--danger);
}Combínalo con texto, icono o semántica real. Una frontera roja sola puede no ser perceptible.
:root {
color-scheme: light dark;
}Indica que la página soporta esos esquemas y permite que controles, scrollbars y colores del navegador se adapten.
No crea por sí sola toda la paleta del sitio.
@media (forced-colors: active) {
.button {
border: 1px solid ButtonText;
}
}Evita reemplazar colores del sistema salvo necesidad concreta. forced-color-adjust: none debe ser excepcional.
¿Por qué un texto negro con alpha 50% no tiene un contraste fijo?
Porque se mezcla con el fondo; el color final cambia según la superficie que haya debajo.
Backgrounds y gradients construye superficies mediante capas visuales.