Conversor de colores — HEX, RGB, HSL, HSV

Escribe o elige un color para ver al instante sus representaciones HEX, RGB, HSL y HSV. La conversión se calcula localmente en tu navegador — nada se envía.

¿Por qué convertir entre espacios de color?

Cada espacio de color tiene su propósito. HEX es compacto y universalmente soportado en CSS y herramientas de diseño. RGB es el espacio nativo de toda pantalla y el formato esperado por muchas APIs. HSL (tono, saturación, luminosidad) y HSV (tono, saturación, valor) están diseñados para humanos — facilitan razonar sobre cuán claro o saturado es un color, lo cual es mucho menos intuitivo en HEX o RGB.

Al diseñar una interfaz, a menudo empiezas en HSL para derivar una paleta consistente (mismo tono, luminosidad variable para los matices), y luego exportas los valores finales en HEX para el código. Este conversor te permite saltar libremente entre las cuatro representaciones sin perder precisión.

Cómo usar esta herramienta

Escribe cualquier color en el campo de entrada — HEX (#3b82f6 o #38f), rgb(), rgba(), hsl(), hsla() o hsv() son todos aceptados.
O usa el selector de color nativo a la izquierda para elegir visualmente.
Haz clic en «Aleatorio» para generar un color al azar y ver todas sus representaciones a la vez.
Copia cualquiera de los cuatro formatos de salida con el botón Copiar al lado.

Preguntas frecuentes

¿Qué formatos de entrada se reconocen?

Hexadecimal (3, 6 u 8 dígitos, prefijo # opcional), rgb()/rgba(), hsl()/hsla() con o sin signo de porcentaje, y hsv(). El canal alfa se analiza pero no se muestra en las salidas convertidas por ahora.

¿Cuál es la diferencia entre HSL y HSV?

Ambos expresan color como Tono / Saturación / algo. El tercer componente difiere: en HSL es Luminosidad (0% negro, 50% color puro, 100% blanco), en HSV es Valor (0% negro, 100% color puro). HSL es simétrico alrededor del 50%, HSV está más cerca del comportamiento de una mezcla de pintura.

¿Por qué mi color convertido se ve ligeramente diferente?

Las conversiones entre RGB redondeado a enteros y HSL/HSV redondeado en porcentaje no son perfectamente reversibles. Para la mayoría del trabajo de UI la diferencia es invisible, pero si necesitas un ida-y-vuelta exacto, trata HEX/RGB como la fuente de verdad y recalcula HSL/HSV a partir de ello.

¿Se admiten nombres de colores como 'red' o 'tomato'?

Aún no. Los nombres de colores CSS añaden ~150 mapeos fáciles de soportar — los añadiremos en una actualización futura. Mientras tanto, puedes pegar el equivalente HEX.

¿Se admite el canal alfa?

Se analiza (la entrada rgba/hsla es aceptada) pero solo se convierte la parte RGB. La conversión completa con alfa en los cuatro espacios está en la hoja de ruta.