Entender los formatos de color: HEX, RGB, HSL y más
Qué hace este conversor
Un mismo color puede escribirse de muchas maneras, y esta herramienta lo traduce a seis de ellas a la vez. Escribe un valor en HEX, RGB o HSL — o elígelo con el selector visual — y verás al instante su equivalente en HEX, RGB, HSL, HSV, CMYK y LAB. Los deslizadores HSL permiten ajustar el matiz, la saturación y la luminosidad mientras el resto de formatos se actualiza en paralelo.
Como los seis formatos se calculan a partir del mismo color y no de una tabla fija, mover el selector o un deslizador recalcula todo el conjunto en tiempo real, de modo que lo que copias siempre corresponde a la muestra exacta que ves en pantalla.
Cuándo conviene cada formato
Cada tarea pide una notación distinta. HEX y RGB son los que se pegan en CSS y en la mayoría de herramientas de diseño; HSL resulta más cómodo cuando quieres una versión algo más oscura o menos saturada de un color; CMYK entra en juego cuando el diseño va a imprenta; y LAB es útil cuando necesitas colores que el ojo humano perciba a distancias uniformes. Tener los seis a la vista significa tomar el que espere la tarea que tienes delante, sin buscar un segundo conversor.
Ejemplo: convertir #FF5733
Toma el naranja #FF5733. En RGB es rgb(255, 87, 51): rojo al máximo, algo de verde y menos azul. En HSL queda aproximadamente hsl(11, 100%, 60%), un matiz cerca del extremo rojo de la rueda, saturado al máximo y con un 60% de luminosidad. Para imprenta se acerca a cmyk(0%, 66%, 80%, 0%). Cada notación apunta a la misma muestra; solo la describe con números distintos, y el botón de copiar junto a cada valor lo lleva directo a tu código o a tu archivo de diseño.
Notas de formato y casos límite
HEX y RGB contienen la misma información — #FF5733 y rgb(255, 87, 51) son el mismo color con otra ropa — así que convertir entre ellos no pierde nada. HSL y HSV, en cambio, reorganizan esa información en torno a la intuición humana, lo que los hace más prácticos para retocar un color que para almacenarlo. CMYK es un modelo de impresión con una gama más estrecha que tu pantalla, por lo que sus valores son una aproximación cercana y no una coincidencia exacta, mientras que LAB es independiente del dispositivo y perceptualmente uniforme. Los resultados en HEX, RGB y HSL se pueden pegar tal cual en CSS.