Dominando los Colores en HTML y CSS: Formatos Hexadecimal, RGB y Aplicación Web

Enviado por Chuletator online y clasificado en Plástica y Educación Artística

Escrito el 11 de Noviembre de 2025 en español con un tamaño de 3,88 KB

Introducción a los Códigos de Color en HTML

Los códigos de colores en HTML son combinaciones de tres colores en formato hexadecimal que representan los colores rojo, verde y azul (#RRGGBB). Estos códigos son ampliamente utilizados en la creación de páginas web para cambiar el color de fondo, texto y tablas, así como en programas de edición de imágenes como Adobe Photoshop.

En HTML, los colores se aplican principalmente a través de atributos y estilos CSS. A continuación, se presenta una referencia rápida sobre cómo usar etiquetas y estilos para trabajar con colores:

1. Aplicación Directa: Usando el Atributo `style`

Puedes aplicar colores directamente a través del atributo style en cualquier etiqueta HTML. Ejemplo:

<p style="color: red;">Este texto es rojo.</p>
<div style="background-color: blue;">Este fondo es azul.</div>

2. Organización con CSS: Clases y Hojas de Estilo

Es más organizado usar clases y hojas de estilo CSS para manejar colores:

<p class="texto-verde">Este texto es verde.</p>
<div class="fondo-amarillo">Este fondo es amarillo.</div>

3. Formatos de Color Admitidos en la Web

Puedes usar diferentes formatos para definir colores:

Nombres de colores: red, blue, green, etc.
Hexadecimal: #FF5733, #000000, etc.
RGB: rgb(255, 87, 51), rgb(0, 0, 0), etc.
RGBA (con transparencia): rgba(255, 87, 51, 0.5).
HSL: hsl(0, 100%, 50%).
HSLA (con transparencia): hsla(0, 100%, 50%, 0.5).

4. Ejemplo Práctico Completo (HTML y CSS)

A continuación, se muestra un ejemplo completo de cómo definir estilos CSS y aplicarlos en el cuerpo del documento:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colores en HTML</title>
  <style>
    .texto-azul {
      color: #3498db;
    }
    .fondo-gris {
      background-color: #c8c8c8;
    }
  </style>
</head>
<body>
  <p class="texto-azul">Texto con color azul.</p>
  <div class="fondo-gris">Fondo con color gris claro.</div>
</body>
</html>

El Sistema de Colores Hexadecimal (#RRGGBB)

Los colores hexadecimales son una forma fundamental de representar colores en sistemas digitales, especialmente en el desarrollo web. Este sistema utiliza una base 16 (hexadecimal), que incluye los números del 0 al 9 y las letras de la A a la F, para expresar valores de color en tres componentes: Rojo, Verde y Azul (RGB).

Cada color se representa por un código de seis dígitos precedido por el símbolo '#'. Por ejemplo, el negro se representa como #000000 y el blanco como #FFFFFF.

Cada código de color en HTML representa la combinación de tres valores numéricos que indican la intensidad de los colores rojo, verde y azul. Estos valores se combinan para crear el color deseado.

Ejemplos de Intensidad Hexadecimal

Por ejemplo, el código de color #FF0000 representa la intensidad máxima de color rojo, y la ausencia total de los colores verde y azul. Como resultado, el color que se muestra es rojo puro.
Del mismo modo, el código de color #00FF00 representa la intensidad máxima de color verde, y la ausencia total de los colores rojo y azul. Como resultado, el color que se muestra es verde puro.

Entradas relacionadas:

Etiquetas: