Conversor de Opacidad HEX

Agregale opacidad a cualquier color HEX y obtené #RRGGBBAA, rgba(), hsla() y el color sólido que produce sobre cualquier fondo. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.

Opciones

Color

Opacidad (%)

Fondo para aplanar

Resultados

Transparente

Sobre blanco

Sobre negro

Sobre tu fondo

Opacidad a alpha HEX

¿Cómo funciona la opacidad en los colores HEX?

Un color HEX puede llevar transparencia como un cuarto par de dígitos: #RRGGBBAA, donde AA va de 00 (totalmente transparente) a FF (opaco), así que 50% de opacidad es 80 y #2563eb80 es lo mismo que rgba(37, 99, 235, 0.5). Este conversor toma cualquier color y una opacidad, y lo escribe como HEX de 8 dígitos, rgba(), hsla(), oklch() y el #AARRGGBB de Android, que pone el alpha primero. También calcula el color sólido en el que se convierte uno translúcido sobre blanco, negro o tu propio fondo, y lista el sufijo alpha HEX de cada opacidad en pasos de 5%.

Ejemplos

Escribir el mismo color translúcido en distintos lugares:

CSS

/* the same 50% blue, three ways */
color: #2563eb80;
color: rgba(37, 99, 235, 0.5);
color: hsla(221, 83%, 53%, 0.5);

JavaScript

const alpha = Math.round(0.5 * 255).toString(16).padStart(2, "0"); // "80"
const withAlpha = "#2563eb" + alpha; // "#2563eb80"

Android XML

<!-- #AARRGGBB: alpha first -->
<color name="overlay">#802563EB</color>

Swift

UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 0.5)

Sass

$overlay: rgba(#2563eb, 0.5);
$solid-on-white: mix(#2563eb, #fff, 50%);

Casos de uso

Overlays y velos

Oscurecé una foto o el fondo de un modal con negro o un color de marca al 40% o 60% de opacidad, y copiá el valor en la sintaxis que usa tu hoja de estilos.

Convertir valores de herramientas de diseño

Figma y Sketch muestran un HEX más un porcentaje de opacidad. Convertí ese par en un único valor #RRGGBBAA o rgba() para CSS.

Aplanar la transparencia

Algunos contextos, como emails, PDFs o design tokens, necesitan un color opaco. Obtené el color sólido exacto que produce uno translúcido sobre su fondo real.

Android y apps multiplataforma

Los colores de Android ponen el alpha primero (#AARRGGBB). Copiá el orden correcto sin reacomodar dígitos a mano.

Preguntas frecuentes

¿Cuál es el código HEX para 50% de opacidad?

80. La opacidad se guarda en un byte de 00 a FF, así que 50% es round(0.5 x 255) = 128, que es 80 en hexadecimal. La tabla de la herramienta lista cada paso de 5%, como 33 para 20% y CC para 80%.

¿Los navegadores soportan colores HEX de 8 dígitos?

Sí, todos los navegadores actuales y todos los que soporta este sitio leen #RRGGBBAA y la forma corta #RGBA. Navegadores muy viejos como Internet Explorer no, y es la única razón para preferir rgba().

¿Por qué el formato de Android es distinto?

La clase Color de Android y sus recursos XML usan #AARRGGBB, con el alpha primero, mientras que CSS usa #RRGGBBAA con el alpha al final. El mismo azul al 50% es #802563EB en Android y #2563eb80 en CSS.

¿Qué significa el color sólido sobre un fondo?

Un color translúcido se mezcla con lo que tiene detrás. El valor sólido es esa mezcla calculada de antemano, para usarla donde no hay transparencia o para verificar su contraste.

¿Mis datos se envían a algún servidor?

No. Todo se calcula en tu navegador con JavaScript plano. Nada de lo que ingresás se transmite ni se guarda.

Herramientas relacionadas

Conversor de Colores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Color (WCAG AA / AAA)Generador de Tonalidades (Tints y Shades)Generador de Degradados CSS Generador de Paletas de Colores (Armonías)Selector de Color de Imagen