Cómo convertir colores entre HEX, RGB y HSL
Los diseñadores y desarrolladores web suelen trabajar con colores en diferentes formatos en proyectos, sistemas de diseño y herramientas. Ya sea que esté cambiando entre una maqueta de diseño en HSL, un archivo CSS usando RGB o una guía de marca en HEX, saber cómo convertir entre estos formatos ahorra tiempo rápidamente y evita errores.
Comprender los tres formatos de color principales
La notación HEX (hexadecimal) representa los colores como códigos de seis caracteres como #FF5733, donde pares de caracteres definen la intensidad del rojo, el verde y el azul. RGB (rojo, verde, azul) utiliza valores decimales del 0 al 255 para cada canal de color; por ejemplo, rgb(255, 87, 51). HSL (tono, saturación, luminosidad) describe el color utilizando un ángulo para el tono (0-360°), un porcentaje para la saturación (0-100%) y un porcentaje para la luminosidad (0-100%), escrito como hsl(9, 100%, 60%).
¿Por qué convertir entre formatos?
Diferentes herramientas y contextos favorecen diferentes formatos. Los diseñadores suelen trabajar en HSL porque es intuitivo para ajustar el brillo y la saturación. Los desarrolladores web utilizan RGB o HEX en hojas de estilo CSS. La producción impresa puede necesitar un espacio de color diferente. La conversión le permite mover el trabajo entre herramientas sin volver a especificar los colores manualmente.
Cómo funciona la conversión
La conversión entre formatos implica relaciones matemáticas. HEX a RGB es sencillo: divida los seis caracteres en tres pares y convierta cada uno de hexadecimal (base 16) a decimal (base 10). RGB a HSL es más complejo: encuentra los valores máximo y mínimo del canal y luego deriva el tono, la saturación y la luminosidad. Los procesos inversos aplican matemáticas inversas para retroceder.
Conversión de colores en línea
El cálculo manual es propenso a errores en conversiones repetidas. Usar Convertidor de colores para transformar entre HEX, RGB y HSL al instante. Pegue un color en cualquier formato y vea los equivalentes en todos los demás, eliminando la necesidad de entender las matemáticas usted mismo.
Garantizar opciones de color accesibles
Una vez que haya convertido un color, verifique que cumpla con los estándares de accesibilidad usando corrector de contraste para confirmar suficiente contraste con su texto. Si necesitas inspiración para el diseño, Generador de colores aleatorios produce paletas nuevas que luego puedes convertir a tu formato preferido.
Privacidad: los colores permanecen en tu dispositivo
El conversor de colores procesa cada conversión en su navegador; no se envían datos a un servidor. Sus paletas de colores, diseños de trabajo en progreso y especificaciones de marca permanecen privados en su dispositivo. La herramienta funciona sin conexión después de que se carga la página, por lo que puedes continuar convirtiendo colores sin acceso a Internet.