Curso HTML – Módulo 7: Gestión de Colores en HTML

Publicada el por

Módulo 7: Gestión de Colores en HTML

La correcta gestión de colores en HTML y CSS es fundamental para crear páginas web atractivas, accesibles y profesionales. Comprender cómo se definen, aplican y combinan los colores en proyectos web es una habilidad clave tanto para quienes inician como para quienes desean perfeccionar sus sitios.

En este módulo abordaremos los siguientes puntos:

  • Entender cómo se definen y utilizan los colores en HTML.

  • Aprender a trabajar con distintos formatos: nombres, RGB, HEX y HSL.

  • Aplicar colores en elementos HTML mediante CSS, tanto en estilo en línea como en hojas de estilo externas.

Nombres y Valores de Colores

HTML define una lista estándar de nombres de colores que pueden usarse de forma directa en atributos de estilo CSS. Algunos ejemplos son: red, blue, green, orange, white, black.

Actualmente existen 147 nombres reconocidos oficialmente por HTML5, asegurando compatibilidad en todos los navegadores modernos.

<p style="color: red;">Este texto es de color rojo usando el nombre de color.</p>

Valores HEX (Hexadecimal)

El formato HEX especifica el color en base hexadecimal, combinando los canales Rojo, Verde y Azul (RGB).

#ff0000: rojo
#3498db: azul
<p style="color: #3498db;">Este texto es color azul en valor hexadecimal</p>

El valor HEX siempre se precede con # y se puede usar 3 dígitos (#rgb) o 6 dígitos (#rrggbb).

Formato RGB (Red, Green, Blue)

El formato RGB permite definir los tres componentes de color usando el siguiente formato: rgb(0, 0, 0), donde los valores de cada canal van de 0 a 255.

<p style="color: rgb(255, 0, 0);">Texto en rojo utilizando RGB.</p>
HSL (Hue, Saturation, Lightness)

HSL define:

  • Hue (matiz): de 0° a 360° (posición en el círculo cromático).

  • Saturation (saturación): 0% (gris) hasta 100% (color vivo).

  • Lightness (luminosidad): 0% (negro) hasta 100% (blanco).

<p style="color: hsl(0, 100%, 50%);">Texto en rojo usando HSL.</p>

Ambos formatos permiten variantes con canal alfa para transparencia: rgba() y hsla().

Diferente formas de aplicar colores en HTML

Podemos modificar el color de texto o fondo directamente en la etiqueta usando el atributo style, conocido como estilos en linea.

<p style="color: #e67e22; background-color: #f9e79f;">
Texto naranja con fondo amarillo claro.
</p>

Mediante Hojas de Estilo (CSS)

<!DOCTYPE html> 
<html>
   <head>
      <title>Mi primera página web</title>
      <meta charset="UTF-8">
      <meta name="description" content="Una página de ejemplo">
      <link rel="stylesheet" href="style.css">
      <style>
         .card {
             background-color: red;
             color: white;
             font-size: 40px;
             padding: 10px;
             margin: 10px;
             border: 3px solid green;
         }
      </style>
   </head>
   <body>
     <div class="card">
        Titulo
     </div>
   </body>
</html>

Propiedades CSS comunes de color

  • color: Color del texto.

  • background-color: Color de fondo del elemento.

  • Otros: border-color, outline-color.

Tabla de Conversión de Colores: HEX, RGB y HSL

Nombre HTML HEX RGB HSL
Rojo
red
#FF0000
rgb(255,0,0)
hsl(0, 100%, 50%)
Verde
green
#00FF00
rgb(0,255,0)
hsl(120, 100%, 50%)
Azul
blue
#0000FF
rgb(0,0,255)
hsl(240, 100%, 50%)
Negro
black
#000000
rgb(0,0,0)
hsl(0, 0%, 0%)
Blanco
white
#FFFFFF
rgb(255,255,255)
hsl(0, 0%, 100%)
Naranja
orange
#FFA500
rgb(255,165,0)
hsl(39, 100%, 50%)
Gris
gray
#808080
rgb(128,128,128)
hsl(0,0%,50%)
También puedes consultar tablas completas con hasta 140 colores estándar, lo cual facilita la selección y conversión de tonos precisos.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Colores en HTML</title>
  <style>
    body {
      background-color: #f4f6f7;
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    h1 {
      color: #2e86c1;
    }
    .hex {
      color: #229954;
    }
    .rgb {
      color: rgb(255, 140, 0);
    }
    .hsl {
      color: hsl(240, 100%, 50%);
    }
    .gray {
      color: gray;
    }
  </style>
</head>
<body>

  <h1>Fundamentos de Colores en HTML</h1>

  <p class="hex">Este texto es verde utilizando un código HEX: <code>#229954</code></p>

  <p class="rgb">Este texto es naranja utilizando RGB: <code>rgb(255, 140, 0)</code></p>

  <p class="hsl">Este texto es azul utilizando HSL: <code>hsl(240, 100%, 50%)</code></p>

  <p class="gray">Este texto es gris utilizando una palabra clave: <code>gray</code></p>

  <p style="background-color: lightgrey; padding: 10px;">
    También puedes aplicar colores al fondo, como en este párrafo con <code>background-color: lightgrey;</code>
  </p>

</body>
</html>

Ejercicios Propuestos

  1. Tabla de conversión de colores
    Crea una tabla en HTML mostrando al menos 8 colores representados en HEX, RGB y HSL.

  2. Página multicolor
    Diseña una página sencilla donde cada sección tenga fondo y textos en diferentes colores aplicando HEX, RGB, HSL y nombres.

  1. Personaliza menús, tarjetas o botones
    Usa propiedades de color CSS para lograr mejor contraste y accesibilidad visual, comprobando que los textos sean legibles sobre cualquier fondo.

Consejos y Buenas Prácticas

  • Usa colores web seguros y que garanticen contraste adecuado.

  • No abuses de los colores llamativos; busca armonía visual.

  • Comprueba la accesibilidad usando herramientas como contrast checkers.

  • Si accedes mediante CSS externo, organiza variables de color, por ejemplo, en la raíz del documento:

    :root {
   --primary: #2980b9;
   --secondary: #f1c40f;
}
body {
   background: var(--secondary);
   color: var(--primary);
}