Selector de Color HTML para formatos RGB HEX HSL
¿Qué es un código de color HTML?
Los códigos de color HTML son una forma de especificar colores en el diseño web. Estos códigos se utilizan en HTML y CSS para definir los colores de elementos como texto, fondos, bordes y más. Comprender los códigos de color HTML es esencial para crear páginas web visualmente atractivas y consistentes.
Por ejemplo, el color rojo se puede identificar utilizando los siguientes formatos:
Tipos de Códigos de Color HTMLCódigos de Color Hexadecimal:
La forma más común de especificar colores en HTML y CSS es utilizando códigos de color hexadecimal (hex). Un código de color hexadecimal es una combinación de seis dígitos de números y letras definidos por su mezcla de componentes rojo, verde y azul (RGB).
Formato: #RRGGBB
Ejemplo: #FF5733 representa un tono de naranja.
Cada par de dígitos corresponde a la intensidad de rojo, verde y azul, respectivamente, en una escala de 00 (sin intensidad) a FF (intensidad completa).
Códigos de Color RGB:Los códigos de color RGB definen colores basados en sus componentes rojo, verde y azul.
Formato: rgb(red, green, blue)
Ejemplo: rgb(255, 87, 51) es el equivalente RGB de #FF5733.
Cada componente (rojo, verde y azul) se especifica como un número entre 0 y 255
Códigos de Color RGBA:Similar al RGB, pero incluye un componente alfa para la opacidad.
Formato: rgba(red, green, blue, alpha)
Ejemplo: rgba(255, 87, 51, 0.5) especifica el mismo color con 50% de opacidad.
Códigos de Color HSL:HSL significa Matiz, Saturación y Luminosidad.
Formato: hsl(hue, saturation%, lightness%)
Ejemplo: hsl(9, 100%, 60%) es otra forma de representar el color #FF5733
El matiz es un grado en la rueda de colores (de 0 a 360), la saturación es un porcentaje (0% es escala de grises, 100% es color completo), y la luminosidad también es un porcentaje (0% es negro, 100% es blanco).
Códigos de Color HSLA:Similar al HSL, pero incluye un componente alfa para la opacidad.
Formato: hsla(hue, saturation%, lightness%, alpha)
Ejemplo: hsla(9, 100%, 60%, 0.5) especifica el mismo color con 50% de opacidad.
Uso de los Códigos de Color HTML:Los códigos de color HTML se pueden utilizar en varias propiedades de CSS para dar estilo a los elementos web. Por ejemplo:
<style> .text-color { color: #FF5733; } .background-color { background-color: rgb(255, 87, 51); } .border-color { border: 2px solid hsl(9, 100%, 60%); } </style> <p>This text is orange.</p> <div>This background is orange.</div> <div>This border is orange.</div>En este ejemplo, el texto, el fondo y el borde se estilizan utilizando diferentes tipos de códigos de color HTML, todos representando el mismo tono de naranja.
Los códigos de color HTML son un aspecto fundamental del diseño web, permitiendo a los desarrolladores definir y manipular colores con precisión. Al comprender los códigos de color hex, RGB, RGBA, HSL y HSLA, puedes crear páginas web visualmente coherentes y atractivas que mejoren la experiencia del usuario.