Methodology
Metodología de color
sRGB en todo momento. HEX, RGB, HSL, HSV son etiquetas diferentes para el mismo color.
By Buğra SözeriPublished
El clúster de Color gestiona conversiones entre cuatro representaciones del mismo color subyacente: HEX (#FF6B35), RGB (255, 107, 53), HSL (16°, 100%, 60%) y HSV (16°, 79%, 100%). Las cuatro describen un color en el mismo espacio de color: sRGB, por lo que las conversiones son reetiquetados algebraicos, no remapeos perceptuales.
sRGB como ancla universal
sRGB (Standard RGB) es el espacio de color predeterminado de la web, definido por la norma IEC 61966-2-1 en 1999. Especifica los primarios exactos de rojo, verde y azul que se combinan para producir cualquier color visualizable, además de una curva gamma no lineal que aproxima la respuesta de un monitor CRT típico. Las LCD y OLED modernas emulan esta curva.
Cada color HEX, cada valor rgb(…), cada hsl(…) por defecto en CSS asume sRGB a menos que se etiquete de otra manera. Los formatos de gama amplia más recientes (Display P3, Rec.2020) existen pero requieren una aceptación explícita mediante color(display-p3 …) o similar: fuera del ámbito de este clúster.
Las matemáticas de conversión
HEX ↔ RGB
Conversión de base directa: cada par de dígitos hexadecimales es un byte (0-255). #FF6B35 ↔ rgb(255, 107, 53) exactamente, sin pérdida de precisión. El HEX de tres dígitos (#F63) es la abreviatura de #FF6633.
RGB → HSL
Convertir R, G, B al rango [0, 1]. Encontrar los canales máximo y mínimo. Luminosidad L = (max + min) / 2. La saturación depende de si L < 0.5 o no. El matiz se calcula a partir de qué canal es el máximo y las diferencias relativas entre canales.
La fórmula completa es estándar y está implementada exactamente en nuestra biblioteca. El matiz se reporta en grados [0, 360°); la saturación y la luminosidad en porcentaje [0, 100].
RGB → HSV
Lógica similar. Valor V = max. Saturación S = (max − min) / max cuando max ≠ 0. El matiz es idéntico al matiz HSL.
HSL y HSV difieren en el eje de saturación. Un color al 100% de saturación HSV está completamente saturado; al 100% de saturación HSL solo está completamente saturado cuando L = 0.5. Los diseñadores prefieren HSL para ajustar tintes y sombras; los editores de imagen suelen exponer HSV (Photoshop lo llama “HSB” por “brillo”).
Precisión de ida y vuelta
HEX ↔ RGB es bit-exacto. Ambas direcciones hacen la ida y vuelta sin pérdidas.
RGB ↔ HSL / RGB ↔ HSV implican aritmética de punto flotante. La precisión de ida y vuelta está limitada por la salida RGB de 8 bits: en el peor caso se redondea un canal ±1 de 255 (aproximadamente 0.4%). Visualmente esto es invisible; para trabajo de color crítico evite la ida y vuelta si puede.
Detalles del algoritmo: HSL y HSV completos
La biblioteca de conversión incluye estas fórmulas literalmente; se reproducen aquí para que el álgebra sea visible. Entradas normalizadas R, G, B ∈ [0, 1] con M = max(R, G, B), m = min(R, G, B), croma C = M − m:
L = (M + m) / 2S_HSL = C / (1 − |2L − 1|) si C ≠ 0, si no 0V = MS_HSV = C / M si M ≠ 0, si no 0
El matiz es el mismo eje en ambos modelos:
H = 60° × ((G − B) / C mod 6) si M = RH = 60° × ((B − R) / C + 2) si M = GH = 60° × ((R − G) / C + 4) si M = B
La linealización de sRGB, aplicada al calcular la luminancia para el contraste o al interpolar perceptualmente, es la transferencia por tramos de IEC 61966-2-1: lineal = c/12.92 si c ≤ 0.04045, si no ((c + 0.055)/1.055)^2.4. La ida y vuelta a través de lineal y de regreso es bit-exacta para la cuadrícula sRGB de 8 bits porque la inversa por tramos está bien definida.
Fuentes y referencias
Cada fórmula de esta página proviene de una especificación primaria o de una publicación revisada por pares: primarios y gamma sRGB de IEC 61966-2-1, sintaxis CSS hex/rgb/hsl de W3C CSS Color Module Level 4, conversión RGB↔HSV del artículo de Smith de 1978, fórmula de contraste de WCAG 2.2. El bloque de fuentes al pie de esta página lista las versiones disponibles públicamente usadas como referencia durante las pruebas de la biblioteca.
Supuestos y limitaciones
- sRGB en todo momento. Las entradas sin etiqueta de espacio de color explícita se asumen sRGB. Las entradas P3 / Rec.2020 / Adobe RGB no se detectan automáticamente y se interpretarían incorrectamente si se pasaran como RGB sin procesar.
- RGB entero de 8 bits. La entrada HEX se limita a [0, 255] por canal. Las canalizaciones HDR de 10 o 12 bits necesitan un formato más amplio que #RRGGBB.
- HSL/HSV son reparametrizaciones de conveniencia, no espacios perceptuales. Cambios numéricos iguales en H, S o L no se corresponden con cambios perceptuales iguales: use OKLCH o CIELAB para trabajo perceptualmente uniforme.
- Sin adaptación cromática. Convertir entre espacios con diferentes puntos blancos (D65 ↔ D50) requiere una transformación Bradford o CAT02 que no aplicamos.
- CMYK requiere perfiles ICC. Las aproximaciones algebraicas de CMYK ≈ RGB en la web son uniformemente incorrectas para impresión; no emitimos un valor CMYK en absoluto.
- El alfa es de paso, no premultiplicado.La ida y vuelta a través de HSL/HSV preserva el canal alfa pero no aplica el alfa a los componentes de color.
Lo que no gestionamos
- Espacios de gama amplia (P3, Rec.2020): fuera del alcance.
- Espacios perceptualmente uniformes (Lab, LCH, Oklab): a veces solicitados; el álgebra es más compleja. Puede publicarse como herramienta separada más adelante.
- CMYK: espacio de color específico para impresión; las conversiones requieren perfiles ICC, no solo álgebra. Véase nuestra comparación RGB vs CMYK.
- Alpha: RGB→HSL/HSV preserva el alfa como paso a través. HEX con alfa (#RRGGBBAA) es compatible.
Frequently asked questions
- ¿Qué espacio de color usa Convertitive?
- Todas las conversiones usan sRGB (IEC 61966-2-1:1999) como espacio de color canónico. HEX, RGB, HSL y HSV son todas representaciones de coordenadas diferentes de la misma gama sRGB: convertir entre ellas es sin pérdidas. Los espacios de gama amplia (Display P3, Rec. 2020) no están soportados actualmente; siempre se asume que los valores son sRGB.
- ¿Qué fórmula usa Convertitive para la conversión RGB ↔ HSL?
- El algoritmo estándar de Foley & van Dam (Computer Graphics: Principles and Practice, 1990). Dado RGB normalizado (r, g, b ∈ [0,1]): L = (max + min) / 2; S = (max − min) / (1 − |2L − 1|) cuando L ≠ 0 o 1; H se calcula según qué canal es el máximo y las distancias relativas entre canales. La inversa usa el mismo término de croma c = (1 − |2L − 1|) × S y el mapeo de matiz a RGB de seis sectores.
- ¿Qué tan precisa es la conversión HEX ↔ RGB?
- Exacta y sin pérdidas. Un código HEX como #FF6B35 se mapea a rgb(255, 107, 53) mediante la descodificación simple en base 16 de cada par de bytes: sin punto flotante involucrado. La única pérdida de precisión ocurre al convertir a HSL o HSV, que usan división en punto flotante y regresan a enteros de 8 bits con un error de redondeo de ±1 unidad en casos extremos.
- ¿Cuáles son las limitaciones del conversor de color?
- Tres limitaciones principales: (1) solo sRGB: los valores de gama amplia Display P3 u OKLCH no están soportados; (2) 8 bits por canal: las representaciones HDR o de color de 10 bits están fuera de rango; (3) HSL/HSV son acromáticos (matiz indefinido) cuando S = 0, por lo que el conversor muestra H = 0 para grises, consistente con CSS Color Level 4 §4.2.
- ¿De dónde viene la fórmula de luminancia relativa?
- La fórmula de luminancia relativa L = 0.2126 R + 0.7152 G + 0.0722 B (con linealización mediante la función de transferencia sRGB) está definida en WCAG 2.2 §1.4.3 (y su referencia normativa ICC.1:2010). Se usa en el cálculo de las relaciones de contraste WCAG. Los coeficientes reflejan la sensibilidad del sistema visual humano a los primarios sRGB según ICC.1:2010.
Related
- Selector de color
- Todos los conversores de color
- Formatos de color CSS: hex, RGB, HSL, OKLCH
- Contraste de color para accesibilidad
- DPI vs PPI vs densidad
- RGB vs CMYK
- Glosario: sRGB
- Glosario: Gamma
- Glosario: Croma
- Glosario: Temperatura de color
- Glosario: Delta E
- Glosario: Perfil ICC
- Glosario: Gama de colores
- Glosario: P3
Published May 14, 2026