Entendiendo los Formatos de Color Web
Los diseñadores web y desarrolladores frontend necesitan constantemente traducir colores entre diferentes formatos según el contexto de su CSS o herramientas de diseño. Nuestro conversor de color te permite cambiar sin problemas entre los tres formatos más dominantes en la web.
HEX (Hexadecimal)
Los códigos Hex son la forma más común de representar colores en diseño web. Consisten en un hash (#) seguido de 6 caracteres (usando números del 0 al 9 y letras de la A a la F). Los caracteres se dividen en tres pares que representan Rojo, Verde y Azul. Ejemplo: #FF0000 es rojo puro.
RGB (Rojo, Verde, Azul)
RGB representa colores mediante la combinación de luz roja, verde y azul. Cada valor varía de 0 a 255. Ejemplo: rgb(255, 0, 0) es rojo puro. RGB se usa a menudo en CSS cuando los desarrolladores necesitan agregar un canal alfa para transparencia (RGBA).
HSL (Tono, Saturación, Luminosidad)
HSL es el formato más intuitivo para que los humanos lo entiendan y manipulen.
- Tono: El grado en la rueda de color (0-360). 0 es rojo, 120 es verde, 240 es azul.
- Saturación: Porcentaje (0-100%). 0% es un tono de gris, 100% es el color completo.
- Luminosidad: Porcentaje (0-100%). 0% es negro, 50% es normal, 100% es blanco.
Los frameworks de UI modernos dependen en gran medida de HSL porque facilita enormemente la generación de paletas de colores. Para crear un tono más oscuro de tu color principal al pasar el ratón, simplemente disminuyes el porcentaje de Luminosidad mientras dejas el Tono y la Saturación intactos.