Conversor de Colores HEX ↔ RGB ↔ HSL🌎 Actualizado mayo de 2026
El conversor de colores HEX ↔ RGB ↔ HSL te permite transformar cualquier código de color entre los tres sistemas más usados en diseño web y desarrollo de software. HEX es una representación hexadecimal de 6 dígitos (ej: #FF5733), RGB expresa cada canal —Rojo, Verde y Azul— en valores del 0 al 255, y HSL describe el color en términos de Tono (Hue, 0°–360°), Saturación (0%–100%) y Luminosidad (0%–100%). Se usa al escribir CSS, configurar paletas en Figma o Adobe, calibrar pantallas y garantizar accesibilidad visual (contraste WCAG).
Cuándo usar esta calculadora
- Diseñador web que necesita convertir el color de marca corporativa de HEX a RGB para usarlo en propiedades CSS y variables de Sass/SCSS.
- Desarrollador front-end que trabaja con Canvas o WebGL y necesita valores RGB normalizados (0.0–1.0) a partir de un código HEX provisto por el equipo de diseño.
- Diseñador UX que ajusta paletas de color en Figma o Adobe XD y necesita verificar que el tono HSL cumpla con las pautas de contraste WCAG 2.1 (ratio mínimo 4.5:1 para texto normal).
- Fotógrafo o retocador digital que necesita replicar un color exacto entre distintos programas (Lightroom usa HSL, Photoshop acepta RGB y HEX) sin pérdida de precisión.
- Estudiante de programación que aprende a manipular colores en Python, JavaScript o Processing y necesita entender la equivalencia entre los tres modelos para usar funciones como rgb() o hsl() en CSS.
- Fabricante o impresor que recibe un código HEX del cliente y necesita convertirlo a RGB para verificar reproducibilidad en pantallas sRGB antes de derivar a perfil CMYK.
Ejemplo: #FF5733
- HEX: #FF5733.
- R=255, G=87, B=51.
- HSL: H=11°, S=100%, L=60%.
- CSS:
color: #FF5733;ocolor: rgb(255, 87, 51);
Casos resueltos
Ejemplos numéricos completos con datos reales para que valides cómo funciona la calculadora.
Caso 1: Diseñador convierte color de marca #2E86AB para usar en CSS, Figma y verificar contraste WCAG
Agencia de marketing recibió el manual de marca de un cliente con el color principal #2E86AB (azul corporativo). Necesitan convertirlo a RGB y HSL para usarlo en CSS, generar variantes para hover/focus, y verificar que cumple WCAG AA con texto blanco.
- Conversión HEX → RGB:
- R = parseInt('2E', 16) = 46
- G = parseInt('86', 16) = 134
- B = parseInt('AB', 16) = 171
- Resultado: rgb(46, 134, 171)
- Conversión RGB → HSL:
- r=0,180; g=0,525; b=0,671
- max=0,671 (b); min=0,180 (r); delta=0,491
- L = (0,671 + 0,180) / 2 = 0,426 → 42,6%
- S = 0,491 / (1 − |2×0,426 − 1|) = 0,491 / 0,852 = 0,576 → 57,6%
- H = 60 × ((0,180 − 0,525) / 0,491 + 4) = 60 × 3,297 = 197,8° ≈ 198°
- Resultado: hsl(198°, 58%, 43%)
- Variantes generadas con HSL (mismo H y S, distinta L):
- Hover (más oscuro, L=33%): hsl(198°, 58%, 33%) = #1E5E78
- Disabled (más claro, L=70%): hsl(198°, 58%, 70%) = #88B9CC
- Contraste WCAG con blanco (#FFFFFF):
- Luminancia relativa #2E86AB: ~0,237
- Ratio = (1,0 + 0,05) / (0,237 + 0,05) = 3,66:1
- NO cumple WCAG AA para texto normal (requiere ≥4,5:1)
- SÍ cumple para texto grande (≥18pt) que requiere ≥3:1
Cómo funciona
6 min de lecturaCómo se calcula
Los tres sistemas representan el mismo color desde perspectivas distintas. Las conversiones son exactas (sin pérdida de información) cuando se trabaja en espacio sRGB.
HEX → RGB
Un código HEX tiene la forma #RRGGBB. Cada par de dígitos hexadecimales se convierte a decimal:
R = parseInt("RR", 16) // primeros 2 dígitos
G = parseInt("GG", 16) // dígitos 3-4
B = parseInt("BB", 16) // dígitos 5-6
Ejemplo: #FF5733
R = parseInt("FF", 16) = 255
G = parseInt("57", 16) = 87
B = parseInt("33", 16) = 51RGB → HEX
HEX = "#" + toHex(R) + toHex(G) + toHex(B)
donde toHex(n) = n.toString(16).padStart(2, "0").toUpperCase()
Ejemplo: RGB(255, 87, 51)
HEX = "#" + "FF" + "57" + "33" = "#FF5733"RGB → HSL
// Normalizar a rango [0, 1]
r = R / 255
g = G / 255
b = B / 255
max = Math.max(r, g, b)
min = Math.min(r, g, b)
delta = max - min
// Luminosidad
L = (max + min) / 2
// Saturación
if (delta === 0):
S = 0
else:
S = delta / (1 - Math.abs(2 * L - 1))
// Tono (Hue)
if (delta === 0):
H = 0
else if (max === r):
H = 60 * (((g - b) / delta) % 6)
else if (max === g):
H = 60 * (((b - r) / delta) + 2)
else:
H = 60 * (((r - g) / delta) + 4)
if (H < 0): H += 360
// Ejemplo: RGB(255, 87, 51)
r=1.000, g=0.341, b=0.200
max=1.000, min=0.200, delta=0.800
L = (1.000 + 0.200) / 2 = 0.600 → 60%
S = 0.800 / (1 - |2×0.6 - 1|) = 0.800/0.800 = 1.000 → 100%
H = 60 × ((0.341 - 0.200) / 0.800 % 6) = 60 × 0.176 ≈ 11°
Resultado: HSL(11°, 100%, 60%)HSL → RGB
C = (1 - |2L - 1|) × S // Chroma
X = C × (1 - |(H/60) mod 2 - 1|)
m = L - C/2
Según sector de H (0°–360° dividido en 6 sectores de 60°):
H ∈ [0°,60°) → (R',G',B') = (C, X, 0)
H ∈ [60°,120°)→ (R',G',B') = (X, C, 0)
H ∈ [120°,180°)→(R',G',B') = (0, C, X)
H ∈ [180°,240°)→(R',G',B') = (0, X, C)
H ∈ [240°,300°)→(R',G',B') = (X, 0, C)
H ∈ [300°,360°)→(R',G',B') = (C, 0, X)
R = (R' + m) × 255
G = (G' + m) × 255
B = (B' + m) × 255---
Tabla de referencia
Colores web estándar con sus tres representaciones equivalentes:
| Color | HEX | RGB | HSL | CSS name |
|---|---|---|---|---|
| Rojo puro | #FF0000 | rgb(255, 0, 0) | hsl(0°, 100%, 50%) | red |
| Verde lima | #00FF00 | rgb(0, 255, 0) | hsl(120°, 100%, 50%) | lime |
| Azul puro | #0000FF | rgb(0, 0, 255) | hsl(240°, 100%, 50%) | blue |
| Blanco | #FFFFFF | rgb(255,255,255) | hsl(0°, 0%, 100%) | white |
| Negro | #000000 | rgb(0, 0, 0) | hsl(0°, 0%, 0%) | black |
| Naranja-rojo | #FF5733 | rgb(255, 87, 51) | hsl(11°, 100%, 60%) | — |
| Amarillo | #FFFF00 | rgb(255,255, 0) | hsl(60°, 100%, 50%) | yellow |
| Cian | #00FFFF | rgb(0, 255,255) | hsl(180°, 100%, 50%) | cyan/aqua |
| Magenta | #FF00FF | rgb(255, 0,255) | hsl(300°, 100%, 50%) | magenta/fuchsia |
| Gris medio | #808080 | rgb(128,128,128) | hsl(0°, 0%, 50%) | gray |
| Azul marino | #003087 | rgb(0, 48,135) | hsl(216°, 100%, 26%) | — |
| Verde esmeralda | #50C878 | rgb(80,200,120) | hsl(140°, 52%, 55%) | — |
---
Casos típicos
Caso 1 — Color de marca a CSS completo
Una agencia recibe el color corporativo de su cliente como
#1A73E8 (el azul de Google). Necesita usarlo en CSS con ambas notaciones:HEX: #1A73E8
RGB: R=parseInt("1A",16)=26, G=parseInt("73",16)=115, B=parseInt("E8",16)=232
→ rgb(26, 115, 232)
HSL: r=0.102, g=0.451, b=0.910
max=0.910 (b), min=0.102, delta=0.808
L=(0.910+0.102)/2 = 0.506 → 50.6%
S=0.808/(1-|2×0.506-1|) = 0.808/0.988 ≈ 0.818 → 81.8%
H=60×((0.102-0.451)/0.808+4) = 60×(3.568) ≈ 214°
→ hsl(214°, 82%, 51%)
CSS: color: #1A73E8; ó color: rgb(26, 115, 232); ó color: hsl(214, 82%, 51%);Caso 2 — Ajuste de luminosidad en HSL
Un diseñador tiene
hsl(214°, 82%, 51%) y necesita una versión más clara (fondo de tarjeta) y una más oscura (hover). Solo modifica L:Versión clara (fondo): hsl(214°, 82%, 90%) → #C5DCFA
Versión original: hsl(214°, 82%, 51%) → #1A73E8
Versión oscura (hover): hsl(214°, 82%, 35%) → #104D9EHSL es el único modelo donde esto se hace cambiando un solo parámetro sin recalcular nada.
Caso 3 — Verificación de contraste WCAG
El estándar WCAG 2.1 exige contraste mínimo 4.5:1 entre texto y fondo. La luminancia relativa se calcula a partir de los valores RGB linealizados:
Para #FF5733 (RGB 255,87,51):
R_lin = (255/255)^2.2 = 1.000
G_lin = (87/255)^2.2 ≈ 0.098
B_lin = (51/255)^2.2 ≈ 0.031
L_rel = 0.2126×R + 0.7152×G + 0.0722×B
L_rel = 0.2126×1 + 0.7152×0.098 + 0.0722×0.031 ≈ 0.284
Contraste con blanco (#FFF, L=1.0):
Ratio = (1.0 + 0.05) / (0.284 + 0.05) = 3.14:1 → NO pasa WCAG AA para texto normal
Contraste con negro (#000, L=0.0):
Ratio = (0.284 + 0.05) / (0.0 + 0.05) = 6.68:1 → SÍ pasa WCAG AA ✓---
Errores comunes
1. Confundir HEX corto con HEX largo: #F53 es válido en CSS y equivale a #FF5533, NO a #F05030. Cada dígito se duplica: #RGB → #RRGGBB.
2. Olvidar el signo # en CSS: color: FF5733 es inválido. El navegador lo ignora silenciosamente. Siempre escribir color: #FF5733.
3. Usar HSL con H fuera de rango: Si el cálculo da H negativo (ej: −10°), hay que sumar 360°. H=−10° y H=350° son el mismo color (violeta-rojo), pero solo 350° es válido en CSS hsl().
4. Asumir que RGB(128,128,128) es 50% luminosidad perceptual: No lo es. El ojo humano percibe el verde como mucho más brillante que el rojo o azul. La luminancia relativa de gris medio es 0.216, no 0.5. Para diseño accesible hay que usar la fórmula WCAG, no el promedio simple.
5. Mezclar espacios de color: RGB en sRGB ≠ RGB en Display P3 o AdobeRGB. Un #FF0000 en sRGB se ve diferente en un monitor con gamut extendido si no se gestiona el perfil de color. Los navegadores modernos (Chrome 112+) soportan color(display-p3 1 0 0) como alternativa.
6. Redondear mal en HSL→RGB: Si S=0 (color acromático), H es indefinido y debe tratarse como 0°. No aplicar la fórmula general sin verificar este caso especial, ya que puede dar NaN o resultados incorrectos.
---
Calculadoras relacionadas
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL? ¿Cuándo conviene usar cada uno?
Los tres representan exactamente el mismo color en pantalla sRGB, pero desde ángulos distintos. HEX es el formato estándar en HTML/CSS por su compacidad (#FF5733). RGB es ideal cuando se trabaja con código (canvas, WebGL, Python Pillow) porque los valores numéricos son fácilmente manipulables. HSL es el preferido para diseño porque permite ajustar brillo o saturación cambiando un solo valor sin afectar el tono: hsl(214°, 82%, 50%) se oscurece simplemente bajando el tercer parámetro a 30%.
¿Por qué el valor de Hue en HSL va de 0° a 360°? ¿Qué representa cada sector?
El Hue representa la posición en la rueda de color, que es circular (por eso los grados). Los sectores principales son: 0°=rojo, 60°=amarillo, 120°=verde, 180°=cian, 240°=azul, 300°=magenta, y 360°=rojo nuevamente (idéntico a 0°). Esta disposición sigue el modelo de color de Munsell y es adoptada por CSS Color Level 4. Por eso colores complementarios siempre están a 180° de distancia: azul (240°) y naranja (60°).
¿Los colores HEX distinguen mayúsculas de minúsculas? ¿#ff5733 es igual a #FF5733?
Sí, son exactamente iguales. El estándar hexadecimal no distingue mayúsculas (case-insensitive). Los navegadores aceptan #ff5733, #FF5733 y #Ff5733 como el mismo color. Sin embargo, la convención en CSS y herramientas de diseño es usar mayúsculas para mejor legibilidad. Algunos linters y formateadores como Prettier convierten automáticamente a minúsculas según configuración del proyecto.
¿Qué es el canal alfa y cómo se agrega a HEX y RGB?
El canal alfa representa la opacidad del color (0=transparente, 1=opaco). En CSS moderno se puede incluir directamente: en HEX se agrega un par hexadecimal extra → #FF573380 (80 hex = 50% opacidad). En RGB se usa la función rgba(255, 87, 51, 0.5) o la notación moderna rgb(255 87 51 / 50%). En HSL: hsla(11°, 100%, 60%, 0.5). El soporte para HEX de 8 dígitos está disponible en todos los navegadores modernos desde 2017.
¿Por qué a veces el color que veo en pantalla no coincide con el que imprime la impresora?
Porque las pantallas usan el modelo aditivo RGB (mezcla de luz) y las impresoras el modelo sustractivo CMYK (mezcla de tintas). No existe una conversión matemática directa perfecta entre ambos, ya que el gamut (rango de colores reproducibles) de cada medio es distinto. Por ejemplo, el naranja vibrante #FF5733 no tiene equivalente exacto en CMYK estándar. Para impresión profesional se requiere un perfil ICC y software como Adobe InDesign o GIMP con gestión de color habilitada.
¿Cuántos colores distintos se pueden representar con HEX de 6 dígitos?
Exactamente 16.777.216 colores (256³ = 256×256×256), ya que cada canal (R, G, B) tiene 256 valores posibles (de 00 a FF en hexadecimal, es decir de 0 a 255 en decimal). Esto se denomina color de 24 bits o "True Color". En HEX corto de 3 dígitos (#RGB) solo se pueden representar 4.096 colores (16³), que son un subconjunto exacto de los 24 bits donde cada canal tiene el mismo dígito repetido.
¿Qué es el contraste WCAG y cómo se calcula a partir de los valores RGB?
WCAG (Web Content Accessibility Guidelines) define el ratio de contraste entre dos colores para garantizar legibilidad. La fórmula es: ratio = (L1 + 0.05) / (L2 + 0.05) donde L1 es la luminancia relativa del color más claro. La luminancia se calcula linealizando cada canal RGB: si el valor normalizado (0–1) es ≤0.04045, se divide por 12.92; si no, ((valor+0.055)/1.055)^2.4. Luego L = 0.2126×R + 0.7152×G + 0.0722×B. WCAG AA exige ratio ≥4.5:1 para texto normal y ≥3:1 para texto grande (18pt+).
¿Cómo se convierte un HEX de 3 dígitos como #F53 al formato completo de 6 dígitos?
Cada dígito se duplica: #RGB → #RRGGBB. Entonces #F53 → #FF5533. Esto NO es lo mismo que agregar un cero: #F53 ≠ #F05030. Es una convención CSS que existe desde HTML 3.2 para ahorrar caracteres. Los 4.096 colores representables en formato corto son exactamente aquellos en los que R, G y B tienen el mismo dígito hexadecimal repetido (ej: 00, 11, 22, ..., FF). La herramienta realiza esta expansión automáticamente antes de procesar la conversión.
¿Qué es Display P3 y por qué algunos diseñadores ya no usan solo sRGB?
Display P3 es un espacio de color con gamut 25% más amplio que sRGB, desarrollado por DCI (cine digital) y adoptado por Apple desde 2015 (iMac, iPhone, iPad, MacBook Pro). Pantallas modernas pueden mostrar rojos, verdes y naranjas que sRGB no puede representar. En CSS Color Level 4 se usa: color(display-p3 1 0.4 0.2). Chrome, Safari y Firefox modernos soportan ambos. Consideraciones: si tu marca usa colores muy saturados, vale la pena diseñar en P3 con fallback a sRGB; si tu audiencia es masiva (web general), sRGB sigue siendo el estándar seguro porque garantiza la misma apariencia en TODO dispositivo.
¿Existen herramientas para generar paletas de color completas a partir de un único color?
Sí, varias gratuitas: Coolors.co (genera paletas armónicas a partir de un color base, exporta CSS/SCSS/JSON). Adobe Color (basado en teoría de color clásica: complementarios, análogos, tríada). Paletton (clásico, online). Tailwind Shades (genera variantes 50-900 al estilo Tailwind para sistemas de diseño). uiGradients (gradientes preconstruidos). Colormind (IA que sugiere paletas). Para sistemas de diseño profesionales: Tailwind Color Generator + Radix Colors (con escalas perceptualmente uniformes diseñadas para UIs accesibles).
¿Cómo determinar si dos colores 'combinan' bien matemáticamente?
Reglas basadas en teoría de color y rueda HSL: (1) Complementarios (alto contraste, vibrante): H opuestos en 180°. Ej: H=20° (rojo) + H=200° (cian). (2) Análogos (suaves, armónicos): H adyacentes en ±30°. Ej: H=200°, 230°, 260° (azules). (3) Triádicos (dinámicos): 3 colores a 120° entre sí. (4) Tétrádicos (4 colores en cuadrado): a 90° entre sí. (5) Split-complementarios: 1 color + los 2 vecinos del complementario. Para UIs profesionales, también validar contraste WCAG (mínimo 4.5:1 texto/fondo) y harmonía perceptual usando espacios de color como OKLCH (CSS Color Level 4).
Fuentes y referencias
Metodología y confianza
Contenido revisado por el equipo editorial de Hacé Cuentas, con apego a nuestra política editorial y metodología de cálculo.
Última revisión: 27 de mayo de 2026. Los parámetros fiscales, legales y datos se verifican periódicamente con las fuentes citadas.
Los cálculos corren 100% en tu navegador. No guardamos ni transmitimos tus datos. Leé nuestra política de privacidad.
Resultados orientativos. Para decisiones financieras, médicas o legales críticas, consultá con un profesional.