Convertidor de Colores: RGB, HEX, HSL Guia Completa con Ejemplos de Codigo

Ya sea que estes construyendo un sistema de diseno, depurando CSS o convirtiendo un mockup en codigo, un convertidor de colores confiable es una de las herramientas mas utilizadas. Esta guia completa explica cada modelo de color, las formulas matematicas, ejemplos de codigo en JavaScript, Python y Bash, y las funciones CSS modernas como oklch() y color-mix().

Prueba nuestro convertidor de colores gratuito en linea.

Entendiendo los modelos de color: RGB, HEX, HSL, HSV y CMYK

RGB (Rojo, Verde, Azul) es el modelo de color fundamental para pantallas. Cada pixel mezcla luz roja, verde y azul con intensidades de 0 a 255. RGB es un modelo aditivo: mezclar los tres canales al maximo produce blanco.

HEX (Hexadecimal) es la notacion de color mas comun en la web. Es una representacion compacta de valores RGB en base 16. #FF5733 equivale a rgb(255, 87, 51). Los codigos HEX pueden ser de 3, 6 u 8 digitos.

HSL (Tono, Saturacion, Luminosidad) esta disenado para ser mas intuitivo. El tono es un grado (0-360), la saturacion y luminosidad son porcentajes. HSL facilita crear variantes mas claras u oscuras.

HSV/HSB (Tono, Saturacion, Valor) es el modelo usado por la mayoria de selectores de color, incluyendo Photoshop y Figma. CSS no soporta HSV directamente.

CMYK (Cian, Magenta, Amarillo, Negro) es un modelo sustractivo para impresion. Es esencial para generar PDFs y preparar archivos de impresion.

Tabla comparativa de modelos de color

La siguiente tabla resume las propiedades clave de cada modelo:

Como funciona la conversion de colores

Cada convertidor de colores implementa formulas matematicas conocidas. Entender estas formulas ayuda a depurar casos limite.

HEX a RGB: Un codigo hex como #FF5733 se compone de tres pares hexadecimales. Analiza cada par independientemente para obtener los valores RGB.

RGB a HEX: Convierte cada valor de canal (0-255) a una cadena hexadecimal de dos digitos y concatena con prefijo #.

RGB a HSL: Normaliza R, G, B al rango 0-1, encuentra Cmax y Cmin, calcula delta, luminosidad, saturacion y tono.

HSL a HEX: Primero convierte HSL a RGB, luego cada canal RGB a hexadecimal.

RGB a HSV: El calculo del tono es identico a RGB a HSL. Valor = Cmax. Saturacion = delta / Cmax.

HSL a HSV y viceversa: Ambos comparten el tono pero la conversion entre saturacion y luminosidad/valor requiere formulas especificas.

Ejemplos de codigo de conversion de colores

JavaScript / CSS conversion de colores

JavaScript no tiene convertidor integrado, pero las funciones de color CSS hacen las conversiones directas:

// ===== HEX to RGB =====
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

// ===== RGB to HEX =====
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}
rgbToHex(255, 87, 51); // "#ff5733"

// ===== RGB to HSL =====
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  const l = (max + min) / 2;
  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  switch (max) {
    case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
    case g: h = ((b - r) / d + 2) / 6; break;
    case b: h = ((r - g) / d + 4) / 6; break;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}
rgbToHsl(255, 87, 51); // { h: 11, s: 100, l: 60 }

// ===== HSL to RGB =====
function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;
  if (h < 60)       { r = c; g = x; b = 0; }
  else if (h < 120) { r = x; g = c; b = 0; }
  else if (h < 180) { r = 0; g = c; b = x; }
  else if (h < 240) { r = 0; g = x; b = c; }
  else if (h < 300) { r = x; g = 0; b = c; }
  else              { r = c; g = 0; b = x; }
  return {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255)
  };
}
hslToRgb(11, 100, 60); // { r: 255, g: 87, b: 51 }

// ===== CSS native color parsing (modern browsers) =====
// Use CSS.supports() and getComputedStyle for runtime conversion
const el = document.createElement('div');
el.style.color = 'hsl(14 100% 60%)';
document.body.appendChild(el);
const rgb = getComputedStyle(el).color;
// "rgb(255, 87, 51)" - browser converts any format to RGB
document.body.removeChild(el);

Python conversion de colores

Python incluye colorsys para conversiones HSL/HSV y bibliotecas como Pillow y matplotlib:

import colorsys

# ===== RGB to HSL (colorsys uses HLS order) =====
r, g, b = 255, 87, 51
r_norm, g_norm, b_norm = r / 255, g / 255, b / 255
h, l, s = colorsys.rgb_to_hls(r_norm, g_norm, b_norm)
print(f"HSL: ({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")
# HSL: (11, 100%, 60%)

# ===== HSL to RGB =====
r2, g2, b2 = colorsys.hls_to_rgb(h, l, s)
print(f"RGB: ({r2*255:.0f}, {g2*255:.0f}, {b2*255:.0f})")
# RGB: (255, 87, 51)

# ===== RGB to HSV =====
h_hsv, s_hsv, v_hsv = colorsys.rgb_to_hsv(r_norm, g_norm, b_norm)
print(f"HSV: ({h_hsv*360:.0f}, {s_hsv*100:.0f}%, {v_hsv*100:.0f}%)")
# HSV: (11, 80%, 100%)

# ===== HEX to RGB =====
def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb("#FF5733"))  # (255, 87, 51)

# ===== RGB to HEX =====
def rgb_to_hex(r, g, b):
    return f"#{r:02x}{g:02x}{b:02x}"

print(rgb_to_hex(255, 87, 51))  # #ff5733

# ===== Using matplotlib colors =====
import matplotlib.colors as mcolors
rgb_tuple = mcolors.to_rgb('#FF5733')     # (1.0, 0.341, 0.2)
hex_value = mcolors.to_hex((1.0, 0.341, 0.2))  # '#ff5733'
rgba = mcolors.to_rgba('steelblue', alpha=0.5)

# ===== Using Pillow/PIL for image colors =====
from PIL import Image
img = Image.new('RGB', (1, 1), (255, 87, 51))
pixel = img.getpixel((0, 0))  # (255, 87, 51)
img_hsv = img.convert('HSV')   # Convert to HSV color space

Bash / CLI conversion de colores

Herramientas de linea de comandos como printf e ImageMagick manejan conversiones basicas:

# ===== HEX to RGB using printf =====
hex="FF5733"
printf "RGB: %d, %d, %d\n" 0x${hex:0:2} 0x${hex:2:2} 0x${hex:4:2}
# RGB: 255, 87, 51

# ===== RGB to HEX using printf =====
r=255 g=87 b=51
printf "#%02x%02x%02x\n" $r $g $b
# #ff5733

# ===== ImageMagick color conversion =====
# Convert HEX to RGB
magick convert xc:"#FF5733" -format "%[fx:int(255*r)],%[fx:int(255*g)],%[fx:int(255*b)]" info:
# 255,87,51

# Get color info in multiple formats
magick convert xc:"#FF5733" -colorspace HSL -format "HSL: %[fx:r*360],%[fx:g*100]%%,%[fx:b*100]%%" info:

# ===== Convert named color to HEX =====
magick convert xc:"tomato" -format "#%02[hex:r]%02[hex:g]%02[hex:b]" info:
# #FF6347

# ===== Batch convert colors from file =====
# colors.txt: one hex color per line
while IFS= read -r color; do
  printf "%s -> RGB: %d, %d, %d\n" "$color" \
    0x${color:1:2} 0x${color:3:2} 0x${color:5:2}
done < colors.txt

Funciones CSS modernas de color

El CSS moderno soporta espacios de color perceptualmente uniformes, colores de amplio gamut y funciones de manipulacion de color:

/* ===== Modern CSS color syntax (no commas) ===== */
.element {
  /* RGB - modern space-separated */
  color: rgb(255 87 51);
  color: rgb(255 87 51 / 0.5);  /* with alpha */

  /* HSL - modern space-separated */
  background: hsl(14 100% 60%);
  background: hsl(14 100% 60% / 0.8);

  /* HWB - Hue, Whiteness, Blackness */
  border-color: hwb(14 0% 0%);        /* pure orange */
  border-color: hwb(14 20% 10%);      /* muted orange */
}

/* ===== OKLCH - perceptually uniform ===== */
.brand {
  --brand-primary: oklch(0.65 0.25 29);       /* vivid red-orange */
  --brand-light:   oklch(0.85 0.12 29);       /* light variant */
  --brand-dark:    oklch(0.45 0.20 29);       /* dark variant */
  /* Same hue, predictable lightness changes */
}

/* ===== color-mix() - blend colors ===== */
.mixed {
  background: color-mix(in oklch, #FF5733 70%, #3366FF);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* ===== Relative color syntax ===== */
.derived {
  --base: #FF5733;
  /* Lighten by increasing L in oklch */
  color: oklch(from var(--base) calc(l + 0.2) c h);
  /* Desaturate by reducing chroma */
  background: oklch(from var(--base) l calc(c * 0.5) h);
  /* Shift hue by 180 degrees (complementary) */
  border-color: hsl(from var(--base) calc(h + 180) s l);
}

/* ===== Wide gamut P3 colors ===== */
@supports (color: color(display-p3 1 0 0)) {
  .vivid {
    color: color(display-p3 1 0.3 0.1); /* more vivid than sRGB */
  }
}

/* ===== Dark mode with light-dark() ===== */
:root {
  color-scheme: light dark;
  --text: light-dark(#1a1a1a, #e5e5e5);
  --surface: light-dark(#ffffff, #121212);
}

/* ===== CSS custom properties for theming ===== */
:root {
  --color-primary-h: 14;
  --color-primary-s: 100%;
  --color-primary-l: 60%;
  --color-primary: hsl(
    var(--color-primary-h)
    var(--color-primary-s)
    var(--color-primary-l)
  );
  --color-primary-hover: hsl(
    var(--color-primary-h)
    var(--color-primary-s)
    calc(var(--color-primary-l) - 10%)
  );
}

Funciones CSS de color en profundidad

El CSS moderno ofrece funciones de color ricas. rgb() acepta sintaxis separada por espacios. hwb() (Tono, Blancura, Negrura) es una alternativa intuitiva.

oklch() representa un avance para los colores web. Basado en el espacio Oklab, garantiza que colores de igual luminosidad realmente parezcan igual de brillantes. OKLCH tambien desbloquea el gamut P3.

color-mix() mezcla dos colores en cualquier espacio. La sintaxis de color relativa deriva nuevos colores de los existentes.

Otros valores utiles: currentColor, transparent, propiedades personalizadas CSS para temas y light-dark() para seleccion automatica de esquema.

Accesibilidad del color y contraste

Los ratios de contraste WCAG son la base del diseno accesible. AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.

Aproximadamente el 8% de los hombres tiene alguna deficiencia de vision del color. Nunca confies solo en el color para transmitir informacion. Evita combinaciones rojo/verde y azul/purpura.

Construye paletas accesibles usando OKLCH para generacion de tonos perceptualmente uniforme. Prueba cada combinacion primer plano/fondo.

Mejores practicas de color para desarrolladores

Define tu paleta como tokens de diseno mapeados a propiedades CSS personalizadas. Usa nombres semanticos como --color-text-primary.

El modo oscuro no deberia ser una simple inversion de luminosidad. Disenalo como un tema separado con su propia paleta.

Nunca uses valores HEX o RGB crudos directamente en estilos de componentes. Siempre referencia tokens.

Para animaciones, prefiere interpolacion oklch() para transiciones perceptuales mas suaves.

Preguntas frecuentes

Como convertir HEX a RGB y RGB a HEX?

Para HEX a RGB, divide el codigo en tres pares y analiza cada uno como entero base-16. Para RGB a HEX, convierte cada canal a cadena hex de 2 digitos y concatena. Nuestra herramienta en linea realiza estas conversiones instantaneamente.

Cual es el mejor formato de color para desarrollo web?

HEX es el formato predeterminado. HSL es mejor para temas. oklch() es la mejor opcion para navegadores modernos con colores perceptualmente uniformes y gamut P3.

Cuales son los requisitos de contraste WCAG?

AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1. Elementos no textuales necesitan al menos 3:1. Siempre prueba con un verificador de contraste.

La conversion de colores es una habilidad fundamental que conecta herramientas de diseno, CSS, accesibilidad y procesamiento backend. Usa nuestra herramienta gratuita para conversiones instantaneas.

Relacionado: lee nuestra guia sobre conversion HEX a RGB para mas consejos.

Convierte colores entre HEX, RGB, HSL y mas con nuestro convertidor gratuito.