Colores en CSS
CSS permite definir colores para los elementos de distintas formas. Se pueden usar nombres de color, códigos HEX, valores RGB/RGBA y formatos HSL/HSLA.
Uso de nombres de color
CSS reconoce más de 140 nombres de colores predefinidos como 'red', 'blue', 'green'. Son una opción rápida y fácil de entender.
Colores HEX
Los códigos HEX representan los componentes rojo, verde y azul de un color. Su formato es #RRGGBB, donde cada componente es un número hexadecimal entre 00 y FF.
Colores RGB y RGBA
El modelo RGB define un color mediante la combinación de rojo, verde y azul. RGBA añade un canal alfa que indica transparencia.
Colores HSL y HSLA
El modelo HSL (Hue, Saturation, Lightness) define un color según tono, saturación y luminosidad. HSLA incluye además un canal alfa para la transparencia.
Ejemplos de colores
Los siguientes cuadros incluyen el nombre, código HEX y RGB de los colores.
Red
#FF0000
rgb(255, 0, 0)
Green
#00FF00
rgb(0, 255, 0)
Blue
#0000FF
rgb(0, 0, 255)
Purple
#800080
rgb(128, 0, 128)
Orange
#FFA500
rgb(255, 165, 0)
Cyan
#00FFFF
rgb(0, 255, 255)
Pink
#FFC0CB
rgb(255, 192, 203)
Yellow
#FFFF00
rgb(255, 255, 0)
Comparación de formatos de color
Los siguientes ejemplos muestran cómo lograr el mismo color en diferentes formatos.
Consejos para usar colores
La elección correcta de colores es importante para la apariencia del sitio y también para la accesibilidad.
- Asegúrate siempre de que haya suficiente contraste entre el texto y el fondo.
- Los colores RGBA y HSLA permiten transparencia, lo que es útil en diseños modernos.
- En proyectos grandes conviene usar una paleta de colores consistente para mantener un diseño uniforme.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
