Convertidor de colores

Cinco maneras diferentes de nombrar el mismo píxel

Un convertidor que maneja HEX, RGB, HSL, HSV y CMYK está tocando cinco formas bastante diferentes de describir el mismo fenómeno perceptual. Fueron inventadas por personas diferentes, en décadas diferentes, para máquinas diferentes y con prioridades diferentes. Deslizar un valor de una notación a otra parece aritmética trivial, y en la superficie generalmente lo es, pero las historias explican por qué existe cada notación, y las matemáticas explican por qué el viaje de ida y vuelta entre ellas no siempre es sin pérdidas.

HEX, taquigrafía base 16 para tripletas sRGB

La notación hexadecimal de colores precede a CSS en algunos años en estaciones de trabajo y en formatos de archivo gráfico, pero su significado universal en la web fue clavado por la Recomendación CSS1 que el W3C publicó el 17 de diciembre de 1996. CSS1 fue el trabajo de Håkon Wium Lie y Bert Bos: Lie había propuesto Cascading Style Sheets mientras estaba en el CERN en octubre de 1994, y Bos se unió al proyecto en INRIA en julio de 1995. Antes de CSS, HTML 1.0 no tenía noción de color en absoluto, su conjunto inicial de 18 etiquetas era estrictamente estructural. Un color hex es un entero de tres bytes (o cuatro, con alpha) que el navegador divide en canales rojo, verde y azul. La forma de 6 dígitos #RRGGBB da a cada canal un valor de 8 bits, 0-255, codificado en dos dígitos hex. La taquigrafía de 3 dígitos #RGB es exactamente equivalente a la forma de 6 dígitos con cada dígito duplicado, así que #F0A y #FF00AA son el mismo color. CSS Color Module Level 4 añadió formalmente formas de 4 dígitos (#RGBA) y 8 dígitos (#RRGGBBAA) con canal alpha, donde 00 es totalmente transparente y FF totalmente opaco. El soporte de navegador aterrizó en Chrome 62, Firefox 49, Safari 10 y Edge 79, así que en 2026 es esencialmente universal. Hex es popular porque es corto, copiable-pegable y sin ambigüedad, background: #1e90ff sobrevive al copiar/pegar entre Figma, VS Code, Slack y correo sin que nadie necesite pensar en espacios o comas.

RGB, el principio tricromático de Maxwell, hecho digital

La idea «RGB», que cualquier color que vea el ojo puede emparejarse mezclando cantidades controladas de tres luces primarias, precede a la fotografía a color. James Clerk Maxwell la propuso por primera vez en su artículo de 1855 «Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness», presentado a la Royal Society of Edinburgh. Seis años después, el 17 de mayo de 1861, Maxwell demostró el principio en público: hizo que el fotógrafo Thomas Sutton hiciera tres placas en blanco y negro de una cinta de tartán, cada una tomada a través de un filtro rojo, verde o azul, y luego proyectó las tres placas a través de los mismos filtros sobre una pantalla. Las proyecciones superpuestas produjeron una imagen reconociblemente coloreada, la primera fotografía a color del mundo por síntesis aditiva. El RGB aditivo de Maxwell se convirtió en la base de cada pantalla electrónica desde entonces. El RGB web moderno significa específicamente sRGB, el espacio de color «standard RGB» propuesto por Hewlett-Packard y Microsoft en 1996 (autores Michael Stokes y Ricardo Motta de HP, Matthew Anderson y Srinivasan Chandrasekar de Microsoft) y estandarizado como IEC 61966-2-1:1999. La motivación era prosaica: la web temprana necesitaba un espacio de color lo suficientemente simple para asumir por defecto, lo suficientemente robusto para verse aceptable en CRT baratos y lo suficientemente pequeño para no inflar los archivos de imagen. Veinticinco años después sigue siendo el espacio de trabajo predeterminado de cada navegador, cada JPEG y cada PNG que no lleva un perfil ICC incrustado. En CSS, RGB se escribe rgb(255, 0, 153) (sintaxis legacy con comas) o rgb(255 0 153) (moderna separada por espacios, según CSS Color Level 4).

HSL y HSV, los ejes perceptuales de Alvy Ray Smith

RGB es excelente para hardware (una pantalla tiene literalmente subpíxeles rojos, verdes y azules) e inútil para la intuición humana. Nadie ajusta un diseño web razonando que quiere «doce unidades más de verde y siete menos de rojo». Los diseñadores piensan en términos de matiz (qué color), saturación (cuán vívido) y luminosidad (cuán brillante). La conversión fue formalizada por Alvy Ray Smith en su artículo SIGGRAPH 1978 «Color Gamut Transform Pairs», publicado en el número de agosto de 1978 de Computer Graphics, páginas 12-19. Smith estaba en el New York Institute of Technology Computer Graphics Lab, habiendo trabajado previamente en Xerox PARC. El artículo señalaba que la transformación RGB-a-HSV ya había sido «usada con éxito durante aproximadamente cuatro años» en programas de pintura de frame-buffer en el momento en que fue publicado, Smith estaba documentando la práctica laboral, no inventando desde cero. Fue co-galardonado con el SIGGRAPH Computer Graphics Achievement Award en 1990 por, entre otras cosas, «el modelo de espacio de color HSV (alias HSB)». HSL y HSV comparten un eje de matiz (un ángulo, 0°-360°, alrededor de una rueda de color: 0° rojo, 120° verde, 240° azul) y un eje de saturación (0% gris a 100% puro), pero difieren en su tercer eje. HSV (Hue, Saturation, Value) trata V como el máximo de los canales RGB, el blanco puro requiere V=100% Y S=0%, el rojo puro es V=100%, S=100%; tanto el blanco como el rojo viven en la parte superior del cilindro. HSL (Hue, Saturation, Lightness) trata L como el punto medio de los canales más claro y más oscuro, el blanco puro es L=100% independientemente de S, el rojo puro es L=50%, S=100%; el blanco vive en la parte superior del cilindro, los colores más vívidos viven en el ecuador. HSL fue elegido específicamente para CSS porque su simetría alrededor de L=50% coincide con cómo los diseñadores piensan en tintes y sombras.

CMYK, el modelo sustractivo del impresor

Mientras que los monitores emiten luz (aditivo: más es más brillante, los tres al máximo = blanco), la tinta absorbe luz (sustractivo: más es más oscuro, los tres al máximo = negro, en teoría). La impresión de cuatro colores, cian, magenta, amarillo, más una placa negra «key», se usó comercialmente por primera vez en la década de 1890 para ilustraciones a color de periódicos. La Eagle Printing Ink Company es generalmente acreditada con el primer verdadero proceso de cuatro colores de tinta húmeda en 1906. La «K» viene de «key» (la placa que registra todas las demás, tradicionalmente la placa de detalle negra), no de «black», por eso el modelo es CMYK y no CMYB. La placa key existe por cuatro razones prácticas: combinar 100% C, M e Y en tinta real da un marrón oscuro fangoso, no un negro verdadero, porque los pigmentos reales no son perfectamente puros; los negros de tres colores desperdician tinta y ralentizan el secado; los negros húmedos de tres colores hacen que el papel se ondule y se rasgue; y el texto y los contornos finos necesitan una sola placa de alto contraste para nitidez.

Las matemáticas de conversión, brevemente

HEX ↔ RGB es trivial, divide la cadena hex en tres subcadenas de dos caracteres y analiza cada una como un entero base 16 con parseInt(hex, 16); invierte con n.toString(16).padStart(2, '0'). RGB → HSL es matemática max/min: croma = max(R,G,B) − min(R,G,B); luminosidad = (max + min) / 2; saturación = croma / (1 − |2L − 1|); el matiz se calcula mediante una fórmula por partes que toma el canal dominante y traduce su posición a un ángulo en uno de los seis sectores de 60° del círculo de matices. (Algunas implementaciones usan atan2, pero el artículo de Smith de 1978 evitó deliberadamente la trigonometría por razones de rendimiento, atan2 era una instrucción costosa en un frame buffer de los años 70, y la fórmula por partes se ha mantenido porque da la misma respuesta más rápido.) HSL → RGB invierte el proceso mediante un mapeo lineal por partes con croma y un desplazamiento que traduce el triplete de croma al punto correcto del eje de luminosidad. RGB ↔ HSV usa el mismo esqueleto pero con un eje vertical diferente: V = M en lugar de L = (M+m)/2, y S = Δ/M en lugar del divisor consciente de la luminosidad. RGB ↔ CMYK usa la fórmula simple K = 1 − max(R,G,B), luego C, M, Y como (1 − canal − K) / (1 − K). Esto es matemáticamente autoconsistente pero no describe cómo cualquier prensa de impresión real reproducirá el color, ver la advertencia de impresión más abajo.

El problema del viaje de ida y vuelta

Convierte #7A3D5C (HEX) → HSL → HEX. No necesariamente obtendrás #7A3D5C de vuelta. Las razones son completamente peatonales. Truncamiento de enteros: los canales HEX son enteros 0-255; las conversiones HSL producen flotantes; redondear (1, 121.987, 47.512) a enteros pierde información sub-pixel que el viaje de ida y vuelta no puede recuperar. Imprecisión Float64: el único tipo numérico de JavaScript es el flotante binario de doble precisión IEEE 754, con una mantisa de 52 bits dando aproximadamente 15-17 dígitos decimales significativos, suficiente para una conversión única pero se acumula si encadenas muchas operaciones. Mapas asimétricos: múltiples tripletes distintos (R,G,B) pueden mapear al mismo triplete (H,S,L) cuando el croma es cero (cualquier gris tiene matiz indefinido; las convenciones eligen H = 0 o preservan el H anterior). Para una herramienta de navegador pragmática, esto está bien, el usuario escribió #7A3D5C, ve (322°, 32%, 36%) en HSL, y obtiene #7A3D5C (o #7A3E5D, fuera por uno) de vuelta. Mientras la muestra mostrada coincida con lo que el ojo espera, el viaje es bueno. Pero vale la pena ser honesto: el viaje de ida y vuelta sin pérdidas no está garantizado.

Espacios de color CSS modernos más allá de sRGB

Durante décadas, «color web» significaba sRGB y solo sRGB. Esa suposición se rompió en 2015, cuando Apple lanzó el iMac de finales de 2015 como «la primera computadora de consumo con una pantalla de gama amplia incorporada» que soportaba el espacio de color Display P3 de Apple. P3 se originó como DCI-P3, definido en 2005 por la Digital Cinema Initiative para proyección teatral. La variante Display P3 de Apple mantuvo las primarias de DCI pero cambió el punto blanco a D65 (coincidiendo con el de sRGB) y adoptó la curva de reproducción tonal de sRGB para hacerlo adecuado para visualización desktop/móvil en lugar de teatros oscurecidos. El gamut de Display P3 es aproximadamente 25% más grande en superficie que sRGB y permite a los teléfonos y portátiles mostrar rojos y verdes mediblemente más vívidos. Para permitir que CSS describa colores fuera de sRGB, el CSS Color Module Level 4 del W3C introdujo la función color() con un parámetro explícito de espacio de color: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Los espacios de color predefinidos incluyen srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 y xyz-d65. En una pantalla sRGB normal, un color P3 fuera del gamut se mapea al equivalente sRGB más cercano que la pantalla puede mostrar.

CSS Color Level 4 también añadió las funciones de primera clase lab(), lch(), oklab() y oklch(). lab() y lch() usan el espacio de color CIE 1976 L*a*b*, estandarizado por la Comisión Internacional de Iluminación en 1976, el primer espacio de color perceptualmente uniforme ampliamente desplegado, con los ejes a* y b* correspondientes a pares oponentes rojo-verde y azul-amarillo que coinciden con cómo el sistema visual humano realmente codifica el color. En diciembre de 2020, el desarrollador sueco Björn Ottosson publicó «A perceptual color space for image processing» en su blog e introdujo Oklab. Ottosson había pasado años en la industria del juego haciendo manipulaciones de color simples y concluyó que cada espacio de color existente fallaba en ello de alguna manera. Oklab está ajustado específicamente para operaciones de procesamiento de imágenes: los gradientes entre dos colores Oklab se mantienen perceptualmente suaves, y los ajustes de luminosidad en Oklab se sienten como ajustes de luminosidad al ojo humano. La forma cilíndrica, OKLCH, es lo que la mayoría de los diseñadores escriben realmente. Oklab fue añadido a CSS Color Level 4 un año después del post del blog, en diciembre de 2021, y ahora es el espacio de interpolación predeterminado para gradientes CSS en navegadores que implementan Color Level 4. La paleta de colores Tailwind CSS v4 se genera a partir de coordenadas OKLCH. La función color-mix() (CSS Color Module Level 5) se lanzó en Safari 16.2 (diciembre de 2022), Chrome 111 (marzo de 2023) y Firefox 113 (mayo de 2023), haciéndola disponible en baseline a través de los navegadores desde mayo de 2023.

Mini-historia de la teoría del color

Los convertidores de color web se sitúan al final de un arco de 360 años de intentar entender el color sistemáticamente. Los hitos notables: Newton (1665-66) usó un prisma de vidrio para dividir la luz solar en el espectro visible e identificó siete colores en su Opticks. Goethe (1810) publicó Teoría de los colores, un tratado antinewtoniano más interesado en las dimensiones perceptuales y emocionales del color que en su física, equivocado en la ciencia pero correcto en que la percepción importa. Maxwell (1855/1861) como se cubrió arriba. Itten (1961) publicó El Arte del Color en la Bauhaus, codificando la rueda de color de 12 matices y los siete tipos de contraste de color que aún se enseñan en las escuelas de diseño hoy. Pantone (1963) introdujo el Pantone Matching System (PMS), convirtiendo la comunicación de color entre diseñadores e impresores en un catálogo numerado, un número Pantone significaba exactamente el mismo color en cualquier impresor del mundo que estuviera suscrito al sistema. La pila de color web hereda de todas estas tradiciones: Newton nos da el espectro visible, Maxwell las primarias aditivas, Itten el vocabulario de escuela de diseño de esquemas complementarios y análogos, Pantone el hecho práctico de que un número puede representar una experiencia perceptual.

Accesibilidad: contraste WCAG en lo que sea que elijas

Una vez que tienes un color, necesitas saber si puedes poner texto encima. El criterio de éxito WCAG 2.1 1.4.3 (Contraste, Mínimo) requiere un ratio de contraste de 4.5:1 para texto normal y 3:1 para texto grande (definido como 18pt / 24 píxeles CSS regular, o 14pt / 19 píxeles CSS negrita). El ratio de contraste se calcula a partir de la luminancia relativa: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 el más oscuro, y la luminancia es una suma ponderada de los canales R, G, B gamma-decodificados con pesos 0.2126, 0.7152 y 0.0722 (coincidiendo con la sensibilidad del ojo humano a esas longitudes de onda). WCAG 2.1 SC 1.4.6 (Mejorado) eleva la barra a 7:1 normal / 4.5:1 grande para conformidad AAA. WCAG 2.1 SC 1.4.11 cubre el contraste no textual (componentes de UI, indicadores de foco, objetos gráficos requeridos para comprensión) a 3:1. El más nuevo APCA (Advanced Perceptual Contrast Algorithm) es un reemplazo en etapa de investigación que coincide mejor con el contraste percibido para texto de cuerpo y está siendo evaluado para WCAG 3, devuelve un valor Lc direccional donde ±60 es el equivalente aproximado del 4.5:1 de WCAG. Siempre verifica pares de colores contra la fórmula de contraste real, no tu ojo; los diseñadores consistentemente sobreestiman cuán legibles son los emparejamientos de bajo contraste.

La honesta advertencia de impresión: el CMYK ingenuo no es CMYK real

La simple fórmula K = 1 − max(R,G,B) que cada convertidor de navegador usa es matemáticamente autoconsistente, el viaje de ida y vuelta RGB → CMYK → RGB devuelve exactamente el mismo RGB, módulo punto flotante. Pero no describe cómo cualquier prensa de impresión real reproducirá ese color en papel. Una verdadera conversión RGB-a-CMYK necesita tres cosas que esta herramienta no puede entregar: un perfil ICC objetivo (definiendo la combinación impresora + papel, el papel recubierto absorbe la tinta de manera diferente al no recubierto, y las prensas comerciales de alta gama ejecutan perfiles diferentes a las impresoras de inyección de tinta de escritorio), un intent de renderizado (perceptual, colorimétrico relativo, saturación, colorimétrico absoluto, intercambian cómo se aprietan los colores fuera del gamut), y un modelo colorimétrico real (CIE Lab como capa intermedia independiente del dispositivo, con tablas de búsqueda de perfil ICC completas en cada lado). Esto es lo que hace Adobe Photoshop detrás de su menú de conversión CMYK y lo que hace el software de preimpresión profesional (Esko, Heidelberg Prinect, Caldera) para trabajo de producción. La fórmula ingenua está bien para entender la relación entre los modelos de color aditivo y sustractivo, y útil para exploración de color de primer paso, pero si estás enviando archivos a un impresor comercial, haz la conversión en Photoshop (o la herramienta preferida de tu impresor) con el perfil ICC correcto cargado, la diferencia visible puede ser sustancial.

Colores nombrados y la historia de Rebeccapurple

CSS3 incluye 147 colores nombrados (148 si cuentas el alias aqua = cyan), heredados de una mezcla de los 16 colores nombrados originales de HTML 4 y la lista más larga del sistema X11. El color nombrado más recientemente añadido tiene una historia. El 7 de junio de 2014, la hija de Eric Meyer, defensor de los estándares web, Rebecca, murió de una forma agresiva de cáncer cerebral al día siguiente de su sexto cumpleaños. El color favorito de Rebecca era el morado. En cuestión de días, los miembros del CSS Working Group, liderados por el editor Tab Atkins Jr., propusieron añadir rebeccapurple (#663399) a la especificación CSS Color Level 4 como color nombrado, en su memoria. El color fue añadido en junio de 2014 y se lanzó en los navegadores poco después. El valor hex fue específicamente elegido como el valor que el propio Eric Meyer había usado en su sitio web. rebeccapurple está ahora en la tabla de colores nombrados de cada navegador, el único color conmemorativo en la especificación CSS, y un recordatorio de que las especificaciones técnicas secas de la web están escritas por personas que se dan cuenta cuando uno de ellos está de luto.

Preguntas frecuentes

¿Qué formato debería usar en CSS?

Los tres formatos principales funcionan en CSS moderno. HEX es el más compacto y ampliamente usado, ideal para colores estáticos donde has elegido un valor una vez y quieres copiarlo a todas partes. RGB es útil cuando necesitas calcular valores programáticamente o trabajar con datos de imagen (la API canvas habla RGB nativamente). HSL es lo mejor cuando quieres crear variaciones de color del sistema de diseño, ajustar luminosidad o saturación mientras mantienes el matiz bloqueado, que es como la paleta de colores de Tailwind construye sus rampas completas. Para sistemas de diseño de 2026, OKLCH (en CSS Color Level 4) es cada vez más la respuesta correcta para trabajo nuevo, interpola perceptualmente suave entre dos colores, lo cual importa para gradientes y generación de rampas suaves.

¿Cuál es la diferencia entre #FFF y #FFFFFF?

El hex de tres dígitos es taquigrafía donde cada dígito se duplica: #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA. Ambos son CSS válidos pero la forma de seis dígitos soporta los 16,777,216 colores sRGB mientras la forma de tres dígitos solo soporta 4,096 (cada canal restringido a 16 valores distintos). El hex de tres dígitos es conciso pero ligeramente limitado; seis dígitos es la paleta sRGB completa. CSS Color Module Level 4 también define formas de cuatro y ocho dígitos (con alpha), donde #F008 se expande a #FF000088 y #F00 se expande a #FF0000.

¿Puedo convertir colores con transparencia (alpha)?

Esta herramienta se enfoca actualmente en colores opacos. Para alpha, CSS soporta rgba(r, g, b, a), hsla(h, s%, l%, a) y hex de 8 dígitos (#RRGGBBAA) como notaciones separadas; CSS Color Level 4 también te permite escribir rgb(r g b / a%) y hsl(h s% l% / a%) con un alpha separado por barra inclinada. La forma hex de 8 dígitos está disponible en baseline desde aproximadamente 2017 (Chrome 62, Firefox 49, Safari 10).

¿Mi conversión CMYK coincidirá con lo que sale de la impresora?

Probablemente no exactamente. Las matemáticas simples que esta herramienta usa son colorimétricamente autoconsistentes (RGB → CMYK → RGB devuelve el mismo RGB) pero no tienen en cuenta el perfil ICC de tu combinación específica de impresora + papel, el intent de renderizado (perceptual, colorimétrico relativo, etc.) o la característica de ganancia de punto de la prensa. Para trabajo destinado a impresión, haz la conversión CMYK final en Photoshop o la herramienta preferida de tu impresor con el perfil ICC correcto cargado, la diferencia visible entre una conversión ingenua y una consciente del perfil puede ser sustancial, especialmente para rojos y azules saturados en el borde del gamut CMYK.

¿Qué hay de OKLCH y los espacios de color CSS modernos?

El CSS moderno soporta oklab(), oklch(), lab(), lch() y color(display-p3 ...) para trabajo con gamut más amplio y color perceptualmente uniforme. El soporte de navegador para esos es baseline desde aproximadamente 2023 (Safari 16.4, Chrome 111, Firefox 113 para oklch(); color() con espacios nombrados se lanzó ligeramente antes en Safari). Aún no se muestran en este convertidor, en parte porque las matemáticas son más difíciles de mostrar en forma compacta (Lab tiene ejes con signo que no mapean a un control deslizante 0-100%) y en parte porque la mayoría de los flujos de producción actuales todavía apuntan a sRGB. Si estás trabajando en un sistema de diseño moderno que usa OKLCH (Tailwind CSS v4, por ejemplo), usa las herramientas de ese sistema para generación de color; este convertidor es la respuesta correcta para trabajo sRGB legacy.

¿Se envían mis datos a algún lugar?

No. La conversión de color es aritmética pura, no hay nada que el servidor pueda hacer que tu navegador no pueda. Cada conversión se ejecuta localmente en JavaScript. Puedes verificarlo en la pestaña Red de DevTools mientras cambias el color: no hay solicitudes salientes. Desconecta la página (modo avión) después de que cargue y el convertidor seguirá funcionando.

Herramientas relacionadas