CSS Colores & Fondos

Formatos de color, gradientes y propiedades background.

Color Playground Interactivo

Elige un color y ve todas sus representaciones en los formatos soportados por CSS.

background-* · gradientes Fondos

Color sólido, imágenes y los cuatro tipos de gradiente CSS.

background-color
linear-gradient(135deg)
radial-gradient(circle)
conic-gradient
repeating-linear-gradient
filter · backdrop-filter Filtros

Efectos visuales CSS: blur, brightness, contrast, grayscale, hue-rotate, sepia, invert, drop-shadow…

blur
bright
contrast
gray
hue
sepia
shadow
invert
oklch() · lab() · lch() CSS Color 4

Espacios de color perceptualmente uniformes. oklch(L C H) — Luminosidad, Croma, Matiz — es el recomendado moderno por su predicibilidad.

Mismo L y C, diferente Hue → luminosidad perceptualmente uniforme

color: oklch(70% 0.15 142);  /* L C H */
color: lch(70% 35 142);      /* alternativa */
color: lab(70% -20 30);      /* L a b */
color-mix() Moderno

Mezcla dos colores en un espacio de color dado. Disponible desde Chrome 111+ / Safari 16.2+.

/* 50% mezcla en sRGB */
color: color-mix(in srgb, blue, red);

/* 80% azul en oklch */
color: color-mix(in oklch, #3d7ef5 80%, #e74c3c);

/* transparencia */
color: color-mix(in srgb, blue 60%, transparent);
mix-blend-mode · isolation Composición

Define cómo se mezcla el color de un elemento con el fondo. Similar a los modos de fusión de Photoshop.

multiply
screen
overlay 
mix-blend-mode: multiply | screen | overlay |
                darken  | lighten | color-dodge |
                color-burn | hard-light | soft-light |
                difference | exclusion | hue |
                saturation | color | luminosity
backdrop-filter Efectos

Aplica filtros (blur, brillo, contraste…) al área detrás del elemento, no al elemento en sí. Base del efecto "glassmorphism".

Glassmorphism
.glass {
  background: rgba(255,255,255, 0.15);
  backdrop-filter: blur(8px) brightness(1.1);
  border: 1px solid rgba(255,255,255, 0.3);
}
Contraste y accesibilidad A11y

WCAG 2.1 exige una relación de contraste mínima. AA requiere 4.5:1 para texto normal, AAA requiere 7:1. CSS Level 5 incluye color-contrast().

✓ AA — blanco sobre azul
contraste ~4.6:1
✗ Falla — celeste sobre azul
contraste ~1.9:1
✓ AAA — blanco sobre oscuro
contraste >7:1
✗ Falla — gris claro
contraste ~2.4:1