Convierta RGB a hex en su navegador — admite enteros, porcentajes y alfa rgba. Gratis, instantáneo, sin registro, sus colores nunca salen de la página.
Tintes claros
Matices oscuros
Tonos
Armonías
— — — — — Un convertidor RGB a hex es una pequeña utilidad que convierte tres valores enteros de canal 0-255 (`rgb(255 87 51)`) en el código hex de 6 caracteres que codifica el mismo color (`#FF5733`). RGB y hex 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 — emparejada con su dirección inversa, esta misma transformación se ejecuta millones de veces al día a lo largo de cada plugin de Figma, preprocesador CSS, build de tokens de diseño y UI de selector de color en la web. RGB es el formato direccionado por canales que 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 reportan de forma nativa — tres enteros 0-255 separados que se asignan directamente a los subpíxeles rojo, verde y azul de un LCD o a los fósforos de un CRT. Hex es el formato escueto de copy-paste que Figma, Sketch, Photoshop y cada PDF de guía de marca esperan como salida — 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. Convertir entre ellos es mecánico: convierta cada entero a un par de 2 dígitos en base 16 y concatene con un `#` inicial. 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 HEX de forma gratuita.
**El propio formato hex merece una mirada más detenida.** El hex CSS estándar viene en cuatro formas legales. La forma canónica de 6 dígitos `#RRGGBB` empaqueta tres canales de 8 bits en 6 dígitos en base 16 — 16 777 216 colores en total (256³). La abreviación de 3 dígitos `#RGB` es una forma comprimida donde cada dígito se duplica para formar el equivalente de 6 dígitos: `#F73` se expande a `#FF7733`, *no* `#000F73` (esta es una de las reglas más equivocadas en la sintaxis de color CSS). La forma alfa de 8 dígitos `#RRGGBBAA` anexa un par alfa de 2 dígitos en una escala de 0-`FF`, con `00` totalmente transparente y `FF` totalmente opaco. La abreviación alfa de 4 dígitos `#RGBA` refleja la abreviación de 3 dígitos duplicando cada dígito, incluido el dígito alfa. Hex es insensible a mayúsculas — `#ff5733` y `#FF5733` se analizan idénticamente, aunque la mayoría de las guías de marca eligen una convención de mayúsculas y se mantienen con ella. La elección de base 16 es conveniente porque un dígito hex = nibble = 4 bits, dos dígitos = byte = 0-255, así que un solo par de 2 dígitos se mapea limpiamente a un canal de 8 bits sin desperdicio de relleno.
Las matemáticas de conversión van en ambas direcciones limpiamente. **RGB a HEX**: 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. Para RGB con alfa (`rgb(R G B / A)` o `rgba(R, G, B, A)`), multiplique el flotante alfa 0-1 por 255, redondee al entero más cercano, codifique en hex como un 4º par, y emita la forma de 8 dígitos. **HEX a RGB** es lo inverso: 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)`, etc. 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 RGB → HEX → RGB produce los enteros originales textualmente sin deriva de coma flotante.
**¿Por qué HEX sobre RGB en CSS?** Tres razones. Hex es más corto — `#FF5733` son 7 caracteres frente a `rgb(255, 87, 51)` con 16 caracteres, una diferencia significativa cuando se empaqueta en una propiedad personalizada CSS o un objeto de configuración de Tailwind. Hex no tiene errores de espacios en blanco — los minificadores CSS, los serializadores JSON y las herramientas de línea de comandos todos manejan una cadena de 7 caracteres limpiamente sin preocuparse por la coincidencia de paréntesis o el escape de comas. Y hex es el formato que todo el ecosistema de herramientas de diseño habla de forma nativa — el panel de color de Figma, las muestras de Sketch, el selector de color de Photoshop, cada PDF de guía de marca, cada llamado de color de un shot de Dribbble — todos exportan hex por defecto. La ruta de copy-paste de diseñador a desarrollador tiene forma de hex, que es por lo que la conversión RGB-a-HEX es tan frecuente: los desarrolladores reciben RGB de una herramienta que no es de diseño (una llamada de canvas, un cuentagotas de captura, un sensor de hardware) y necesitan convertirla a la forma hex que el resto de su stack espera.
El flujo RGB → HEX 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 RGB y hex. Los radios de dirección única apuntan a intenciones específicas de búsqueda en Google: el inverso convertidor hex a RGB para la dirección inversa (tomando un hex de Figma y sacando los enteros 0-255), 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 valores RGB nunca se suben, nunca se registran, y se disparan cero peticiones de red mientras escribe. Verifique en DevTools.
// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
const rgb = pair(r) + pair(g) + pair(b);
if (alpha >= 1) return `#${rgb}`;
const a = pair(alpha * 255);
return `#${rgb}${a}`;
}
console.log(formatHex({ r: 255, g: 87, b: 51 })); // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 })); // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 })); // '#050000' — padStart matters Moderno con espacios `rgb(255 87 51)`, heredado con comas `rgb(255, 87, 51)`, canales en porcentaje `rgb(100% 34% 20%)`, alfa moderno vía barra `rgb(255 87 51 / 0.5)`, y heredado `rgba(255, 87, 51, 0.5)` todos se analizan idénticamente. El parser normaliza cada forma de entrada a la misma tupla RGB interna antes de la serialización hex, así que puede pegar cualquier forma que produzca su fuente — la tripleta entera de Photoshop, un `rgba()` de hoja de estilos, una tupla de Canvas API — sin reformateo manual.
El campo HEX expone el valor como `#FF5733` para colores opacos y `#FF573380` para los que tienen alfa (forma de 8 dígitos). Mayúsculas por defecto para consistencia con la mayoría de guías de marca; un reemplazo mecánico cambia a minúsculas si su guía de estilo lo requiere. Ambas formas son CSS válido y vienen en todos los navegadores evergreen. La forma alfa de 8 dígitos llegó en todos los navegadores principales en 2018; para fallback de IE 11, la forma heredada `rgba()` está justo ahí en el campo RGB.
RGB → HEX es aritmética de entero a cadena: `value.toString(16).padStart(2, '0')` produce el par hex canónico de 2 dígitos con cero involucración de coma flotante. La dirección inversa (`parseInt(par, 16)`) es igualmente exacta. Un viaje de ida y vuelta RGB → HEX → RGB → HEX produce la entrada original textualmente, indefinidamente. La fuente de verdad interna OKLCH significa que incluso la cadena más larga RGB → HSL → OKLAB → HEX se mantiene bit-estable, algo que los convertidores heredados que enrutan a través de HSL no garantizan.
RGB con alfa (`rgb(255 87 51 / 0.5)` o `rgba(255, 87, 51, 0.5)`) emite la forma hex de 8 dígitos (`#FF573380`) automáticamente. El flotante alfa se multiplica por 255 y se redondea al entero más cercano antes de la codificación hex: `0.5 × 255 = 128 = 0x80`. La salida vuelve a hex de 6 dígitos cuando alfa es igual a 1 para evitar fugas de pares `FF` finales en las hojas de estilo. Útil para migración de tokens de diseño donde los valores alfa en `rgba()` necesitan hacer ida y vuelta a la forma moderna hex de 8 dígitos.
El mismo RGB 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 RGB → hex 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 una tupla RGB y la fila de contraste inmediatamente la 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 una tupla RGB a hex y quiere verificar que el color de marca resultante sea realmente 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: #FF5733`), 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 RGB, la serialización hex, la puntuación de contraste y la generación de paletas se ejecutan localmente en su navegador. Sus valores RGB 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 la misma tupla RGB con el mismo resultado hex. 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 "rgb to hex" — un formulario de una sola dirección con tres casillas numéricas RGB entrando, hex 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 RGB 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 color 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 RGB a hex 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íxel de cualquier aplicación en pantalla. No acepta tripletas RGB pegadas para conversión; 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.
rgb(255 87 51)
Salida HEX: `#FF5733`. El flujo de trabajo clásico multiplataforma — una hoja de estilos CSS declara un color de marca en la sintaxis moderna `rgb()`, el equipo de iOS necesita el hex para soltarlo en una extensión SwiftUI `Color(hex:)` o un catálogo de assets. Cada canal se convierte de forma independiente: `255 → FF`, `87 → 57`, `51 → 33`, concatenado con un `#` inicial. El mismo hex también se pega limpiamente en Android Compose, Flutter y Figma — hex sigue siendo la lingua franca para el traspaso de color multiplataforma en 2026.
rgb(59 130 246)
Salida HEX: `#3B82F6`. El selector de color de Adobe reporta RGB como tres enteros 0-255 (en Photoshop, Illustrator e InDesign); el equipo de front-end necesita el hex para soltarlo en una propiedad personalizada CSS como `--color-brand: #3B82F6`. Esta tripleta particular es el `blue-500` de Tailwind — `59 = 0x3B`, `130 = 0x82`, `246 = 0xF6`. Pegarla aquí una vez produce el hex correspondiente más la tripleta OKLCH para la migración de tokens de Tailwind v4, todo en un solo paso.
rgb(255 87 51 / 0.5)
Salida HEX: `#FF573380`. El flotante alfa se multiplica por 255 (`0.5 × 255 = 127.5`, redondeado a 128), luego se convierte a un par hex de 2 dígitos (`128 = 0x80`) anexado después del hex RGB. El hex CSS de 8 dígitos con alfa llegó de forma nativa a todos los navegadores evergreen en 2018 (Chrome 62, Firefox 49, Safari 9.1, Edge 79). Para soporte de navegadores anteriores a 2018, la forma heredada `rgba(255, 87, 51, 0.5)` sigue disponible; la conversión es mecánica y preserva el mismo color exactamente.
rgb(100% 50% 0%)
Salida HEX: `#FF8000`. CSS Color 4 permite canales en porcentaje — cada porcentaje se mapea al rango 0-255 con `valor × 255 / 100`, luego se redondea al entero más cercano (`50% × 255 = 127.5 → 128 = 0x80`). Las formas de porcentaje y entero son intercambiables y producen salida hex idéntica. La sintaxis de porcentaje a veces se prefiere en hojas de estilo escritas a mano por legibilidad cuando las proporciones de canal importan más que los valores enteros crudos; la salida hex normaliza ambas entradas a la misma cadena canónica de 6 dígitos.
Tabla de referencia de las 10 tuplas RGB más convertidas y sus equivalentes hex — 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. Código hex (#000000).
rgb(0 0 0) → #000000 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.
rgb(255 255 255) → #FFFFFF 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.
rgb(255 0 0) → #FF0000 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. Color CSS con nombre `lime` (no `green`, que es #008000).
rgb(0 255 0) → #00FF00 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.
rgb(0 0 255) → #0000FF 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`).
rgb(0 255 255) → #00FFFF 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`).
rgb(255 0 255) → #FF00FF 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.
rgb(255 255 0) → #FFFF00 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.
rgb(59 130 246) → #3B82F6 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.
rgb(244 63 94) → #F43F5E 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 `rgb()` en la entrada RGB — moderno con espacios `rgb(255 87 51)`, heredado con comas `rgb(255, 87, 51)`, con alfa vía barra `rgb(255 87 51 / 0.5)` o vía la forma `rgba(255, 87, 51, 0.5)`, o canales en porcentaje `rgb(100% 34% 20%)`. La herramienta normaliza todas las formas de entrada a la misma tupla RGB interna antes de calcular el hex. Caracteres inválidos, enteros fuera de rango o sintaxis malformada producen un error discreto en línea; un RGB válido actualiza cada otro campo de formato en tiempo real.
El campo HEX encima del campo RGB muestra el valor hex correspondiente: `#FF5733` para un color opaco, `#FF573380` para uno con alfa (forma de 8 dígitos). La salida usa dígitos hex en mayúsculas por defecto para consistencia con la mayoría de guías de marca; minúsculas (`#ff5733`) está a un reemplazo mecánico de distancia y es igualmente CSS válido. La conversión es bit-exacta — un viaje de ida y vuelta RGB → HEX → RGB recupera la tupla original textualmente sin deriva de coma flotante.
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 incluye el `#` inicial así que se pega directamente en una regla CSS, un campo de color de Figma, una extensión hex de SwiftUI, o un `colors.xml` de Android. Para sintaxis específica de plataforma (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, tokens `@theme` de Tailwind v4), use la sección Copiar como código debajo del selector.
El mismo RGB 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 RGB → hex solamente; si también necesita la tripleta OKLCH para 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 RGB y el HEX 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 una tupla RGB de la UI de otra aplicación sin hacer captura primero, luego leer inmediatamente el hex.
Convertir RGB 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, luego concatenar y anteponer `#`.
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. Cuando la tupla RGB viene de un flotante normalizado 0-1 multiplicado por 255 (común en OpenGL, SwiftUI, datos de imagen normalizados), el resultado a menudo es un flotante como `127.5` o `204.7`. Llamar a `toString(16)` en un flotante produce hex decimal como `'7f.8'` o `'cc.b333...'`, que no es hex CSS válido. Siempre `Math.round` (o `Math.floor`/`Math.ceil` según su política de redondeo) el flotante a un entero antes del paso `toString(16)`.
Saltarse el redondeo: (0.5 * 255).toString(16) → '7f.8' Produce hex inválido con un punto decimal.
Redondear a entero primero: Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80' Par hex válido de 2 dígitos; coincide con la normalización de CSS Color 4.
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 valor RGB con 50% alfa serializado a hex CSS emite `#FF573380`; emitido al formato de alfa-inicial de Android sería `#80FF5733`. Verifique siempre el orden de alfa de la plataforma objetivo antes de producir hex de 8 dígitos.
Emitir hex de alfa-inicial de Android en CSS: rgb(255 87 51 / 0.5) → #80FF5733 (formato Android) CSS lo analiza como alfa=128, R=255, G=87, B=51 — color completamente equivocado.
Use el formato documentado de la plataforma objetivo: para CSS: #FF573380 (alfa como último byte) para Android Compose: Color(0x80FF5733) (alfa como primer 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
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.