Convertidor de color

El Convertidor de color es una herramienta gratuita que convierte un color indicado en formato HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA a varios formatos de color equivalentes.

¿Qué formatos de color puedo convertir?

Puedes introducir un valor en formato HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA y consultar su equivalencia en cada uno de los formatos compatibles. Resulta útil cuando una especificación de diseño, una hoja de estilos o una API de terceros representa el mismo color de otra forma.

• HEX representa los canales rojo, verde y azul mediante pares hexadecimales, normalmente con la forma #RRGGBB.
• HEX Alfa añade un canal de opacidad. En la notación CSS moderna suele aparecer como #RRGGBBAA.
• RGB utiliza valores para los canales rojo, verde y azul, habitualmente comprendidos entre 0 y 255.
• RGBA añade transparencia alfa a RGB.
• HSV describe el tono, la saturación y el valor. Es habitual en los selectores de color, pero no es una función de color estándar de CSS.
• HSL describe el tono, la saturación y la luminosidad. CSS admite HSL directamente.
• HSLA es HSL con un valor alfa.

RGB y HSL son descripciones matemáticas distintas de un color, no colores diferentes. La conversión permite cambiar su representación y conservar el color deseado con la máxima fidelidad que admita el formato de destino.

¿Cómo se usa el convertidor de color?

Introduce un valor de color completo en el campo Color con uno de los formatos admitidos. Después, consulta o copia los valores generados en los campos de salida.

1. Copia el valor de origen exactamente, incluidos la almohadilla inicial, las comas, los paréntesis, los signos de porcentaje o el componente alfa, según corresponda.
2. Pégalo en el campo Color.
3. Consulta los valores equivalentes que aparecen en HEX, HEX Alfa, RGB, RGBA, HSV, HSL y HSLA.
4. Elige uno de los formatos de color compatibles que acepte el sistema de destino. Para una regla CSS, las opciones habituales son HEX, RGB, RGBA, HSL y HSLA. HSV se utiliza con mayor frecuencia en interfaces de edición y cálculos de color.

La conversión se ejecuta en el servidor. El valor introducido se envía al servidor mediante HTTPS y no se almacena. Aunque un color aislado rara vez contiene información sensible, valora si una paleta aún no publicada o un conjunto de tokens de diseño son confidenciales antes de enviarlos a cualquier servicio en línea.

Los espacios y los signos de puntuación forman parte de la sintaxis de RGB, HSL y otros formatos relacionados, mientras que los signos de porcentaje distinguen los valores porcentuales. Un número aislado, un valor vacío o un texto cualquiera no identifican un color. Los textos con caracteres acentuados o no latinos tampoco tienen un significado definido en estos formatos numéricos.

¿Cómo se interpretan los valores convertidos?

Interpreta cada resultado como otra notación del mismo color y presta especial atención a los rangos de los canales, los porcentajes y la transparencia alfa. El campo que debes copiar depende de la notación de color admitida por el sistema receptor.

En un valor HEX de seis dígitos, el primer par representa el rojo, el segundo el verde y el tercero el azul. Por ejemplo, #336699 contiene los valores hexadecimales de canal 33, 66 y 99, que corresponden a los valores RGB decimales 51, 102 y 153.

El tono suele expresarse como un ángulo dentro de una rueda cromática. La saturación y la luminosidad o el valor suelen expresarse como porcentajes. La luminosidad de HSL y el valor de HSV se calculan de manera diferente, por lo que no debes comparar sus porcentajes como si midieran la misma propiedad.

El canal alfa describe la opacidad. Un color totalmente opaco no necesita un formato que admita alfa, pero uno semitransparente sí. Si copias un color RGBA o HSLA en un formato RGB, HSL o HEX de seis dígitos, la notación de destino no tendrá dónde guardar el canal alfa.

Este convertidor no está documentado como un validador de sintaxis con mensajes de diagnóstico detallados. No confíes en él para identificar el carácter exacto de una entrada mal formada. Algunos errores habituales de sintaxis de color son omitir la almohadilla en HEX, usar paréntesis sin pareja, olvidar signos de porcentaje, usar un valor alfa fuera del intervalo esperado o mezclar las convenciones de los canales HSL y RGB.

Ejemplos de conversión de colores

Un ejemplo sencillo muestra la relación entre HEX, RGB, HSL y HSV. El rojo puro puede expresarse mediante las siguientes formas equivalentes.

• Entrada HEX #ff0000
• Equivalente RGB rgb(255, 0, 0)
• Equivalente HSL hsl(0, 100%, 50%)
• Equivalente HSV hsv(0, 100%, 100%)

En el caso de un color menos saturado, #336699 equivale a rgb(51, 102, 153). Su representación HSL es hsl(210, 50%, 40%), mientras que en HSV tiene un tono de 210 grados, una saturación aproximada del 66,7% y un valor del 60%. Una interfaz puede redondear los valores decimales o variar los espacios sin cambiar su significado práctico.

La transparencia ofrece otro ejemplo sencillo. rgba(255, 0, 0, 0.5) y hsla(0, 100%, 50%, 0.5) describen un rojo con la mitad de opacidad. Según la convención habitual de CSS para HEX de ocho dígitos, el valor correspondiente es #ff000080, donde 80 es el byte alfa cuantizado.

¿Cuándo merece la pena convertir un color?

Conviene convertir un color cuando la aplicación receptora exige otra notación o cuando una representación diferente facilita la depuración. Algunos casos habituales son trasladar un valor de Figma a una propiedad personalizada de CSS, comprobar un valor RGBA encontrado en Chrome DevTools, preparar campos de color para la carga útil de una API o revisar los datos de un tema de terceros antes de desplegarlo.

Normalmente no hace falta convertir un color si el destino ya admite la notación existente. Cambiar un valor HEX de seis dígitos a RGB solo para usarlo como CSS procesable por máquinas aporta poco, y las conversiones sucesivas pueden introducir redondeos en los valores HSL o HSV. Del mismo modo, no añadas un canal alfa si sabes que todos los colores son completamente opacos.

Si necesitas elegir un color visualmente en lugar de convertir un valor conocido, el Selector de color es la herramienta más directa. La conversión tampoco sustituye las pruebas de contraste, la simulación del daltonismo ni la gestión de perfiles de color. Que dos valores numéricos sean equivalentes no demuestra que el texto en primer plano cumpla los requisitos de contraste de WCAG.

Preguntas frecuentes

¿El convertidor admite nombres de colores de CSS?

No. Los formatos de entrada admitidos que se indican son HEX, HEX alpha, RGB, RGBA, HSV, HSL y HSLA, por lo que nombres como red, rebeccapurple o transparent no figuran como compatibles. Convierte primero el nombre del color en un valor numérico de CSS antes de introducirlo.

¿Puedo introducir valores HEX de tres dígitos?

No se especifican las longitudes HEX compatibles, aunque HEX figura entre los formatos de entrada admitidos. Para obtener resultados predecibles, amplía las formas abreviadas, por ejemplo, de #369 a #336699. Aplica el mismo criterio a las formas abreviadas de cuatro dígitos que contienen alfa.

¿Puedo pegar una declaración CSS completa en vez de un valor de color?

No. Introduce únicamente el valor del color, no la declaración completa. Por ejemplo, usa #336699 en lugar de color: #336699;, ya que el nombre de la propiedad y el punto y coma no forman parte del color. Si copias un valor desde JSON o desde un archivo de configuración, elimina las comillas que lo rodean.

¿El resultado conserva la información de gama amplia o del perfil de color?

No se indica que admita formatos de gama amplia ni perfiles de color incrustados. Display P3, Lab, LCH y los datos de perfiles ICC contienen información que los campos HEX, RGB, HSL y HSV disponibles no pueden expresar. Utiliza una aplicación con gestión del color cuando necesites una conversión que tenga en cuenta los perfiles.

¿Por qué algunos valores convertidos incluyen decimales?

Los cálculos HSL y HSV pueden producir porcentajes fraccionarios aunque los canales RGB de origen sean números enteros. Redondear esas cifras puede modificar ligeramente una conversión posterior a RGB. Conserva la precisión disponible al guardar tokens de diseño y redondea solo si lo exige el formato de destino o el estándar de programación.