Ya sabes que un color se puede escribir con nombre, en hexadecimal, rgb() o hsl(). Ahora vas a trabajar el color como lo hace un estudio: con una paleta definida en variables, con transparencias, degradados, un modo oscuro y, sobre todo, con contraste suficiente para que todo se lea.

Todos describen los mismos colores de pantalla (sRGB), salvo oklch(), que además llega a colores más vivos en pantallas que los admiten. Para empezar, HSL es el más cómodo: hsl(tono saturación luminosidad).

• Tono (0–360): el ángulo en la rueda de color. 0 rojo, 120 verde, 240 azul.
• Saturación (0–100 %): de gris a color puro.
• Luminosidad (0–100 %): de negro a blanco; 50 % es el color "puro".

.boton          { background: hsl(210 80% 45%); }
.boton:hover    { background: hsl(210 80% 38%); }   /* mismo tono, más oscuro */
.boton-suave    { background: hsl(210 80% 92%); }   /* mismo tono, muy claro */

📌 Nota. OKLCH (oklch(luminosidad croma tono)) resuelve un problema de HSL: en HSL, un amarillo y un azul con la misma "luminosidad" 50 % no parecen igual de claros. En OKLCH sí. Por eso lo usan Tailwind y muchos sistemas de diseño actuales. Puedes explorarlo en oklch.com.

Define la paleta una vez en :root y úsala en todo el proyecto. Nombra los colores por su función, no por cómo se ven:

:root {
  --color-fondo: hsl(40 30% 97%);
  --color-texto: hsl(220 25% 15%);
  --color-acento: hsl(354 70% 50%);
  --color-acento-suave: hsl(354 70% 94%);
  --color-borde: hsl(220 15% 85%);
}

body   { background: var(--color-fondo); color: var(--color-texto); }
a      { color: var(--color-acento); }
.aviso { background: var(--color-acento-suave); border: 1px solid var(--color-borde); }

Si mañana cambia la identidad, cambias cinco líneas. Además, currentColor toma el color del texto del elemento: border: 2px solid currentColor hace que el borde siempre combine con el texto.

color-mix() mezcla dos colores en la proporción que quieras. Muy útil para sacar variantes de la paleta sin inventar códigos nuevos:

Un degradado es una imagen que genera CSS, así que va en background (o background-image), no en background-color:

.cabecera { background: linear-gradient(135deg, hsl(354 70% 50%), hsl(30 90% 55%)); }
.foco     { background: radial-gradient(circle at 30% 20%, hsl(200 90% 70%), hsl(220 60% 20%)); }
.grafico  { background: conic-gradient(hsl(354 70% 50%) 0 40%, hsl(210 80% 45%) 0 75%, hsl(45 90% 55%) 0); }

• linear-gradient: en línea recta; el primer valor es la dirección (to right, 135deg).
• radial-gradient: desde un punto hacia fuera.
• conic-gradient: girando alrededor de un centro (gráficos de sectores, ruedas).

Cuidado con poner texto sobre degradados: comprueba el contraste en la parte más clara y en la más oscura.

La norma WCAG 2.1 (nivel AA, obligatoria en webs públicas en España) pide un contraste mínimo entre texto y fondo:

Cómo comprobarlo: en las DevTools, al inspeccionar un texto y hacer clic en su muestra de color, aparece la relación de contraste con un ✓ o ✗. También puedes usar el comprobador de WebAIM.

Y una regla de oro: el color nunca debe ser la única forma de dar información. Un campo con error no puede ser solo "rojo": añade un icono o un texto.

El sistema operativo le dice al navegador si la persona prefiere un tema oscuro. Con una media query y tus variables, adaptar la web es cambiar la paleta:

:root {
  color-scheme: light dark;         /* formularios y barras de desplazamiento se adaptan */
  --color-fondo: hsl(40 30% 97%);
  --color-texto: hsl(220 25% 15%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: hsl(220 20% 10%);
    --color-texto: hsl(40 20% 92%);
  }
}

En el modo oscuro no inviertas los colores sin más: baja la saturación de los acentos y evita el negro puro de fondo (cansa la vista). Con JavaScript puedes añadir un botón para cambiar de tema (lo verás en la lección Eventos).

1. Crea color.html con un título, un párrafo, un enlace y un botón.
2. Define en :root una paleta de cinco variables con nombres de función (fondo, texto, acento, acento suave, borde) en HSL.
3. Haz el :hover del botón con color-mix() y una cabecera con un degradado lineal.
4. Añade el modo oscuro con prefers-color-scheme y pruébalo: en las DevTools de Chrome, menú ⋮ → More tools → Rendering → Emulate CSS media feature prefers-color-scheme.
5. Comprueba con las DevTools que todos los textos pasan el 4,5 : 1 en los dos modos.

• Poner un degradado en background-color: no funciona; va en background.
• Usar opacity para "aclarar" un fondo y que el texto también se vuelva transparente.
• Nombrar variables por su aspecto (--rojo): cuando la marca cambie a verde, el nombre mentirá. Mejor --color-acento.
• Texto gris claro sobre blanco "porque queda elegante": casi nunca pasa el contraste.
• Olvidar revisar los estados (:hover, :focus-visible, deshabilitado) en el modo oscuro.