Lección 3: Color en CSS
Introducción a los colores en CSS
En CSS, los colores son una parte fundamental del diseño web. Hay varias formas de especificar colores, cada una con sus propias ventajas y usos específicos. Entender cómo funcionan estos sistemas de color te permitirá crear diseños más atractivos y accesibles.
Nombres de colores
CSS proporciona una serie de nombres de colores predefinidos que puedes usar directamente. Estos son fáciles de recordar y usar, pero están limitados en número y no ofrecen la precisión de otros métodos.
p { color: red; }
h1 { background-color: lightblue; }
RGB (Red, Green, Blue)
RGB es un modelo de color aditivo que utiliza la combinación de rojo, verde y azul para crear todos los colores posibles en pantalla. Cada color se representa con un valor de 0 a 255, donde 0 es la ausencia total del color y 255 es la intensidad máxima.
Estos valores (0-255) se utilizan porque representan todos los valores posibles en 8 bits (2^8 = 256 valores diferentes, de 0 a 255). En términos de porcentaje, 0 es 0% y 255 es 100% de intensidad del color.
p { color: rgb(255, 0, 0); } /* Rojo puro */
div { background-color: rgb(0, 255, 0); } /* Verde puro */
span { border-color: rgb(0, 0, 255); } /* Azul puro */
Valores hexadecimales
Los valores hexadecimales son otra forma de representar colores RGB. En lugar de usar números del 0 al 255, se utilizan dígitos hexadecimales (0-9 y A-F) para representar valores del 0 al 255 en solo dos dígitos.
Un valor hexadecimal de color consta de 6 dígitos, donde:
- Los primeros dos dígitos representan el rojo
- Los siguientes dos dígitos representan el verde
- Los últimos dos dígitos representan el azul
Por ejemplo, #FF0000 es rojo puro (255 en decimal), #00FF00 es verde puro, y #0000FF es azul puro.
body { color: #FF0000; } /* Rojo */
div { background-color: #00FF00; } /* Verde */
RGBA
RGBA es una extensión de RGB que incluye un canal alfa para la transparencia. El valor alfa va de 0 (completamente transparente) a 1 (completamente opaco).
div { background-color: rgba(0, 0, 255, 0.5); } /* Azul semi-transparente */
HSL y HSLA
HSL (Hue, Saturation, Lightness) es otra forma de representar colores que puede ser más intuitiva para algunos diseñadores:
- Hue (Tono): Un grado en la rueda de color (de 0 a 360)
- Saturation (Saturación): Un porcentaje donde 0% es un tono de gris y 100% es el color completo
- Lightness (Luminosidad): Un porcentaje donde 0% es negro y 100% es blanco
HSLA añade un canal alfa para la transparencia, similar a RGBA.
h1 { color: hsl(0, 100%, 50%); } /* Rojo */
div { background-color: hsla(240, 100%, 50%, 0.5); } /* Azul semi-transparente */
Tabla de colores comunes
| Color | Palabra clave | Valor RGB hexadecimal | Muestra |
|---|---|---|---|
| Negro | black | #000000 | |
| Blanco | white | #FFFFFF | |
| Rojo | red | #FF0000 | |
| Verde | green | #00FF00 | |
| Azul | blue | #0000FF | |
| Amarillo | yellow | #FFFF00 |
Propiedades de color en CSS
Hay varias propiedades en CSS que utilizan valores de color:
color: Define el color del texto.background-color: Define el color de fondo de un elemento.border-color: Define el color del borde de un elemento.
Ejercicio práctico
Crea un documento HTML con varios elementos y aplica diferentes colores usando los métodos que hemos aprendido. Intenta usar nombres de colores, valores hexadecimales, RGB, RGBA, HSL y HSLA.