Cómo convertir colores HEX a RGB (y por qué importa)

Los Tres Formatos de Color Principales

Si trabajas en diseño web o desarrollo, encontrarás tres formas principales de representar colores: HEX, RGB y HSL. Entender cada formato y cuándo usarlo hará tu flujo de trabajo significativamente más rápido.

Colores HEX

Formato: #RRGGBB Ejemplo: #0ea5e9 (azul cielo)

Los colores HEX (hexadecimal) representan cada canal de color (Rojo, Verde, Azul) como un número de dos dígitos en base 16, de 00 (0) a FF (255).

#0ea5e9 se descompone en:

• 0e = 14 (Rojo)
• a5 = 165 (Verde)
• e9 = 233 (Azul)

Cuándo usar HEX

• El más común en CSS y herramientas de diseño (Figma, Sketch, Adobe XD)
• Notación compacta — fácil de copiar, pegar y escribir
• El estándar de la industria para diseño web

HEX abreviado

Cuando ambos dígitos de cada canal son idénticos, puedes abreviar: #ffffff → #fff, #000000 → #000, #ff6600 → #f60.

Colores RGB

Formato: rgb(R, G, B) Ejemplo: rgb(14, 165, 233)

RGB lista explícitamente cada canal como un número decimal de 0 a 255. Es el mismo modelo de color que HEX, solo en una notación diferente.

Cuándo usar RGB

• Cuando necesitas transparencia: rgba(14, 165, 233, 0.5) añade un canal alfa para 50% de opacidad
• Cuando estás manipulando colores programáticamente — la aritmética es más fácil en decimal que en hexadecimal
• Cuando una herramienta de diseño produce en formato RGB

RGB vs RGBA

Añadir un cuarto valor (alfa, 0–1) crea RGBA:

• rgba(0, 0, 0, 0) — completamente transparente
• rgba(0, 0, 0, 0.5) — negro 50% transparente
• rgba(0, 0, 0, 1) — negro completamente opaco

Colores HSL

Formato: hsl(H, S%, L%) Ejemplo: hsl(199, 89%, 49%)

HSL significa Matiz (Hue), Saturación (Saturation) y Luminosidad (Lightness):

• Matiz (0–360°): el tipo de color. 0°/360° = rojo, 120° = verde, 240° = azul.
• Saturación (0–100%): qué tan vívido es el color. 0% = gris, 100% = color puro.
• Luminosidad (0–100%): qué tan brillante. 0% = negro, 50% = color puro, 100% = blanco.

Cuándo usar HSL

HSL es el formato más intuitivo para humanos. ¿Quieres una versión más oscura de un color? Solo disminuye la Luminosidad. ¿Quieres un tono más apagado? Disminuye la Saturación. Esto lo hace ideal para:

• Generar paletas de color: varía solo el Matiz para obtener colores armoniosos
• Modo oscuro/claro: ajusta la Luminosidad para un tema consistente
• Tintes y sombras: aclara u oscurece sistemáticamente cualquier color

Conversión Manual: HEX → RGB

1. Toma el código HEX sin el símbolo #: 0ea5e9
2. Divide en pares: 0e, a5, e9
3. Convierte cada par de base 16 a base 10:
   • 0e → 0×16 + 14 = 14
   • a5 → 10×16 + 5 = 165
   • e9 → 14×16 + 9 = 233
4. Resultado: rgb(14, 165, 233)

Conversión Manual: RGB → HEX

1. Toma cada valor RGB y conviértelo a hexadecimal:
   • 14 ÷ 16 = 0 resto 14 → 0e
   • 165 ÷ 16 = 10 resto 5 → a5
   • 233 ÷ 16 = 14 resto 9 → e9
2. Combina con #: #0ea5e9

Armonía de Color de un Vistazo

Manipulación HSL	Efecto
Matiz +30°	Color análogo (vecino en la rueda de color)
Matiz +180°	Color complementario (opuesto en la rueda)
Saturación -50%	Versión apagada/desaturada
Luminosidad +20%	Tinte (más claro)
Luminosidad -20%	Sombra (más oscuro)

En CSS: ¿Qué Formato Usar?

Los tres formatos son válidos en CSS. Una convención común:

:root {
  /* HSL para theming fácil */
  --color-primario: hsl(199, 89%, 49%);
  --color-primario-claro: hsl(199, 89%, 65%);
  --color-primario-oscuro: hsl(199, 89%, 35%);
}

/* HEX para valores únicos */
border: 1px solid #e5e7eb;

/* RGBA para transparencia */
background: rgba(14, 165, 233, 0.1);

Convierte Colores al Instante

Nuestro Conversor de Color gratuito te permite ingresar cualquier valor HEX, RGB o HSL y ver instantáneamente los tres formatos con una vista previa del color en tiempo real — sin registro requerido.