Conversor de colores

Acerca de los formatos de color

El mismo color puede escribirse como HEX (#ff6600), RGB (rgb(255, 102, 0)) o HSL (hsl(24, 100%, 50%)) — tres formas distintas de describir exactamente el mismo color, cada una adecuada para una situación diferente.

HEX tiene una abreviatura compacta: un código de 3 dígitos como #f60 equivale exactamente al de 6 dígitos #ff6600 —cada dígito simplemente se duplica—, y una forma de 8 dígitos como #ff6600cc añade un canal alfa de la misma manera que rgba() y hsla(). Esta herramienta acepta y normaliza la abreviatura como entrada, y siempre produce la forma completa de 6 u 8 dígitos para que el resultado sea inequívoco al pegarlo en otro sitio. Una cosa que no hace: comprobar el contraste de accesibilidad de los colores o simular el daltonismo —es una cuestión de diseño aparte, igual de importante, independiente de la conversión de formato.

Dónde te lo encontrarás

• Traducir un color HEX proporcionado por un diseñador al RGB o HSL que ya usa el código
• Ajustar la luminosidad o la saturación, algo mucho más fácil de razonar en HSL que en RGB
• Leer un color de los estilos calculados de un navegador y convertirlo para que coincida con una especificación de diseño
• Comprobar cómo se renderiza realmente un valor de color CSS antes de adoptarlo

Preguntas frecuentes

¿Por qué existe HSL si RGB ya funciona?
RGB describe un color como intensidades de luz roja/verde/azul, lo cual se ajusta mal a cómo las personas piensan en el color. HSL separa el tono, la saturación y la luminosidad, de modo que "hazlo más oscuro" o "hazlo más vivo" implica cambiar un solo número en lugar de recalcular tres.

¿Qué significa el valor alfa en rgba()/hsla()?
Es la opacidad, de 0 (totalmente transparente) a 1 (totalmente opaco). Esta herramienta lo conserva entre formatos — incluso como HEX de 8 dígitos — cuando tu entrada incluye uno.

¿Se admiten colores CSS con nombre como "tomato"?
Todavía no — solo entradas HEX, RGB(A) y HSL(A). Busca primero el valor HEX del color con nombre si es tu punto de partida.

¿Es #f60 el mismo color que #ff6600?
Sí, exactamente. La abreviatura HEX de 3 dígitos duplica cada dígito para obtener la forma completa: f se convierte en ff, 6 en 66, 0 en 00. Es puramente una forma más corta de escribir ciertos colores —solo aquellos en los que cada canal resulta ser un dígito repetido—, no un espacio de color distinto ni menos preciso. Esta herramienta acepta ambas longitudes y siempre produce la forma completa de 6 u 8 dígitos.