T
color-converter design-tools css frontend-development

Convertidor de Color Profesional: Domina Cada Espacio de Color sin Esfuerzo

Convierte entre HEX, RGB, HSL, HSV y CMYK con precisión. La herramienta esencial para diseñadores y desarrolladores front-end.

2026-04-09 Usar esta herramienta

¿Qué Son los Modelos de Color?

Los modelos de color son sistemas matemáticos que describen colores como tuplas de números. En lugar de decir "ese naranja-rojo cálido", un diseñador puede comunicar #FF4500, rgb(255, 69, 0) o hsl(16, 100%, 50%)—sin ambigüedades, reproducible y transferible entre herramientas, equipos y medios.

La necesidad de describir el color con precisión tiene raíces antiguas. En 1666, Isaac Newton pasó luz solar blanca a través de un prisma de vidrio y produjo un espectro arcoíris, demostrando que la luz "blanca" contiene todos los colores visibles. Pero un espectro por sí solo no nos dice cómo mezclar o especificar un color de forma sistemática.

El primer sistema práctico de orden del color llegó con Albert H. Munsell en 1905. Organizó los colores en tres ejes—Matiz (Hue), Valor (Value) y Croma (Chroma)—en una estructura arbórea perceptual. Su sistema fue el ancestro directo de HSL y HSV.

La base científica moderna llegó en 1931, cuando la Comisión Internacional de Iluminación (CIE) publicó el espacio de color CIE 1931 XYZ—la primera descripción matemáticamente rigurosa e independiente del dispositivo de la percepción del color humano, derivada de experimentos con observadores humanos. Todos los modelos de color en computación se remontan en última instancia a este estándar.

La era digital trajo modelos impulsados por el hardware. Los monitores CRT mezclan puntos de fósforo rojo, verde y azul (RGB). Las impresoras de inyección de tinta pulverizan tintas cian, magenta, amarilla y negra (CMYK). Cada medio necesitó su propio modelo, y la necesidad de convertir entre ellos dio origen a herramientas como la que estás usando ahora.

RGB —— El Lenguaje de las Pantallas

RGB (Rojo, Verde, Azul) es un modelo de color aditivo. Añadir luz aumenta el brillo; los tres canales al máximo (255, 255, 255) producen blanco; todos en cero producen negro. Esto coincide con cómo funcionan los monitores, televisores y pantallas de smartphone—millones de píxeles, cada uno un conjunto de subpíxeles rojo, verde y azul que emiten luz a intensidades variables.

Cada canal va de 0 a 255 (8 bits, 256 niveles). Eso da 256³ = 16.777.216 colores distintos—comúnmente llamados "color verdadero de 24 bits". Para pantallas HDR, 10 bits por canal (1024 niveles) se está convirtiendo en estándar.

RGB es el lenguaje nativo de CSS, las API canvas, los shaders de WebGL y las bibliotecas de procesamiento de imágenes. Su debilidad es que no es intuitivo perceptivamente—si quieres un azul ligeramente más claro, no sabes qué números ajustar.

HEX —— La Notación Compacta del Color en Web

HEX es simplemente RGB codificado en notación hexadecimal. Cada canal (0–255 decimal) se convierte en una cadena hexadecimal de dos dígitos (00–FF). El color completo lleva el prefijo #.

255 decimal = FF hex
128 decimal = 80 hex
  0 decimal = 00 hex

Así, rgb(255, 128, 0) se convierte en #FF8000. El formato es compacto, se puede copiar y pegar, y es omnipresente en HTML, CSS y paletas de herramientas de diseño.

Existe una forma abreviada cuando ambos dígitos de cada canal son idénticos: #FF8800 → #F80. CSS también admite la forma de 8 dígitos #RRGGBBAA para colores con transparencia alfa (ej: #FF800080 = naranja 50% transparente).

HEX es cómodo para los desarrolladores pero no ofrece más claridad semántica que RGB—ajustar un valor sigue siendo ensayo y error sin un selector de color.

HSL —— Diseñado para Humanos

HSL (Matiz, Saturación, Luminosidad) reorganiza el espacio de color de una forma que se corresponde con la intuición humana:

  • Matiz H: El ángulo de la rueda de color, 0°–360°. Rojo = 0°, Amarillo = 60°, Verde = 120°, Cian = 180°, Azul = 240°, Magenta = 300°, vuelve a Rojo = 360°.
  • Saturación S: 0%–100%. Al 0% todos los colores se vuelven gris; al 100% el color es completamente vivo.
  • Luminosidad L: 0%–100%. 0% es siempre negro; 100% es siempre blanco; 50% es el matiz "puro".

Esto hace que las operaciones de diseño sean naturales: "hacer este color 20% más claro" es solo L: 50% → 70%. CSS hsl() se usa ampliamente en sistemas de diseño porque permite ajustes de color a nivel de componente con aritmética.

HSL tiene una debilidad perceptual: hsl(60, 100%, 50%) (amarillo) parece mucho más brillante que hsl(240, 100%, 50%) (azul) aunque ambos tengan el mismo valor L de 50%. Para uniformidad perceptual, usa Lab u oklch.

HSV / HSB —— El Modelo de Photoshop

HSV (Matiz, Saturación, Valor) —también llamado HSB (Matiz, Saturación, Brillo)— es estructuralmente similar a HSL pero reemplaza la Luminosidad con Valor:

  • Valor V: 0%–100%. Al 0%, el color es siempre negro independientemente de H y S. Al 100%, el color está a brillo máximo (pero no necesariamente blanco).

La diferencia práctica: en HSL, un color puro está en L=50%; en HSV, un color puro está en V=100%, S=100%. Aumentar L por encima del 50% en HSL añade blanco (aclarando); HSV no tiene un tinte nativo—bajas S para añadir blanco.

Adobe Photoshop, Illustrator y la mayoría de selectores de color profesionales usan HSV/HSB porque su modelo de "brillo máximo" se siente natural al elegir colores vivos. Los diseñadores suelen preferir HSV para la creación de paletas, mientras que los desarrolladores prefieren HSL para manipulaciones CSS.

CMYK —— El Modelo de Impresión

CMYK (Cian, Magenta, Amarillo, Clave/Negro) es un modelo de color sustractivo. A diferencia del RGB aditivo (añadir luz crea blanco), los modelos sustractivos trabajan con tinta sobre papel—cada tinta absorbe (sustrae) ciertas longitudes de onda, y la luz reflejada es lo que vemos.

  • Cian absorbe rojo; refleja azul+verde
  • Magenta absorbe verde; refleja rojo+azul
  • Amarillo absorbe azul; refleja rojo+verde
  • Clave (Negro) mejora la profundidad de las sombras y ahorra costo de tinta (CMY mezclados rara vez producen un negro verdadero)

Cada canal se expresa como porcentaje del 0 al 100%. CMYK es el estándar para impresión offset, embalaje, revistas y todo lo que termina como tinta física en papel.

Una advertencia crítica: RGB y CMYK no son totalmente intercambiables. Muchos colores RGB vibrantes (verdes neón, azules eléctricos) caen fuera de la gama CMYK y se imprimirán como aproximaciones más apagadas. Siempre prueba en CMYK antes de enviar archivos a imprenta.

CIE L*a*b* —— Uniformidad Perceptual

Lab (o CIELAB) es un espacio de color independiente del dispositivo diseñado para que distancias numéricas iguales correspondan a diferencias de color percibidas iguales. Lo creó la CIE en 1976 para abordar la no uniformidad perceptual de modelos anteriores.

  • L*: Luminosidad, 0 (negro) a 100 (blanco)
  • a*: Verde (negativo) a Rojo (positivo), aproximadamente −128 a +127
  • b*: Azul (negativo) a Amarillo (positivo), aproximadamente −128 a +127

Lab es el estándar de oro para la ciencia del color, edición de imágenes (modo Lab de Photoshop) y cálculos de diferencia de color (ΔE). ΔE < 1 es imperceptible para el ojo humano; ΔE < 3 es aceptable para la mayoría de trabajos de impresión.

Lab es la base del moderno oklch() de CSS, que reempaqueta Lab en coordenadas polares (Luminosidad, Croma, Matiz) para un uso más sencillo.

RGBA y HSLA —— Añadiendo Transparencia

Tanto RGB como HSL soportan un canal alfa—un cuarto valor de 0 (completamente transparente) a 1 (completamente opaco)—dando RGBA y HSLA.

rgba(255, 99, 71, 0.5)   /* tomate al 50% de opacidad */
hsla(9, 100%, 64%, 0.7)  /* mismo color, 70% opaco */

CSS también acepta sintaxis con barra en rgb() y hsl() modernos: rgb(255 99 71 / 50%).

Fórmulas de Conversión Matemática

RGB ↔ HEX

// Conversión RGB a HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => Math.round(v).toString(16).padStart(2, '0'))
    .join('');
}

// HEX a 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;
}

RGB ↔ 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);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // acromático
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    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) };
}

Espacios de Color y Perfiles

Un espacio de color define qué subconjunto de todos los colores visibles puede representar un dispositivo o archivo:

Espacio de color Cobertura de gama Uso
sRGB ~35% de lo visible Web, monitores estándar, JPEG
Adobe RGB ~50% de lo visible Fotografía profesional, impresión
Display P3 ~45% de lo visible iPhone, Mac, pantallas modernas
ProPhoto RGB ~90% de lo visible Edición de fotos RAW
Rec. 2020 ~75% de lo visible Vídeo HDR, transmisión 4K

Los diseñadores web trabajan predominantemente en sRGB, que es el espacio de color asumido de CSS, PNG y JPEG. Sin embargo, Safari y Chrome ahora soportan la función CSS color() con display-p3 para pantallas de gama amplia, y la función oklch() puede referenciar colores completamente fuera de sRGB.

Uso de Colores en CSS

CSS ha evolucionado desde valores hexadecimales básicos hasta un rico ecosistema de color:

/* Uso moderno de color en CSS */
:root {
  --primary: #3B82F6;
  --primary-hsl: hsl(217, 91%, 60%);
  /* oklch para gama amplia P3 */
  --accent: oklch(70% 0.2 250);
}

/* Ayudante de verificación de contraste WCAG */
.text-accessible {
  color: #1a1a1a;       /* contraste 16.1:1 en blanco — AAA */
  background: #ffffff;
}

Colores nombrados: CSS define 140 colores nombrados, desde aliceblue hasta yellowgreen. Son legibles pero inflexibles para el diseño sistemático.

Funciones modernas:

  • rgb(255 99 71) — sintaxis moderna separada por espacios
  • hsl(9deg 100% 64%) — legible y ajustable
  • oklch(70% 0.2 250) — perceptualmente uniforme, compatible con gama amplia
  • color(display-p3 1 0.389 0.279) — gama amplia explícita

Las propiedades personalizadas CSS (variables) son la piedra angular del tema moderno. Con variables basadas en HSL, generar una escala de tonos completa a partir de un único matiz es sencillo con aritmética.

Accesibilidad y Relaciones de Contraste

Las WCAG (Pautas de Accesibilidad para el Contenido Web) definen requisitos de relación de contraste para texto legible:

  • Nivel AA: 4.5:1 para texto normal, 3:1 para texto grande (18pt o 14pt negrita)
  • Nivel AAA: 7:1 para texto normal, 4.5:1 para texto grande

La relación de contraste se calcula a partir de la luminancia relativa:

Contraste = (L1 + 0.05) / (L2 + 0.05)

donde L1 es la luminancia más clara y L2 es la más oscura.

Combinaciones seguras comunes: negro (#000000) sobre blanco (#ffffff) = 21:1 (perfecto AAA); gris #767676 sobre blanco = exactamente 4.5:1 (pasa AA).

Herramientas de Diseño y Gestión del Color

Figma: Almacena colores como RGB internamente. El selector de color expone HEX, RGB, HSL, HSB y notación CSS. Los tokens de diseño (variables) pueden publicarse al código mediante la API de Variables de Figma, exportando como propiedades personalizadas CSS o JSON.

Sketch: Usa RGB con muestras nombradas y bibliotecas de color compartidas. Admite sugerencias de exportación CMYK para entregables de impresión.

Adobe Photoshop / Illustrator: Las herramientas de Adobe soportan nativamente CMYK, Lab y flujos de trabajo con conciencia de perfil de color. El selector de color de Photoshop usa HSB (HSV) por defecto.

Casos de Uso: Marca, Tokens y Consistencia Multiplataforma

Las directrices de marca definen el conjunto canónico de colores para una organización. Un color de marca bien especificado podría ser:

Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6

Esta especificación en múltiples formatos garantiza que el azul se vea correcto tanto en una camiseta serigrafiada, como en un folleto impreso o en un sitio web.

Los tokens de diseño son variables nombradas que mapean roles semánticos a valores de color. Herramientas como Style Dictionary transforman los tokens en archivos específicos de plataforma: variables CSS para web, constantes Swift para iOS, recursos XML para Android.

Comparación: HSL vs HSV, sRGB vs Gama Amplia

HSL vs HSV: Ambos derivan de RGB; ninguno es perceptualmente uniforme. El matiz puro de HSL está en L=50%; el de HSV está en V=100%, S=100%. HSV es mejor para una UI de selector de color; HSL es mejor para manipulaciones CSS. Para verdadera uniformidad perceptual, usa oklch/Lab.

sRGB vs Gama Amplia: sRGB cubre alrededor del 35% del espacio CIE 1931—suficiente para la mayoría del trabajo web. Display P3 cubre ~45%, permitiendo verdes y rojos más vivos en pantallas modernas Apple/Samsung. @media (color-gamut: p3) permite mejora progresiva.

Mejores Prácticas para la Gestión del Color

  1. Define tu espacio de color temprano: Usa sRGB como predeterminado; añade mejoras P3 progresivamente.
  2. Usa HSL para variables CSS para generar escalas de tonos y temas fácilmente.
  3. Especifica siempre los colores en múltiples formatos para las directrices de marca.
  4. Verifica el contraste WCAG para cada combinación texto-fondo antes de publicar.
  5. Incrusta perfiles ICC en imágenes exportadas para preservar la intención.
  6. Prefiere tokens semánticos sobre hex crudo en sistemas de diseño.
  7. Prueba en modo oscuro: Las variables basadas en HSL hacen que el tema oscuro sea mucho más sencillo.
  8. No asumas CMYK desde RGB: Siempre involucra a un profesional de impresión para probar activos de color críticos.
  9. Usa oklch para CSS moderno cuando targets colores vivos y de gama amplia con uniformidad perceptual.
  10. Documenta las decisiones de color: Registra por qué se eligieron los colores—justificación de accesibilidad, historia de marca, intención emocional.

Preguntas Frecuentes

P1: ¿Cuál es la diferencia entre HEX y RGB? Representan la misma información de forma diferente. #FF8000 y rgb(255, 128, 0) son colores idénticos—HEX solo usa notación hexadecimal. HEX es más compacto; RGB es más legible para números grandes.

P2: ¿Por qué mi color RGB se ve diferente al imprimirlo? Las pantallas son aditivas (luz); la impresión es sustractiva (tinta). Muchos colores de pantalla vivos—especialmente azules eléctricos y verdes neón—no se pueden reproducir con tinta, por lo que se "mapean a la gama" hacia el equivalente imprimible más cercano, apareciendo más apagados.

P3: ¿Cuándo debo usar HSL frente a HSV? Usa HSL al escribir CSS o construir tokens de diseño—se integra naturalmente con el CSS moderno. Usa HSV al trabajar en selectores de color de Photoshop/Illustrator o construyendo tu propio componente de selector de color.

P4: ¿Qué es oklch y por qué es mejor que HSL? oklch es una función de color CSS que usa el espacio de color perceptual Oklab. A diferencia de HSL, mantiene luminosidad percibida consistente entre matices y también soporta colores de gama amplia Display P3.

P5: ¿Cómo verifico si dos colores tienen suficiente contraste? Calcula la luminancia relativa de cada color, luego aplica: (más claro + 0.05) / (más oscuro + 0.05). El resultado debe ser ≥ 4.5 para WCAG AA. Nuestro convertidor de color incluye un verificador de contraste integrado.

P6: ¿Es precisa la conversión RGB→CMYK en esta herramienta? La conversión matemática es una aproximación independiente del dispositivo. Para trabajo de impresión profesional, el CMYK preciso requiere perfiles de color ICC específicos para tu impresora y papel. Usa la herramienta para estimaciones; siempre prueba con tu proveedor de impresión.

P7: ¿Puedo usar oklch() de CSS hoy? Sí—oklch() tiene soporte completo en Chrome 111+, Firefox 113+, Safari 16.4+ y Edge 111+. Para navegadores más antiguos, proporciona un fallback: color: hsl(250, 80%, 55%); color: oklch(55% 0.18 250);.

Volver al blog Convertidor de Color →