Inicio
HTML
Colores HTML: Guía Completa

Colores HTML: Guía Completa

jac AHTML7 months ago1.9K Views

En HTML, los colores son fundamentales para dar estilo y personalidad a tu página web. Los colores pueden aplicarse a diferentes elementos, como fondos, textos, bordes, y mucho más. A continuación, exploraremos cómo trabajar con colores en HTML y abordaremos temas clave como poner color de fondo, cambiar el color del texto, y utilizar códigos de colores.

Conclusión

Cómo poner color de fondo en HTML

Para cambiar el color de fondo de un elemento HTML, puedes usar el atributo style con la propiedad CSS background-color. También puedes hacerlo mediante una hoja de estilos CSS externa o interna. Aquí tienes algunos ejemplos prácticos:

Ejemplo con el atributo `style`

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color de Fondo</title>
</head>
<body style="background-color: lightblue;">
    <h1>¡Este es un ejemplo de fondo color azul claro!</h1>
</body>
</html>

Color de Fondo

¡Este es un ejemplo de fondo color azul claro!

Ejemplo usando una hoja de estilos interna

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fondo con CSS</title>
    <style>
        body {
            background-color: #f0e68c; /* Amarillo claro */
        }
    </style>
</head>
<body>
    <h1>Fondo amarillo claro con CSS</h1>
</body>
</html>

Fondo con CSS body { background-color: #f0e68c; /* Amarillo claro */ }

Fondo amarillo claro con CSS

Color de letra en HTML

El color del texto se define con la propiedad CSS color. Puedes aplicarlo a cualquier elemento de texto, como encabezados, párrafos o enlaces.

Ejemplo aplicando diferentes colores al texto

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color de Letra</title>
</head>
<body>
    <h1 style="color: blue;">Texto azul en el encabezado</h1>
    <p style="color: #800080;">Texto morado en el párrafo</p>
    <a href="#" style="color: orange;">Este enlace es de color naranja</a>
</body>
</html>

Color de Letra

Texto azul en el encabezado

Texto morado en el párrafo

Este enlace es de color naranja

Usando clases CSS

En proyectos grandes, lo ideal es usar clases CSS para aplicar colores de forma consistente:

<style>
    .texto-azul {
        color: blue;
    }
    .texto-rojo {
        color: red;
    }
</style>

<h1 class="texto-azul">Texto azul con clase</h1>
<p class="texto-rojo">Texto rojo con clase</p>

.texto-azul { color: blue; } .texto-rojo { color: red; }

Texto azul con clase

Texto rojo con clase

Código de colores en HTML

HTML soporta diferentes formatos para definir colores:

Nombres de colores predefinidos
HTML incluye una lista de 140 nombres predefinidos, como red, blue, lime, gold, etc. <div style="background-color: coral;">Coral</div>
Códigos HEX
Representan colores en formato hexadecimal (#RRGGBB). Por ejemplo:
- #000000 = Negro
- #FFFFFF = Blanco
- #FF5733 = Naranja
<div style="background-color: #FF5733;">Color hexadecimal</div>
Valores RGB y RGBA
RGB define colores mediante valores para rojo, verde y azul. RGBA añade transparencia. <div style="background-color: rgba(255, 99, 71, 0.5);"> Fondo semi-transparente </div>
HSL y HSLA
HSL usa matiz, saturación y luminosidad, mientras que HSLA añade transparencia. <div style="background-color: hsl(120, 100%, 50%);"> Verde usando HSL </div>

Colores HTML

Rojo

HEX: #FF0000

RGB: rgb(255, 0, 0)

Verde

HEX: #00FF00

RGB: rgb(0, 255, 0)

Azul

HEX: #0000FF

RGB: rgb(0, 0, 255)

Amarillo

HEX: #FFFF00

RGB: rgb(255, 255, 0)

Naranja

HEX: #FFA500

RGB: rgb(255, 165, 0)

Púrpura

HEX: #800080

RGB: rgb(128, 0, 128)

Teal

HEX: #008080

RGB: rgb(0, 128, 128)

Rosa

HEX: #FFC0CB

RGB: rgb(255, 192, 203)

Conclusión

Controlar los colores en HTML y CSS te permite crear diseños atractivos y personalizados. Ya sea que trabajes con fondos, textos o bordes, comprender los diferentes métodos y códigos de colores te dará mayor flexibilidad en tus proyectos. Experimenta con los ejemplos proporcionados para dominar el uso de colores en tus páginas web.