Convierta cualquier código de color hex a RGB en su navegador — admite hex de 3 dígitos, 6 dígitos y 8 dígitos con alfa. Gratis, instantáneo, sin registro, sus colores nunca salen de la página.
Tintes claros
Matices oscuros
Tonos
Armonías
— — — — — Un convertidor HEX a RGB es una pequeña utilidad que convierte un código de color hex (`#FF5733`) en los tres valores enteros de canal que representa (`rgb(255 87 51)`). Hex y RGB son los dos formatos sobre los que se ha construido cada hoja de estilos web, herramienta de diseño y canalización de píxeles de imagen desde finales de los 90, y la conversión entre ellos es la operación más común en herramientas de color. Hex es el formato escueto de copy-paste que Figma, Sketch, Photoshop y cada PDF de guía de marca exportan por defecto — una cadena de 6 caracteres en base 16 que cabe cómodamente en una propiedad personalizada CSS y se lee de un vistazo una vez que sus ojos aprenden los patrones. RGB es el formato direccionado por canales que esperan las APIs de hardware, las llamadas de dibujo en canvas, la manipulación de búfer de imagen, los atributos de color de OpenGL y la mayoría de SDKs gráficos — tres enteros 0-255 separados (o flotantes normalizados 0-1) que se asignan directamente a los subpíxeles rojo, verde y azul de un LCD o a los fósforos de un CRT. Convertir entre ellos es mecánico: divida el hex en tres pares de 2 dígitos y lea cada par como un número en base 16. Esta herramienta ejecuta esa conversión en vivo mientras escribe, sin botón "Convertir" que pulsar, y expone cada otro formato de color común (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, además de los 148 colores CSS con nombre) junto con la salida RGB de forma gratuita.
**El propio formato RGB merece una mirada más detenida.** El sRGB estándar de 24 bits codifica cada canal como un entero sin signo de 8 bits de 0 a 255 — 256 valores por canal, 16 777 216 colores en total (256³). El estándar de referencia es IEC 61966-2-1, la especificación sRGB de 1996 anclada a los primarios de fósforos CRT que dominaban las pantallas en ese momento. CSS expone RGB a través de la función `rgb()` en tres variantes sintácticas. La forma original de CSS 1 usa separadores por coma: `rgb(255, 87, 51)`. CSS Color 4 (Candidate Recommendation del W3C desde 2022) añadió una forma moderna con espacios: `rgb(255 87 51)`, con un canal alfa opcional tras una barra: `rgb(255 87 51 / 0.5)`. Ambas formas son intercambiables y llegan en cada navegador evergreen. RGB también acepta canales en porcentaje: `rgb(100% 33% 20%)` es equivalente a `rgb(255 87 51)`, a veces preferido en hojas de estilo escritas a mano por legibilidad. Específicamente para el alfa hay una función `rgba()` separada por compatibilidad heredada — `rgba(255, 87, 51, 0.5)` es la forma canónica que funciona en todas partes hasta IE 9. CSS Color 4 también añadió una sintaxis `color(srgb 1 0.341 0.2)` para direccionamiento sRGB explícito, y funciones paralelas `color(display-p3 ...)` y `color(rec2020 ...)` para valores de gama amplia que el hex no puede codificar.
Las matemáticas de conversión van en ambas direcciones limpiamente. **HEX a RGB**: analice el hex de 6 dígitos `#RRGGBB` como tres números en base 16 de 2 dígitos vía `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Para la abreviación de 3 dígitos `#RGB`, expanda cada dígito duplicándolo (`#F73` → `#FF7733`) antes de analizar — esto *no* es un relleno a la izquierda. Para el alfa de 8 dígitos `#RRGGBBAA`, analice el par final de la misma manera y divida por 255 para obtener el flotante alfa 0-1. Para la abreviación alfa de 4 dígitos `#RGBA`, expanda cada dígito primero (`#F738` → `#FF773388`). **RGB a HEX** es lo inverso: para cada canal, llame a `value.toString(16).padStart(2, '0')` para obtener el par hex de 2 dígitos (el `padStart` importa — sin él, el valor de canal 5 se serializaría como `'5'` en lugar de `'05'`, produciendo hex inválido), luego concatene. Ambas direcciones son bit-exactas: 16² = 256, coincidiendo exactamente con el rango de bytes 0-255 que ocupa cada canal, así que un viaje de ida y vuelta HEX → RGB → HEX produce la entrada original textualmente sin deriva de coma flotante.
**¿Por qué hex frente a RGB?** Hex es más corto, nativo de las herramientas de diseño, y el formato que su ojo aprende con el tiempo — la mayoría de desarrolladores front-end pueden identificar `#3b82f6` como el blue-500 de Tailwind a simple vista. RGB es direccionamiento explícito de canales, más fácil de calcular en JavaScript, y el único de los dos que acepta alfa y porcentajes limpiamente. Los dos formatos coexisten porque resuelven problemas distintos. Las hojas de estilo web y las guías de marca se inclinan por hex porque el coste de copy-paste domina. Las llamadas de dibujo en canvas, el procesamiento de imágenes, las APIs de tiras LED de hardware, y cualquier código que haga aritmética por canal se inclinan por RGB porque indexar en una tupla supera a cortar una cadena. El cambio entre ellos sucede docenas de veces en un proyecto web típico — pegue un hex de Figma, conviértalo a enteros RGB para una llamada `ctx.fillStyle = ...`, conviértalo de vuelta a hex para una definición de variable CSS.
El flujo HEX → RGB de esta herramienta es una dirección de una familia de 5 radios que comparten el mismo convertidor de color unificado subyacente. El convertidor de color unificado dedicado es el centro — muestra los 9 formatos editables simultáneamente y es la herramienta correcta cuando su flujo de trabajo necesita más que solo hex y RGB. Los radios de dirección única apuntan a intenciones específicas de búsqueda en Google: el inverso convertidor RGB a hex para la dirección inversa, el convertidor hex a HSL para el espacio cognitivo heredado del diseñador, el convertidor hex a OKLCH para sistemas de diseño modernos perceptualmente uniformes (Tailwind v4 y shadcn ahora vienen por defecto en OKLCH), y el convertidor hex a CMYK para aproximaciones de preparación de imprenta. Los cinco radios y el centro comparten el mismo motor de análisis y las mismas matemáticas de conversión, así que los resultados están garantizados idénticos a lo largo de la familia. Cada conversión se ejecuta localmente en su navegador — sus códigos hex nunca se suben, nunca se registran, y se disparan cero peticiones de red mientras escribe. Verifique en DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3 dígitos `#F73`, alfa de 4 dígitos `#F738`, 6 dígitos `#FF5733`, alfa de 8 dígitos `#FF5733CC`, más la variante sin `#` para cada una (`F73`, `FF5733`, etc.). El parser normaliza todas ellas en la misma tupla RGB interna antes de mostrar, así que puede pegar la forma que use su fuente sin expandir manualmente la abreviación primero. La capitalización también se normaliza — `#ff5733` y `#FF5733` producen una salida idéntica.
El campo RGB expone el valor en la forma moderna de CSS Color 4: `rgb(255 87 51)` para colores opacos, `rgb(255 87 51 / 0.5)` para los que tienen alfa. Ambas formas funcionan en cada navegador evergreen (Chrome 65+, Safari 13+, Firefox 52+). La forma heredada con comas `rgb(255, 87, 51)` está a un reemplazo mecánico de distancia si su objetivo la necesita; la sintaxis moderna es preferida en código nuevo porque se alinea con las otras sintaxis funcionales de CSS Color 4.
HEX → RGB es aritmética de entero a entero: `parseInt(hex, 16)` devuelve un valor exacto 0-255 con cero involucración de coma flotante. La dirección inversa (`.toString(16).padStart(2, '0')`) es igualmente exacta. Un viaje de ida y vuelta HEX → RGB → HEX → RGB → HEX produce la entrada original textualmente, indefinidamente. La fuente de verdad interna OKLCH significa que incluso la cadena más larga HEX → RGB → HSL → OKLAB → HEX se mantiene bit-estable, algo que los convertidores heredados que enrutan a través de HSL no garantizan.
El hex de 8 dígitos y 4 dígitos con alfa (`#RRGGBBAA` y `#RGBA`) se analiza correctamente. El par final se asigna a un flotante alfa 0-1: `00` → 0, `80` → 0.502, `FF` → 1. La salida usa la sintaxis con barra de CSS Color 4 (`rgb(255 87 51 / 0.5)`) por defecto; la forma heredada `rgba(255, 87, 51, 0.5)` está a un reemplazo de distancia. Útil para migración de tokens de diseño donde los valores alfa pueden haber estado enterrados en códigos hex de 8 dígitos.
El mismo hex que pega también impulsa HSL, HSV, HWB, OKLCH, OKLAB, CMYK y el color CSS con nombre más cercano — todos visibles de un vistazo en la misma página. Nunca está atrapado en hex → RGB solamente. Si un compañero de equipo necesita la tripleta OKLCH para un token de Tailwind v4, el color con nombre más cercano para prosa de documentación, o la aproximación CMYK para un presupuesto de imprenta, los valores ya están ahí con sus propios botones Copiar.
Pase un hex y la fila de contraste inmediatamente lo puntúa contra blanco y negro usando WCAG 2.1 (piso regulatorio: 4.5:1 para texto del cuerpo, 7:1 para AAA) y APCA Lc (sucesor propuesto de WCAG 3: objetivo `|Lc| ≥ 75` para texto del cuerpo). Útil cuando acaba de convertir un hex de marca a RGB y quiere verificar que realmente sea legible como color de texto del cuerpo antes de enviarlo.
Debajo del selector, la sección Copiar como código convierte el color actual en fragmentos listos para pegar para cinco plataformas: propiedad personalizada CSS (`--color-brand: rgb(255 87 51)`), token `@theme` de Tailwind v4, literal SwiftUI `Color(red:green:blue:)`, constante Jetpack Compose `Color(0xFFFF5733)`, Flutter `Color(0xFFFF5733)`. La sintaxis exacta que cada plataforma espera, lista para soltar en un catálogo de assets de iOS, archivo de tema de Android, o un `ThemeData` de Flutter.
Todo el análisis hex, la conversión RGB, la puntuación de contraste y la generación de paletas se ejecutan localmente en su navegador. Sus códigos hex nunca se transmiten, nunca se registran en ningún servidor, nunca se analizan. Cero peticiones de red mientras escribe — verifique en DevTools. Seguro para paletas de marca no anunciadas, tokens de diseño internos, mockups borrador bajo NDA, y cualquier otro trabajo de color confidencial.
El color actual se codifica en el hash de URL como `#hex=ff5733` automáticamente en cada cambio. Copie la URL, péguela en un hilo de Slack o en una issue de GitHub, y cualquiera que la abra aterrizará en el mismo hex con el mismo resultado RGB. El hash vive solo en su barra de direcciones y nunca se transmite al servidor (los navegadores no incluyen los fragmentos de URL en las peticiones HTTP), así que incluso compartir el enlace no filtra el color a ningún tercero.
El resultado por defecto de Google para "hex to rgb" — un formulario de una sola dirección con hex entrando, RGB saliendo, sin otros formatos visibles. Útil para búsquedas puntuales al llegar desde la búsqueda. Carece de OKLCH, comprobación de contraste, detección de gama, manejo de alfa, y la vista simultánea multi-formato. Esta herramienta gana en cada eje excepto el caso desnudo de conversión única.
Páginas SEO por color de larga trayectoria con metadatos profundos: conversiones, paletas, armonías, gradientes para cualquier hex que consulte. La UI está fechada (principios de los 2010), sin soporte OKLCH, sin contraste APCA, sin manejo de gama amplia. Fuerte para descubrimiento SEO de un hex específico vía Google; más débil para flujos de conversión activos donde escribir en una UX de campos unificados es más rápido.
Conmutador HEX/RGB/HSL amigable para principiantes en una página enfocada en enseñanza, omnipresente en los resultados de búsqueda. Sin OKLCH, sin manejo de alfa más allá de rgba, sin características avanzadas. Útil como referencia junto al contenido explicativo de W3Schools. Esta herramienta gana en cada otro eje: más formatos, matemáticas perceptuales, características de gama + contraste + CVD, exportación de código moderna para Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox y Safari DevTools todos vienen con un selector de color que convierte hex a RGB en línea cuando hace clic en una muestra de color en el panel CSS. Gratis, sin instalar, siempre disponible. Carece de OKLCH, carece de URLs compartibles, carece de exportación de código para plataformas no-web (SwiftUI, Compose). Recurra a DevTools cuando ya esté depurando CSS; recurra a esta herramienta cuando necesite salida multiplataforma.
Incluido con cada Mac desde OS X — pase el cursor sobre cualquier píxel y lea los valores RGB / hex / lineales. Excelente para muestrear colores de píxeles de cualquier aplicación en pantalla. No convierte valores hex pegados; es un muestreador de pantalla, no un convertidor. Use el botón EyeDropper en el selector de esta herramienta (solo navegadores Chromium) para la misma capacidad de muestreo en pantalla dentro del navegador.
Páginas SEO por color cubriendo muchos espacios (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Carece de soporte OKLCH moderno y de la UX de edición de campos unificados. Las páginas de contenido autogenerado se sienten algo granja-de-contenido pero los datos de conversión son correctos. Bueno para explorar metadatos de colores individuales vía Google; esta herramienta es más rápida para flujos activos.
#FF5733
Salida RGB: `rgb(255 87 51)`. El caso de uso clásico — un diseñador suelta un color de marca en Figma, usted hace captura, un cuentagotas le da el hex, y ahora necesita los enteros de canal para una llamada de dibujo en canvas, una tira LED por hardware, o matemáticas de píxeles contra un búfer de imagen. La sintaxis de CSS Color 4 con espacios mostrada es la forma moderna; la forma heredada con comas `rgb(255, 87, 51)` significa exactamente lo mismo y se soporta en todos los navegadores desde IE 3.
#3b82f6
Salida RGB: `rgb(59 130 246)`. El selector de color de Adobe (en Photoshop, Illustrator e InDesign) acepta enteros RGB en el rango 0-255 como entrada nativa — pegue 59 / 130 / 246 en las tres casillas de canal y habrá igualado exactamente el `blue-500` de Tailwind. Útil cuando un diseñador necesita maquetar un color web en una aplicación de maquetación con consciencia de imprenta, o cuando está muestreando colores de marca a una biblioteca de muestras para edición de imágenes.
#FF573380
Salida RGB: `rgb(255 87 51 / 0.5)`. El último par (`80`) decodifica como `128/255 ≈ 0.502`, expuesto como canal alfa vía la sintaxis con barra de CSS Color 4. La forma heredada equivalente es `rgba(255, 87, 51, 0.5)`, que sigue soportada en todas partes y es lo que esperan los preprocesadores antiguos. El hex de 8 dígitos llegó de forma nativa a todos los navegadores evergreen en 2018; antes de eso, el alfa tenía que expresarse a través de la función `rgba()`.
#F73
Salida RGB: `rgb(255 119 51)`. La especificación CSS define el hex de 3 dígitos como una abreviación donde cada dígito se duplica para formar el equivalente de 6 dígitos: `#F73` se expande a `#FF7733`, así que R = `FF` = 255, G = `77` = 119, B = `33` = 51. Esto *no* es un relleno a la izquierda — `#F73` **no** es `#000F73`. Muchos principiantes se equivocan aquí; el comportamiento de expansión de la herramienta deja la regla visible de un vistazo.
Tabla de referencia de los 10 códigos hex más convertidos y sus equivalentes RGB — primarios puros, secundarios puros, y dos colores de marca reales de la paleta de Tailwind.
Negro puro. Los tres canales a cero — la ausencia de luz emitida. Tripleta RGB (0, 0, 0).
#000000 → rgb(0 0 0) El negro puro en una pantalla rara vez es la elección de diseño correcta — pruebe `#111` o luminosidad perceptual OKLCH 0.1-0.15 para texto del cuerpo más suave.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Blanco puro. Los tres canales a su valor máximo (255). El color más brillante en sRGB.
#FFFFFF → rgb(255 255 255) Los fondos blancos puros pueden producir fatiga visual en entornos oscuros — considere `#fafafa` o luminosidad perceptual OKLCH 0.98 para alternativas más cálidas.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Rojo puro. Canal R al máximo, G y B a cero. El primero de los tres primarios sRGB.
#FF0000 → rgb(255 0 0) El rojo puro está altamente saturado y rara vez encaja en una paleta de marca — la mayoría de los colores "rojos" de marca están más cerca de #DC2626 o #E53935.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Verde puro. Canal G al máximo, R y B a cero. El color CSS con nombre `lime` (no `green`, que es #008000).
#00FF00 → rgb(0 255 0) La palabra clave CSS `green` se resuelve a #008000 (medio brillante), no a #00FF00 — una fuente frecuente de confusión. Use `lime` para el verde RGB puro.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Azul puro. Canal B al máximo, R y G a cero. El tercer primario sRGB.
#0000FF → rgb(0 0 255) El azul puro sobre un fondo blanco falla el contraste WCAG AA (3.7:1) — considere azules de marca más oscuros como #1D4ED8 (blue-700 de Tailwind) para texto del cuerpo.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Cian — verde y azul al máximo, rojo a cero. Uno de los tres secundarios sRGB. Color CSS con nombre `cyan` (o equivalentemente `aqua`).
#00FFFF → rgb(0 255 255) Cyan y aqua son sinónimos exactos en CSS — ambos se resuelven a #00FFFF. Elija uno y manténgase consistente en toda su hoja de estilos.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Magenta — rojo y azul al máximo, verde a cero. Color CSS con nombre `magenta` (o equivalentemente `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta y fuchsia son sinónimos exactos en CSS — ambos se resuelven a #FF00FF. Común en patrones de prueba y superposiciones de herramientas de desarrollo.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Amarillo — rojo y verde al máximo, azul a cero. El más brillante de los tres secundarios sRGB por luminancia percibida.
#FFFF00 → rgb(255 255 0) El amarillo es el color no-blanco de mayor luminancia en pantalla — el texto amarillo sobre fondos blancos es casi invisible, aunque el hex se vea bien sobre papel.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
El color de marca por defecto blue-500 de Tailwind CSS — el "azul web" canónico de mediados de los 2020. Usado en innumerables paneles, sitios de marketing y herramientas de administración.
#3b82f6 → rgb(59 130 246) Tailwind v4 redefine blue-500 en OKLCH (`oklch(0.629 0.193 263.4)`) para rampas perceptualmente uniformes — el hex se mantiene igual como fallback.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
El rose-500 por defecto de Tailwind CSS — un rosa-rojo de alta saturación usado comúnmente para botones de acento, estados de alerta y contraste de marca.
#f43f5e → rgb(244 63 94) Rose-500 pasa WCAG AA (4.6:1) contra blanco para texto grande pero falla para texto del cuerpo — combine con rose-600 (#e11d48) o más oscuro para texto del cuerpo sobre blanco.
¿Necesita OKLCH en su lugar? Pruebe el convertidor hex a OKLCH dedicado para salida perceptualmente uniforme.
Suelte cualquier valor hex en la entrada HEX — con o sin el `#` inicial, en abreviación de 3 dígitos (`#F73`), forma completa de 6 dígitos (`#FF5733`), abreviación alfa de 4 dígitos (`#F738`), o forma completa alfa de 8 dígitos (`#FF5733CC`). La herramienta normaliza las cinco formas de entrada al mismo color canónico internamente. La capitalización no importa (`#ff5733` y `#FF5733` se analizan de forma idéntica). Los caracteres inválidos o conteos de dígitos incorrectos producen un error discreto en línea; un hex válido actualiza cada otro campo de formato en tiempo real.
El campo RGB debajo del campo HEX muestra el valor `rgb()` correspondiente en la sintaxis moderna con espacios de CSS Color 4: `rgb(255 87 51)` para un color opaco, `rgb(255 87 51 / 0.5)` para uno con alfa. Cada canal es un entero 0-255; el alfa se normaliza a 0-1. Los valores son bit-exactos — `parseInt('FF', 16)` devuelve 255, sin aritmética de coma flotante involucrada, así que un viaje de ida y vuelta de regreso a hex produce la entrada original textualmente.
Cada tarjeta de formato tiene un botón Copiar a la derecha. Un clic y el valor aterriza en su portapapeles — la etiqueta del botón cambia brevemente a "¡Copiado!" para que lo sepa. La cadena copiada es la sintaxis canónica de CSS Color 4 (`rgb(255 87 51)`); si su objetivo necesita la forma heredada con comas, la conversión es mecánica (reemplace los espacios por `, `). Para salida específica de plataforma (SwiftUI, Compose, Flutter, Tailwind v4), use la sección Copiar como código debajo del selector.
El mismo hex que pega también ilumina los otros campos de formato — HSL para CSS heredado, OKLCH y OKLAB para sistemas de diseño perceptualmente uniformes, HSV y HWB para flujos de selector de color de diseñadores, CMYK para estimaciones de imprenta, y el color CSS con nombre más cercano para documentación y prosa. Nunca está atrapado en hex → RGB solamente; si también necesita la tripleta OKLCH para soltar en un bloque `@theme` de Tailwind v4, está justo ahí en el campo OKLCH con su propio botón Copiar.
Debajo de la cuadrícula de formato hay un cuadrado SL + deslizador de matiz + deslizador de alfa para exploración visual. Arrastre cualquier control y cada campo de texto se actualiza en tiempo real, incluidos el HEX y el RGB con los que empezó. En navegadores basados en Chromium (Chrome, Edge, Brave) el botón EyeDropper activa la API nativa `EyeDropper` para muestrear cualquier píxel en pantalla, incluso fuera de la ventana del navegador — útil cuando desea capturar un hex de la UI de otra aplicación sin hacer captura primero.
La abreviación de 3 dígitos `#RGB` se expande *duplicando cada dígito*, no rellenando a la izquierda con ceros. `#F73` se vuelve `#FF7733` (naranja brillante), no `#000F73` (azul oscuro). Esta es la esquina más equivocada de la sintaxis de color CSS; los principiantes frecuentemente asumen que la abreviación es algún tipo de relleno con cero y terminan con colores totalmente incorrectos. La misma regla aplica a la abreviación alfa de 4 dígitos `#RGBA` — cada dígito se duplica para formar el equivalente de 8 dígitos.
Suponer que #F73 se rellena a la izquierda como #000F73: esperado: azul oscuro rgb(0, 15, 115) real: naranja brillante rgb(255, 119, 51)
La abreviación de 3 dígitos duplica cada dígito: #F73 → #FF7733 → rgb(255, 119, 51) Verificado por la expansión en vivo de la herramienta mientras escribe.
Convertir RGB de vuelta a hex requiere que el `toString(16)` de cada canal se rellene a la izquierda a 2 dígitos. Sin `padStart(2, '0')`, los valores de canal de un solo dígito producen hex inválido: `rgb(5, 87, 51)` se serializaría como `#55733` (5 caracteres) en lugar de `#055733` (6 caracteres). Muchos convertidores ad-hoc se saltan el relleno y producen salida rota para cualquier canal por debajo de 16. El idioma estándar es `value.toString(16).padStart(2, '0')` para cada uno de R, G, B.
Saltarse padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produce hex inválido de 5 caracteres. Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Hex válido de 6 caracteres; funciona correctamente para todos los valores de canal 0-255. El hex CSS de 8 dígitos es `#RRGGBBAA` — el alfa es el par *final*. Algunas bibliotecas de color (notablemente el `Color.parseColor()` antiguo de Android) usan el orden opuesto `#AARRGGBB` con el alfa como par *inicial*, que es incompatible con el hex CSS. Un hex web `#FF573380` (naranja al 50% de alfa) interpretado como `#AARRGGBB` se vuelve alfa=255, R=87, G=51, B=128 — un cian oscuro a opacidad completa. Verifique siempre el orden de alfa de la plataforma objetivo antes de hacer ida y vuelta con hex de 8 dígitos.
Pegar hex CSS de 8 dígitos en Color.parseColor() heredado de Android: #FF573380 interpretado como #AARRGGBB → color y alfa completamente incorrectos.
Use el formato documentado de la plataforma objetivo: para Android Compose: Color(0xFFFF5733) con alfa como primer byte para CSS: #FF573380 con alfa como último byte No cruce-pegue entre los dos sin reordenar.
Los canales RGB están codificados en gamma, no son lineales. Promediar dos valores RGB da un punto medio perceptualmente incorrecto. `(255, 0, 0)` promediado con `(0, 255, 0)` produce `(127, 127, 0)`, un oliva oscuro turbio, no el punto medio amarillo brillante que esperaría de mezclar luz roja y verde. Para una mezcla correcta, descodifique a linear-RGB primero vía la función de transferencia sRGB (CSS Color 4 §11.2), promedie en espacio lineal, luego vuelva a codificar. O trabaje en OKLAB / OKLCH donde la distancia perceptual es uniforme.
Promediar RGB codificado en gamma directamente: (rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0) Se ve como oliva oscuro, no como amarillo brillante.
Promediar en linear-RGB: descodificar → linear-RGB → promediar → recodificar → rgb(188, 188, 0) Visiblemente amarillo brillante, coincidiendo con lo que produce la mezcla física de luz.
Herramientas de Conversión
Convierte números entre binario, hexadecimal, decimal, octal y cualquier base personalizada (2-36) al instante. Gratis, privado, sin registro — todo el procesamiento ocurre en tu navegador.
Herramientas de Conversión
Convierta HEX a RGB, HSL, OKLCH, OKLAB y CMYK en su navegador — copie cualquier formato con un clic. Gratis, sin registro, sus colores nunca salen de la página.
Herramientas de Conversión
Convierta colores HEX a CMYK en su navegador. Aproximación ingenua basada en sRGB para vistas previas de imprenta. Gratis, sin registro, sus colores nunca salen de la página.
Herramientas de Conversión
Convierta cualquier color hex a HSL en su navegador — admite hex de 3 dígitos, 6 dígitos y 8 dígitos con alfa. Gratis, instantáneo, sin registro, sus colores nunca salen de la página.
Herramientas de Conversión
Convierta HEX a OKLCH para tokens de diseño de Tailwind v4. Salida perceptualmente uniforme en vivo con avisos de gama Display P3. Gratis, solo en el navegador.
Herramientas de Conversión
Reduce el tamaño de las imágenes hasta un 80% — comprime JPEG, PNG y WebP en tu navegador, sin subir archivos. Lotes de 20 imágenes, ajusta la calidad, compara antes y después. Gratis y privado.