Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
CSS admite varias formas de definir color: nombres, hexadecimal, rgb() y hsl(). Cada una tiene sus ventajas.
Explicación
Estas son las formas más comunes de escribir un color en CSS:
red, blue...Nombres de color predefinidos. Fáciles de leer pero limitados (unos 140 nombres).
#2563ebColor hexadecimal: 6 dígitos que representan rojo, verde y azul. El formato más usado en diseño web. No necesitas memorizar los códigos: existen muchas herramientas gratuitas para elegirlos, como htmlcolorcodes.com/es
rgb(22, 163, 74)Define un color con sus componentes rojo, verde y azul, cada uno de 0 a 255.
hsl(160, 84%, 39%)Define un color por matiz, saturación y luminosidad; más intuitivo para crear variaciones de un mismo tono.
Reto rápido
Agrega una cuarta línea de texto y dale un color usando el formato hsl().
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Puedes agregar un cuarto valor de transparencia con rgba() o hsla(), como rgba(0,0,0,0.5) para un negro semi-transparente.
Dato extra
Herramientas como el selector de color de las DevTools del navegador te muestran el mismo color en hex, rgb y hsl a la vez.
Error común
Escribir un hexadecimal incompleto, como #2563e (5 dígitos) en vez de 6. El navegador simplemente ignora el color inválido.
Siguiente paso
Con el color dominado, sigamos con las propiedades que controlan la tipografía del texto.
Ir a la siguiente lección