Now Reading: Colores HTML: Guía Completa
-
01
Colores HTML: Guía Completa
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
- Color de letra en HTML
- Código de colores en HTML
- Colores HTML
- 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 naranjaUsando 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, comored,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
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.
