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%)).

<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>

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.

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).