Cómo convertir colores entre HEX, RGB y HSL

Los colores en la web se expresan sobre todo en tres formatos: HEX (#2563EB), RGB (rgb(37, 99, 235)) y HSL (hsl(217, 83%, 53%)). Los tres describen el mismo color; la diferencia es cómo lo representan. HEX domina en CSS, RGB permite canal alpha, y HSL es el más intuitivo para diseñar paletas.

El Conversor de Color de NeatForge convierte entre HEX, RGB y HSL en tiempo real y copia valores listos para CSS.

Los tres formatos de color explicados

• HEX: notación hexadecimal de 6 dígitos (#RRGGBB). Compacta y dominante en CSS.
• RGB: componentes rojo, verde y azul, cada uno de 0 a 255. Admite un canal alpha: rgba(37, 99, 235, 0.5).
• HSL: tono (hue, 0–360°), saturación (%) y luminosidad (%). Describe el color como lo percibe el diseñador.

¿Cuándo usar cada formato?

• HEX: para colores sólidos en CSS, configuración de Tailwind, variables de tema.
• RGB / RGBA: cuando necesitas transparencia (alpha) o mezclar canales.
• HSL: para construir paletas ajustando luminosidad o saturación sin recalcular RGB.

¿Cuál es la diferencia entre RGB y HSL?

RGB describe cuánta luz roja, verde y azul emite un píxel. Es exacto pero poco intuitivo: ¿qué color es rgb(217, 119, 87)?

HSL describe el color por tono, saturación y luminosidad. Para aclarar un color, subes la L; para hacerlo más vivo, subes la S. Por eso los diseñadores prefieren HSL para iterar paletas.

¿Cómo convertir entre HEX, RGB y HSL?

1. Abre el Conversor de Color.
2. Escribe un valor HEX, ajusta los deslizadores de RGB/HSL o elige un preset.
3. Revisa la vista previa en vivo.
4. Pulsa Copiar junto al formato que necesites.

La abreviatura HEX de 3 dígitos (#fff) se expande automáticamente a 6 (#ffffff).

Conversión manual: HEX a RGB

Para convertir #2563EB a RGB a mano:

1. Divide el HEX en pares: 25, 63, EB.
2. Convierte cada par de hexadecimal a decimal: 25 → 37, 63 → 99, EB → 235.
3. Resultado: rgb(37, 99, 235).

De RGB a HSL la fórmula es más larga (implica normalizar y hallar el tono), por eso conviene usar una herramienta en lugar de calcularlo a mano.

Tips de CSS: color-mix y opacidad

CSS moderno permite mezclar colores sin preprocesadores:

.button {
  background: color-mix(in srgb, #2563EB 80%, white);
  color: rgba(37, 99, 235, 0.9);
}

color-mix() funciona con cualquier formato (HEX, RGB, HSL), por lo que convertir entre ellos te da flexibilidad al diseñar tokens de color.

Preguntas frecuentes

¿La herramienta admite HEX de 3 dígitos? Sí. #fff se expande a #ffffff. La salida siempre usa 6 dígitos para máxima compatibilidad.

¿Puedo copiar valores listos para CSS? Sí. Cada formato tiene un botón Copiar que te da #2563EB, rgb(37, 99, 235) o hsl(217, 83%, 53%) listos para pegar.

¿Qué pasa si escribo un HEX no válido? Los valores RGB y HSL no se actualizan hasta que el HEX es válido, para que no pierdas tu color anterior mientras experimentas.

¿Cómo elijo colores accesibles? Combina esta herramienta con un comprobador de contraste y verifica que el par texto/fondo cumple WCAG (ratio mínimo 4.5:1 para texto normal).

→ Convierte colores HEX, RGB y HSL gratis