Colores y fondos en CSS

Sistemas de color en CSS

CSS ofrece multiples formas de definir colores. Cada una tiene sus ventajas segun el caso de uso.

Formatos tradicionales

El formato moderno: oklch

oklch (Oklab Lightness Chroma Hue) es el formato recomendado para diseño moderno:

color: oklch(70% 0.2 30);
/*          L    C   H
    L = Lightness (0% negro, 100% blanco)
    C = Chroma (0 gris, 0.4 saturado)
    H = Hue (angulo del circulo cromatico)
*/

Ventajas sobre HSL:

• Gradientes más naturales: sin la banda gris que aparece con HSL
• Perceptualmente uniforme: L=50% realmente se ve como 50% de brillo
• Fácil crear paletas: cambia solo L para obtener variantes claras y oscuras del mismo tono

Transparencia en cualquier formato

Agrega un cuarto valor con / para la opacidad:

color: rgb(255 0 0 / 50%);
color: oklch(65% 0.2 25 / 80%);
color: #ff000080; /* 80 hex = 50% */

Gradientes

Gradiente lineal

.fondo {
  background: linear-gradient(135deg, #ff530f, #e6286a);
}

El primer argumento es la dirección: un angulo (135deg) o palabras clave (to right, to bottom left).

Gradiente radial

.fondo {
  background: radial-gradient(circle at top right, #ffc400, transparent 70%);
}

Gradiente conico

.reloj {
  background: conic-gradient(from 0deg, #ff530f, #e6286a, #b056ff, #ff530f);
  border-radius: 50%;
}

Gradiente de texto

Un efecto visual popular es aplicar un gradiente al texto:

.texto-gradiente {
  background: linear-gradient(90deg, #ff530f, #e6286a);
  background-clip: text;
  color: transparent;
}

Fondos

background-image con overlay

Para asegurar legibilidad del texto sobre imagenes, usa un gradiente como overlay:

.hero {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 60%), rgb(0 0 0 / 30%)),
    url("/img/hero.jpg") center / cover no-repeat;
}

Multiples fondos

CSS permite apilar multiples imagenes de fondo. Se renderizan en orden: la primera encima, la última al fondo.

.decorativo {
  background:
    url("patrón.svg") repeat,
    linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

background-clip y background-origin

background-clip controla hasta donde se extiende el fondo:

• border-box (defecto): hasta el borde
• padding-box: hasta el padding
• content-box: solo el area de contenido
• text: solo el texto (para gradientes de texto)

Tema oscuro con prefers-color-scheme

Usa custom properties para crear un tema oscuro automático:

:root {
  --bg: oklch(98% 0 0);
  --text: oklch(15% 0 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(12% 0 0);
    --text: oklch(92% 0 0);
  }
}

color-mix(): mezclar colores en CSS

La función color-mix() permite mezclar dos colores sin preprocesadores:

.hover {
  /* 80% del color primario + 20% de negro */
  background: color-mix(in oklch, var(--brand-primary) 80%, black);
}

Con colores y fondos dominados, en la siguiente leccion anadiremos movimiento a tus interfaces con transiciones y animaciones CSS.

Práctica

1. Crea una paleta con oklch: Define una paleta de 5 colores en :root usando oklch(). Genera variantes claras y oscuras del mismo tono cambiando solo el valor de lightness.
2. Implementa un tema oscuro automatico: Usa @media (prefers-color-scheme: dark) junto con custom properties para redefinir los colores de fondo y texto automaticamente.
3. Aplica un gradiente de texto: Crea un titulo con gradiente usando background: linear-gradient(...), background-clip: text y color: transparent.