Conversor de colores

PorOleh Soloninactualizado el 25 de septiembre de 2026

Resultado

#2C2A3A es rgb(44, 42, 58) y hsl(248, 16%, 20%).

HEX

#2C2A3A

RGB

rgb(44, 42, 58)

HSL

hsl(248, 16%, 20%)

Luminancia relativa

0,025 — la luminosidad de HSL, en cambio, es del 20 %

Contraste según las WCAG

con blanco 14,01 a 1 (AAA), con negro 1,5 a 1 (insuficiente)

Cómo sale la luminancia

#2C2A3A se descompone en tres canales: 2C = 44, 2A = 42, 3A = 58. Para la luminancia, cada canal se lleva a la escala de 0 a 1, se deshace la curva gamma y después se ponderan los tres: 0,2126 · rojo + 0,7152 · verde + 0,0722 · azul = 0,025. El verde pesa más del triple que el rojo y casi diez veces más que el azul: por eso un azul puro parece tan oscuro aunque su canal esté al máximo.

El resultado es orientativo y no sustituye a una asesoría profesional.

Pasar entre HEX, RGB y HSL — con el contraste según las WCAG.

HEX y RGB describen el mismo color de dos maneras: #2C2A3A es rgb(44, 42, 58), porque 2C en hexadecimal son 44 en decimal. HSL lo describe de otro modo, mediante tono, saturación y luminosidad.

Para trabajar suele ser más cómodo HSL. Aclarar un color allí es subir un número; en RGB habría que mover los tres canales a la vez y de forma desigual.

Cómo usar la calculadora

Escriba el color en cualquiera de las tres notaciones: HEX, rgb() o hsl().
Lea las otras dos: la conversión no pierde nada, es el mismo color.
Compruebe el contraste con blanco y con negro antes de usar el color para texto.

Por qué la luminosidad de HSL engaña

Las cuatro primeras filas de la tabla tienen en HSL la misma luminosidad: el 50 por ciento. En realidad se diferencian en un factor de trece: el amarillo es casi blanco y el azul casi negro. HSL describe cómo está mezclado un color, no cuánta luz aporta.

La razón está en los pesos: el verde entra en la luminancia con 0,7152, el rojo con 0,2126 y el azul solo con 0,0722. El ojo tiene muchos más receptores para el verde y muy pocos para el azul. Por eso un texto sobre amarillo necesita una letra muy oscura y sobre azul, una muy clara.

Todas las filas salen de la calculadora de esta página. La última es la prueba en sentido contrario: un gris con menos luminosidad HSL que los cuatro colores de arriba tiene una luminancia que cae entre el rojo y el azul, y pasa el umbral AA de 4,5 a 1 para texto corrido sobre blanco, que el rojo no alcanza. El azul también lo pasa, y con 8,59 a 1 supera incluso el AAA de 7 a 1.
Color	Luminosidad HSL	Luminancia relativa	Contraste con blanco
#FF0000 rojo	50 %	0,2126	4,00 a 1
#00FF00 verde	50 %	0,7152	1,37 a 1
#0000FF azul	50 %	0,0722	8,59 a 1
#FFFF00 amarillo	50 %	0,9278	1,07 a 1
#767676 gris	46 %	0,1812	4,54 a 1

Para qué sirve cada notación

HEX, rgb() y hsl() describen el mismo espacio y se convierten entre sí sin pérdida, con una salvedad: el redondeo a porcentajes enteros en HSL puede mover los canales unas pocas unidades al volver.

Lo que cambia es para qué sirven. Para hacer variaciones de un mismo color, HSL es la única notación manejable: se cambian saturación y luminosidad y se conserva el tono. En HEX habría que mover tres números a la vez sin saber de antemano qué sale.

La calculadora admite como entrada todas menos la segunda. La forma corta solo tiene 4.096 colores posibles en lugar de 16,7 millones, y por eso #ABC rara vez coincide con el valor exacto que da un programa de imagen.
Notación	Ejemplo	Para qué va bien
HEX	#2C2A3A	valores fijos en CSS, corto y fácil de copiar
HEX con alfa	#2C2A3ACC	el mismo color con un 80 % de opacidad
Forma corta	#ABC	equivale a #AABBCC: cada carácter se duplica
rgb()	rgb(44, 42, 58)	cálculos por canal, salida de los programas de imagen
hsl()	hsl(248, 16%, 20%)	gamas de un color, temas claro y oscuro

El contraste no es cuestión de gusto

Las WCAG exigen para el texto normal una relación de contraste de al menos 4,5 a 1 con el fondo, y de 3 a 1 para el texto grande. El nivel más alto, AAA, pide 7 a 1 y 4,5 a 1 respectivamente.

El cálculo no usa el brillo percibido, sino la luminancia relativa: los canales se ponderan porque el ojo capta mucho más el verde que el azul. Por eso un amarillo intenso casi no contrasta con el blanco, aunque parezca fuerte.

Dónde se separan los espacios de color

HSL es una simple reescritura de RGB y no describe una gama distinta. Lo que una pantalla no puede mostrar tampoco existe en HSL: la conversión es exacta y sin pérdida en los dos sentidos.

Con CMYK para imprenta es otra cosa: hay colores que una pantalla muestra y una máquina de imprimir no, y al revés. Convertir sin un perfil de color sería adivinar, y por eso aquí no está.

Fuentes

Cifras vigentes en 2026. Los resultados son orientativos y no sustituyen el asesoramiento profesional.

Preguntas frecuentes

¿Qué significa la forma corta de tres caracteres?

#abc es la abreviatura de #aabbcc: cada carácter se duplica. Con ella solo se pueden escribir 4 096 colores en lugar de los 16,7 millones de la forma larga, así que aparece sobre todo en bocetos rápidos.

¿Por qué la luminosidad de HSL no coincide con lo que veo?

Porque el valor L de HSL es simplemente la media entre el canal más claro y el más oscuro. Un amarillo puro y un azul puro tienen los dos L igual al 50 por ciento y se ven completamente distintos: de eso se ocupa la luminancia relativa.

¿Por qué son tan distintas la luminosidad HSL y la luminancia relativa?

Porque responden a preguntas distintas. La luminosidad HSL dice cuánto blanco o negro hay en la mezcla, y por eso el rojo, el verde y el azul puros están los tres en el 50 por ciento. La luminancia relativa dice cuánta luz llega al ojo, y pondera los canales según la sensibilidad de la retina.

¿La conversión pierde información?

Entre HEX y rgb() no: son los mismos tres números escritos de otra forma. En hsl(), la calculadora redondea saturación y luminosidad a porcentajes enteros, como es habitual en CSS, y al volver los canales pueden moverse unas pocas unidades: #0041FC pasa a hsl(225, 100%, 49%) y vuelve como #003EFA, con el verde de 65 a 62. Si hace falta el color exacto, guarda el HEX.

¿Qué significan ocho cifras en vez de seis?

Las dos últimas son la opacidad: 00 invisible, FF totalmente opaco, CC alrededor del 80 por ciento. Cualquier navegador actual lo entiende. Esta calculadora no lo admite porque calcula contrastes, y el contraste de un color semitransparente depende de lo que haya debajo.

¿Por qué el mismo color se ve distinto en dos pantallas?

Porque un valor hexadecimal no nombra un color: da una instrucción a la pantalla. CSS define el HEX en sRGB, y el navegador lo convierte al espacio de cada pantalla. El resultado depende de la calibración, de la gestión del color y de la luz del entorno, así que el mismo valor puede verse distinto en dos equipos; para imprenta hacen falta otros datos.

Enlaces útiles

Desarrollo y web Todas las calculadoras

Conversor de colores

Resultado

También te puede servir

Contraste de color según WCAG

Generador de degradados CSS

Convertir binario y texto

Calculadora de subredes

Inspector de caracteres Unicode

Calculadora de cron

Enlaces útiles