Convertidor de colores

Tres formas de escribir el mismo color

Las pantallas forman todos los colores mezclando luz roja, verde y azul, y HEX, RGB y HSL no son más que tres notaciones para las mismas 16,7 millones de combinaciones del espacio de color sRGB. Cuál necesitas depende de adónde va el valor.

• HEX, como #2563eb: tres pares de dígitos hexadecimales para rojo, verde y azul, cada uno de 00 a ff (de 0 a 255). Compacto y fácil de copiar, es el formato por defecto en las herramientas de diseño, los manuales de marca y la mayor parte del CSS.
• RGB, como rgb(37, 99, 235): los mismos tres canales en decimal. Útil cuando el código trabaja directamente con números, como al dibujar en canvas, en el procesamiento de imágenes, en los recursos de color de Android o en Pillow de Python.
• HSL, como hsl(221, 83%, 53%): tono, saturación y luminosidad. El único de los tres que una persona puede ajustar razonando sobre él, y por eso es el favorito para crear paletas y temas.

La forma HEX corta #36f es una abreviatura de #3366ff, en la que cada dígito se duplica. Solo funciona cuando los dos dígitos de cada par son iguales.

Cómo leer los valores HSL

HSL describe un color como lo describiría una persona:

• El tono es la posición en la rueda de color en grados: 0 es rojo, 60 amarillo, 120 verde, 180 cian, 240 azul, 300 magenta, y 360 vuelve al rojo.
• La saturación va del 0%, un gris neutro, al 100%, la versión más viva de ese tono.
• La luminosidad va del 0%, siempre negro, pasando por el 50%, el color puro, al 100%, siempre blanco.

Esto es lo que hace práctico a HSL en los sistemas de diseño. Mantén fijos el tono y la saturación, recorre la luminosidad del 95% al 15% y obtendrás una escala de claros a oscuros para botones, fondos y bordes. Gira el tono 180 grados para un acento complementario, o 30 grados hacia un lado u otro para colores análogos.

Una limitación: la luminosidad de HSL es una media matemática, no lo brillante que parece un color. Un amarillo al 50% de luminosidad parece mucho más claro que un azul al 50%, así que colores con la misma L pueden tener un contraste muy distinto con texto blanco. Comprueba siempre el contraste con la pareja real.

Qué acepta este conversor

Pega o escribe en el campo, o elige con la muestra de color, y las filas HEX, RGB y HSL se actualizan a la vez junto con una vista previa grande. Entradas aceptadas:

• #rgb, #rgba, #rrggbb y #rrggbbaa, con o sin #.
• Los 148 nombres de color CSS, como tomato o rebeccapurple.
• rgb(37, 99, 235) y rgba(37, 99, 235, 0.5), o la sintaxis moderna separada por espacios rgb(37 99 235 / 50%). Los canales pueden ser decimales o porcentajes.
• hsl(221, 83%, 53%), hsla(…) y hsl(221.5 83% 53%). El tono puede llevar deg, turn, rad o grad; los signos de porcentaje son opcionales.
• Tres números sueltos: 37, 99, 235 o 37 99 235.

Los valores fuera de rango se recortan: rgb(300, 0, 0) se convierte en 255 de rojo. Un tono de 360 o más, o uno negativo, da la vuelta a la rueda. Los canales decimales se redondean a números enteros.

El canal alfa, ya sea en HEX de 4 u 8 dígitos, en rgba(), en hsla() o después de una /, se lee pero se ignora, así que los resultados son siempre totalmente opacos.

Los controles deslizantes R, G y B bajo los resultados cambian un canal cada vez. Sirven para empujar un color un poco hacia lo cálido o lo frío mientras ves cómo se actualizan la vista previa y las tres notaciones.

Por qué los valores cambian en uno al convertir de vuelta

Las conversiones entre HSL y RGB implican fracciones, y aquí cada resultado se redondea a números enteros, como se suele escribir en CSS. HSL tiene menos combinaciones de enteros que RGB, unos 3,6 millones frente a 16,7 millones, así que varios colores RGB comparten un mismo valor HSL redondeado.

Por ejemplo, #2563eb se convierte en hsl(221, 83%, 53%), pero si vuelves a escribir ese HSL obtienes #2463eb: el rojo es 36 en lugar de 37. La diferencia es invisible a simple vista, pero importa si un manual de marca especifica un valor HEX exacto. Toma el valor HEX o RGB como fuente de verdad y usa HSL para explorar variaciones, no para guardar colores oficiales.

Cómo usar los resultados

• En CSS, las tres cadenas de salida se pueden pegar tal cual. Las propiedades personalizadas como --brand: #2563eb; son la forma más limpia de reutilizarlas.
• Para el icono de un sitio, fija aquí primero el color de marca, aplícalo al logotipo en tu herramienta de diseño y luego convierte el logotipo en un juego completo de iconos con el generador de favicon.
• Para un código QR con los colores de tu marca, mantén un contraste fuerte: un primer plano oscuro, en torno al 20–30% de luminosidad, sobre blanco se escanea sin problemas, mientras que los colores claros o poco saturados a menudo fallan. El generador de códigos QR te permite probarlo.
• El color impreso es otra historia. Las pantallas usan RGB, las impresoras CMYK, y un azul intenso de pantalla puede no ser reproducible con tinta. Pide una prueba a la imprenta cuando el color exacto importe.

Toda la conversión ocurre en tu navegador.