Colores y Fondos

Maneja colores en todos sus formatos (hex, rgb, hsl) y personaliza fondos con color e imagen.

📖

Teoría

CSS soporta múltiples formatos para especificar colores:

Named: red, blue, tomato (148 colores con nombre)

Hex: #FF5733 o #F53 (shorthand) — el más usado en diseño

RGB: rgb(255, 87, 51) — rojo, verde, azul (0-255)

RGBA: rgba(255, 87, 51, 0.5) — con transparencia (0-1)

HSL: hsl(10, 100%, 60%) — matiz, saturación, luminosidad

HSLA: hsla(10, 100%, 60%, 0.8) — HSL con transparencia

css

/* Fondos sólidos */
body { background-color: #0A0A0F; }
.card { background-color: rgba(255, 255, 255, 0.05); }

/* Gradientes */
.hero {
  background: linear-gradient(135deg, #4F8EF7, #22C55E);
}
.sunset {
  background: linear-gradient(to bottom, #F97316, #EF4444);
}

/* Imagen de fondo */
.banner {
  background-image: url('imagen.jpg');
  background-size: cover;       /* cubre todo el área */
  background-position: center;  /* centrada */
  background-repeat: no-repeat; /* sin repetición */
}

💡HSL para diseñadores

HSL es el formato más intuitivo para diseñar. Para crear una paleta, mantén el mismo matiz (hue) y varía la saturación y luminosidad. Por ejemplo, hsl(220, 90%, 60%) (azul brillante) y hsl(220, 30%, 20%) (azul oscuro) pertenecen a la misma familia.

⚡

Ejercicio práctico

🎯 Tu misión

Crea una paleta de colores interactiva. Diseña tarjetas que muestren colores en diferentes formatos: hex, rgb, hsl. Usa gradientes para el fondo de las tarjetas más llamativas.

Vista previa

←Capítulo anterior

Siguiente capítulo→