Convertidor de Colores HEX, RGB y HSL
Convierte cualquier color CSS entre HEX, RGB y HSL con vista previa.
100% en tu navegador — no se sube nadaConvertir HEX a RGB y HSL
Sobre este convertidor de colores
Escribe o pega un color en cualquier formato CSS común: hex de 3, 4, 6 u 8 dígitos, rgb() / rgba(), hsl() / hsla(), o un nombre CSS como tomato. Al instante verás todos los equivalentes — HEX, RGB y HSL, más rgba(), hsla() y hex de 8 dígitos cuando el color tiene transparencia — junto con una muestra grande del color y un selector nativo que se mantienen sincronizados con lo que escribas.
Es ideal para el día a día del desarrollo web: el diseñador te pasa un rgba(), tu hoja de estilos usa hex y tus variables de diseño quieren HSL para ajustar la luminosidad sin cambiar el tono. Toda la conversión ocurre localmente en tu navegador con fórmulas exactas de RGB a HSL y viceversa: no hay servidor de por medio, no se registra nada y no necesitas cuenta.
Por qué aquí no hay CMYK ni Pantone
CMYK no es una fórmula que puedas calcular desde un color de pantalla. Un número CMYK solo significa algo junto a un perfil ICC: una tabla medida sobre una impresora, una tinta y un papel concretos. La propia MDN lo dice de device-cmyk() en CSS: es "device dependent" y, sin conocer la colorimetría exacta de salida, el resultado "es probable que sea diferente al resultado impreso". Mismo C/M/Y/K, otra prensa u otro papel, otro color. Por eso un CMYK genérico sacado del sRGB sería una adivinanza disfrazada de dato.
Pantone es aún menos convertible: es un sistema propietario y licenciado de tintas planas físicas, mezcladas según una fórmula reservada y comparadas contra una guía impresa (la Formula Guide), no algo a lo que un valor RGB "corresponda" por aritmética. Si tu trabajo va a imprenta, sáltate la conversión en pantalla. Usa la exportación con gestión de color de tu programa: asigna el perfil ICC de la imprenta en Illustrator, InDesign o Affinity y deja que él convierta, o pídele a tu imprenta el perfil que usan. Ese camino está medido contra una prensa real; un número escrito aquí nunca podría estarlo.
Convierte #0b7a55 a RGB y HSL a mano
La cuenta es sencilla y se puede hacer en papel. Toma el verde de acento del sitio, #0b7a55, y separa el hex en rojo, verde y azul.
- Separa los seis dígitos en tres pares: 0b, 7a, 55.
- Lee cada par en base 16: 0b = 0×16 + 11 = 11, 7a = 7×16 + 10 = 122, 55 = 5×16 + 5 = 85. Queda rgb(11, 122, 85).
- Lleva cada canal a 0–1 para HSL: R = 11/255 = 0.043, G = 122/255 = 0.478, B = 85/255 = 0.333.
Ahora toma el canal más alto (verde, 0.478) y el más bajo (rojo, 0.043). Su diferencia, 0.435, es la que gobierna la saturación y el tono.
| Parte de HSL | Fórmula (máx = G, mín = R) | Resultado |
|---|---|---|
| Luminosidad | (0.478 + 0.043) / 2 | 0.261 → 26% |
| Saturación | (0.478 − 0.043) / (0.478 + 0.043) | 0.835 → 83% |
| Tono | 60 × ((0.333 − 0.043) / 0.435 + 2) | 160° |
El resultado es hsl(160, 83%, 26%). La fórmula simple de saturación de arriba vale mientras la luminosidad esté por debajo de 50%; el tono usa el desfase +2 porque el verde es el canal más alto. Según MDN, en HSL el tono va de 0 a 360°, y saturación y luminosidad son porcentajes donde 50% de luminosidad es el valor "normal". La herramienta hace todo esto al instante, pero la aritmética es estándar y vale la pena verla una vez.
Tablas de referencia
Preguntas frecuentes
¿Cómo convierto un color HEX a RGB?
Un color hex es rojo, verde y azul escritos en base 16: #0b7a55 significa rojo 0b (11), verde 7a (122) y azul 55 (85), es decir rgb(11, 122, 85). Pega cualquiera de los dos formatos y la herramienta convierte en ambas direcciones al instante.
¿Qué es HSL y cuándo conviene usarlo?
HSL describe un color por tono (0–360°), saturación y luminosidad. Es mucho más intuitivo para crear variaciones: aclara u oscurece un color moviendo solo la luminosidad, sin alterar el tono. Por eso es el formato favorito para sistemas de diseño y temas.
¿Acepta colores con transparencia y nombres CSS?
Sí. Acepta hex de 4 y 8 dígitos, rgba(), hsla(), la sintaxis moderna con barra como rgb(11 122 85 / 50%) y los nombres CSS como teal o tomato. Los espacios de color nuevos como lab() u oklch() no están soportados; la herramienta se enfoca en los formatos sRGB clásicos.