Formatos de color
Controles deslizantes RGB
Selector de color HEX, RGB y HSL — Paleta de colores online
Pulsa el swatch para abrir el selector de color del SO (o arrastra los sliders RGB para ajuste fino) y la página muestra cinco formatos de salida simultáneamente: HEX (el #RRGGBB que pegas en herramientas de diseño), RGB (la función rgb(r,g,b) que CSS entiende), HSL (la función matiz/saturación/luminosidad — más cómoda que HEX para editar paletas a mano deslizando el matiz mientras mantienes saturación y luminosidad fijos), triplete RGB pelado (para sitios que solo quieren números sin función envolvente) y una declaración de propiedad CSS personalizada lista para pegar (`--color: #...;`). Copia con un clic por formato. Útil al muestrear un color de marca desde un código hex y necesitar pegarlo como RGB en una herramienta distinta, al diseñar una paleta ajustando el matiz HSL mientras mantienes saturación y luminosidad fijos, o al extraer un único color de un sistema de diseño a una hoja de estilos.
Sobre esta herramienta
La conversión HEX-a-RGB es extracción de bits directa: el hex se interpreta como entero de 24 bits, luego `(n >> 16) & 255`, `(n >> 8) & 255`, `n & 255` para extraer los canales rojo, verde, azul. RGB-a-HSL sigue el algoritmo descrito por Joblove y Greenberg en su artículo SIGGRAPH de 1978 "Color spaces for computer graphics" (Computer Graphics 12(3), 20-25), estandarizado en W3C CSS Color Module Level 3 (Recomendación 19 de junio de 2018): divide cada canal por 255, encuentra el máximo y mínimo, calcula la luminosidad como (max + min) / 2, deriva la saturación de forma distinta por encima y por debajo del 50 % de luminosidad y calcula el matiz a partir de qué canal es el máximo. La salida HSL usa la forma porcentaje-grados que CSS espera. La salida de propiedad CSS personalizada se formatea como `--color: #RRGGBB;` porque esa es la forma canónica de declaración — para usarla, métela dentro de `:root { ... }` o cualquier selector y referénciala en otro sitio como `var(--color)`. Útil para tokens de color de sistemas de diseño, swatches de modo oscuro/claro, generación programática de color, auditorías de color de marca (pega un hex de un competidor, mira el HSL para entender si es brillante y saturado frente a apagado y terroso), depuración de contraste de color y cualquier momento que necesites un color en un formato distinto al que lo conseguiste.
- Selector de color nativo del SO + sliders RGB manuales para ajuste fino
- Cinco formatos de salida: HEX, RGB(), HSL(), triplete RGB pelado, propiedad CSS
- Extracción de bits HEX-a-RGB (n >> 16/8 & 255 — sin parseo string por canal)
- RGB-a-HSL vía algoritmo de Joblove y Greenberg 1978 SIGGRAPH (W3C CSS Color 3)
- Vista previa swatch en vivo se actualiza mientras ajustas
- Copia con un clic por formato con flash de confirmación
- Propiedad CSS personalizada formateada lista para pegar en :root
- Reactivo — los cinco formatos se recalculan con cada cambio
- Sin subida de archivos — tu color se queda en el navegador
- Útil para tokens de diseño, paletas modo oscuro, auditorías de marca, contraste
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL? ¿Describen colores distintos?
Son tres notaciones del mismo color sRGB. HEX (`#8B5CF6`) empaqueta los tres valores de canal 0–255 en seis dígitos hexadecimales y es el formato canónico de color en CSS que los navegadores parsean nativamente desde los años 90. RGB (`rgb(139, 92, 246)`) escribe los mismos números en decimal. HSL (`hsl(258°, 90%, 66%)`) recodifica el mismo color como matiz (0–360 grados alrededor de la rueda de color), saturación (0–100 % cuánto de vivo frente a gris) y luminosidad (0–100 % cuánto se acerca a blanco o negro). HSL lo publicaron Joblove y Greenberg en su artículo SIGGRAPH de 1978 "Color spaces for computer graphics" (Computer Graphics 12(3), 20–25), y CSS Color Module Level 3 (Recomendación W3C de 19 de junio de 2018) estandarizó la notación `hsl()` que los navegadores parsean hoy. Los tres formatos hacen round-trip exacto dentro de la gama sRGB de 8 bits.
¿Cómo se mide el contraste entre texto y fondo? ¿Qué significa 4,5:1?
W3C WCAG 2.1 Success Criterion 1.4.3 define la ratio de contraste como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa según la definición sRGB (IEC 61966-2-1:1999) es L = 0,2126 · R_lineal + 0,7152 · G_lineal + 0,0722 · B_lineal — el coeficiente del verde domina porque la respuesta de los conos del ojo humano alcanza su pico hacia los 555 nm. El piso de 0,05 modela el reflejo de visualización típico según la especificación sRGB de IEC. WCAG 2.1 exige un mínimo de 4,5:1 para texto normal y 3:1 para texto grande (18 pt regular o 14 pt negrita) en nivel AA; AAA sube las barras a 7:1 y 4,5:1. SC 1.4.11 Non-text Contrast (mantenido sin cambios en WCAG 2.2 del 5 de octubre de 2023) extiende 3:1 a componentes de UI y objetos gráficos (botones, anillos de foco, líneas de gráfico).
¿Cuándo conviene editar una paleta en HSL en lugar de HEX o RGB?
HSL resulta más cómodo de editar a mano cuando el objetivo es variar una dimensión perceptual manteniendo las otras constantes. Rotar el matiz de 258° a 0° da el mismo brillo y saturación en un color distinto — el movimiento "alrededor de la rueda" que HEX deja opaco. Bajar la luminosidad de 66 % a 30 % da una versión más oscura del mismo matiz/saturación, útil para oscurecer estados hover, derivar muestras de modo oscuro o generar una escala de tintes. La contrapartida: HSL no es perceptualmente uniforme, así que un desplazamiento de matiz de 10° desde amarillo se ve mayor que uno de 10° desde azul, y valores iguales de luminosidad no producen el mismo brillo percibido. CSS Color Module Level 4 (Borrador de Recomendación Candidata W3C de 2 de mayo de 2026) añade `oklch()` y `oklab()` (Björn Ottosson 2020) que corrigen ese hueco de uniformidad.
¿Qué es sRGB y por qué los colores se ven distintos en mi móvil y en mi monitor?
sRGB (IEC 61966-2-1:1999, publicada en octubre de 1999) es el espacio de color por defecto que la web asume desde finales de los 90 — punto blanco D65, una curva de transferencia no lineal con gamma aproximada de 2,2 (precisamente: lineal bajo 0,04045 y ((R' + 0,055) / 1,055)^2,4 por encima) y una gama triangular más estrecha que la que reproducen las pantallas modernas. Un color codificado como `#FF0000` es el rojo más brillante que sRGB puede representar — en una pantalla calibrada a sRGB el resultado se ve igual entre dispositivos; en un panel Display-P3 de gama amplia (iPhones desde 2016, MacBooks recientes, televisores OLED) el mismo rojo numérico se renderiza como rojo sRGB codificado a 8 bits salvo que la página opte por una gama más amplia vía `color(display-p3 …)`. CSS Color Module Level 4 añadió la función `color()` para solicitar espacios de color explícitos (Display-P3, ProPhoto RGB, Rec2020) para colores que caen fuera de sRGB.
¿`<input type="color">` produce un formato que se pega directamente en CSS?
Sí. El WHATWG HTML Living Standard define el `value` de `<input type="color">` como una cadena de siete caracteres que empieza con `#` seguida de seis dígitos hex en minúscula (por ejemplo `#8b5cf6`) en el espacio de color Limited sRGB — 8 bits por canal RGB, sin alpha. Esa cadena es un `<hex-color>` CSS válido, así que se pega tal cual en declaraciones `color: …;` o `background: …;`. El soporte en navegadores es universal entre Chrome, Firefox, Safari y Edge a mayo de 2026. Los navegadores móviles suelen delegar en el selector nativo del SO; Chrome y Edge de escritorio incorporan un selector con pestañas HSL/HEX/RGB; Firefox usa el selector del SO en Windows y macOS. Los atributos `colorspace` y `alpha` se añadieron a la especificación HTML en 2024 para permitir selección con gama más amplia y canal alpha, con despliegue en navegadores aún en progreso.
Fuentes (6)
- Joblove, G. H., & Greenberg, D. (1978). Color spaces for computer graphics — first published description of the HSL (Hue, Saturation, Lightness) model alongside HSV, defined to expose color in dimensions matching how illustrators describe pigment mixing (lightness centred at L = 0.5 so achromatic greys sit at the midpoint, distinguishing HSL from Smith's HSV which puts white at V = 1 and primaries at V = 1). Computer Graphics, vol. 12, no. 3, pp. 20–25 (Proceedings of the 5th annual ACM SIGGRAPH conference, August 1978).
- World Wide Web Consortium (W3C) (2018). CSS Color Module Level 3 — standardised the `hsl()`, `hsla()`, `rgba()` functional notations and the percentage-degrees form (`hsl(h, s%, l%)`) that browsers and design tools parse today; defines the 6-digit `#RRGGBB` hex syntax along with `#RGB` shorthand. W3C Recommendation, 19 June 2018 (replaces the 2003 Working Draft).
- World Wide Web Consortium (W3C) (2026). CSS Color Module Level 4 — extends Level 3 with perceptually uniform color functions: `oklch()` and `oklab()` (Björn Ottosson, 2020 perceptual-uniformity refinement of CIE Lab), `lab()` and `lch()` (CIE 1976 L*a*b*), `hwb()` (Hue-Whiteness-Blackness, simpler than HSL for designers), and the `color()` function for Display-P3 / ProPhoto / Rec2020 gamuts beyond sRGB. W3C Candidate Recommendation Draft, 2 May 2026 (URL slug CRD-css-color-4-20260502); first reached Candidate Recommendation 5 July 2022.
- WHATWG (Web Hypertext Application Technology Working Group) (2026). HTML Living Standard — `<input type="color">` represents a color well control; its `value` is the seven-character lowercase serialization of a simple color (`#` followed by six hex digits, e.g. `#8b5cf6`), restricted to 8 bits per RGB component in the Limited sRGB color space; the WICG Async Clipboard API powers the one-click copy. WHATWG HTML Living Standard, continuously published at html.spec.whatwg.org; input type=color section (§4.10.5.1.15 as of May 2026).
- International Electrotechnical Commission (IEC) (1999). IEC 61966-2-1:1999 Multimedia systems and equipment — Colour measurement and management, Part 2-1: Default RGB colour space (sRGB) — defined the gamut, white point (D65), and the non-linear transfer function (γ ≈ 2.2 piecewise: linear below 0.04045, ((R'+0.055)/1.055)^2.4 above) that every browser, OS color picker, and CSS implementation treats as the default unless a wider color space is requested explicitly. International Electrotechnical Commission, published October 1999; Amendment 1 published January 2003 (adds bg-sRGB extended-gamut variant).
- World Wide Web Consortium (W3C) (2018). WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) — text contrast ratio computed as (L1 + 0.05) / (L2 + 0.05) where L is sRGB relative luminance L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear; minimum 4.5:1 for normal text and 3:1 for large text (18 pt / 14 pt bold); the 0.05 floor models typical viewing flare from the IEC sRGB specification. W3C Recommendation 5 June 2018; SC 1.4.11 Non-text Contrast (carried into WCAG 2.2 Recommendation 5 October 2023) extends 3:1 to UI components and graphical objects.
Son las publicaciones originales en las que se basan las fórmulas de esta herramienta. Localízalas con el nombre de la revista y el año en Google Scholar o PubMed.
Por Marco B. ·