Uso de colores en HTML
Los colores son uno de los elementos visuales clave en los sitios web. Ayudan a establecer el tono, resaltar contenido y definir el diseño general. En HTML, hay varias formas de definir colores.
Formas de definir colores
En HTML puedes definir colores por nombre (por ejemplo, red), códigos HEX (por ejemplo, #ff0000), formato RGB (por ejemplo, rgb(255, 0, 0)) o formato HSL (por ejemplo, hsl(0, 100%, 50%)).
Detalles del Código
<p style="color: red;">Red text</p>
<p style="color: #00ff00;">Green text (HEX)</p>
<p style="color: rgb(0, 0, 255);">Blue text (RGB)</p>
<p style="color: hsl(60, 100%, 50%);">Yellow text (HSL)</p>
Vista Previa
Red text
Formato HEX
Los códigos HEX (hexadecimales) comienzan con # y contienen seis caracteres. Los dos primeros definen el rojo, los siguientes el verde y los últimos el azul.
Formato RGB
El formato RGB usa tres números entre paréntesis: rojo, verde y azul. Cada valor va del 0 al 255. Por ejemplo, rgb(255, 0, 0) representa el rojo.
Formato HSL
HSL (Hue, Saturation, Lightness) es otra forma de describir colores. Hue define el ángulo del color en grados, Saturation la intensidad y Lightness el brillo.
Colores por nombre
HTML admite más de 140 nombres de colores predefinidos, como red, blue, green, orange, etc. Son fáciles de leer y rápidos de aplicar.
Contraste entre texto y fondo
Es importante asegurar suficiente contraste entre el texto y el color de fondo. De lo contrario, el contenido puede ser difícil de leer. Usa texto claro sobre fondo oscuro o viceversa.
Colores y accesibilidad
Siempre ten en cuenta a los usuarios con discapacidad visual al elegir colores. Evita combinaciones que sean ilegibles para personas con daltonismo. El contenido no debe depender solo del color.
Tarea: ¡Arrastra la línea que hace que el texto se vuelva verde!
Código
<!DOCTYPE html>
<html>
<head>
<style>
body {
Arrastra el elemento aquí
}
</style>
</head>
<body>
<blockquote>
<p>When you have something to say, silence is a lie.</p>
<footer>- Jordan B. Peterson</footer>
</blockquote>
</body>
</html>
Respuestas
Vista previa
Consejos para usar colores
- Usa un esquema de colores consistente en todo el sitio.
- Evita el uso excesivo de colores fuertes o llamativos.
- Prueba tu diseño tanto en modo claro como oscuro.
- No dependas solo del color para transmitir información.
- Utiliza un verificador de contraste para cumplir con los estándares de accesibilidad (WCAG).
✨ 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.
