Los tres formatos de color
En diseño web un mismo color puede escribirse de varias formas. Todas describen lo mismo, pero cada una resulta más cómoda según el caso:
- HEX (#RRGGBB): tres pares de dígitos hexadecimales para rojo, verde y azul. Es el más común en CSS y herramientas de diseño. La versión corta #RGB duplica cada dígito (#f80 equivale a #ff8800).
- RGB: la cantidad de rojo, verde y azul, de 0 a 255. Es la forma en la que trabajan las pantallas.
- HSL: tono (0 a 360 grados en la rueda de color), saturación y luminosidad en porcentaje. Es el más intuitivo para crear variantes, por ejemplo oscurecer un color bajando solo la luminosidad.
Ejemplo
El naranja #FF8800 equivale a rgb(255, 136, 0): el rojo está al máximo (FF = 255), el verde al 53 % (88 hexadecimal = 136) y no tiene azul. En HSL es hsl(32, 100%, 50%): tono 32°, completamente saturado y con luminosidad media.
Cómo usar la herramienta
Escribe el color en cualquiera de los formatos; la almohadilla del HEX es opcional. En RGB puedes escribir 255, 136, 0 o rgb(255,136,0). Para HSL usa hsl(32, 100%, 50%).
Consejos
- Al convertir de HSL a RGB se redondean los valores, por lo que un color puede variar una unidad al volver al origen.
- Para texto sobre fondos de color, comprueba siempre el contraste para que sea legible.
El cálculo es local en tu navegador.