Calculadora de Inversión de Color

El color invertido es el que resulta de restar R, G y B de 255

Al invertir un color, los valores de rojo, verde y azul se dan la vuelta hacia el extremo opuesto de su rango. Cada valor va de 0 a 255, así que el valor invertido es 255 menos el original. El color de ejemplo #3498DB es RGB(52, 152, 219); invertido pasa a ser RGB(203, 103, 36), es decir, #CB6724. El efecto de negativo de los editores de fotos y el filter: invert(1) de CSS hacen el mismo cálculo.

La calculadora de arriba muestra el color invertido en HEX, RGB y HSL en cuanto introduces un código de color. Además mide la relación de contraste que resulta de usar el original y el invertido como color de texto uno del otro, y compara el color invertido con el complementario y con un color en el que solo se ha invertido la luminosidad. Si introduces varios colores a la vez, pasan a una tira de película con los originales arriba y los invertidos abajo.

Cómo usar la calculadora

1. En el campo de color, escribe un código HEX como #3498db, 3498db o #fff, o una notación CSS como rgb(52, 152, 219), hsl(204 70% 53%) o tomato. Tres números sueltos (52 152 219) se leen como RGB. La muestra del extremo derecho del campo abre un selector de color.
2. El texto grande del resultado es el color invertido. Los caracteres pequeños sobre cada dígito son los dígitos originales, así que se ve cómo se ha dado la vuelta a cada dígito hexadecimal. Los botones a la derecha de las líneas HEX, RGB y HSL copian el formato que prefieras.
3. En el panel de espejo, la mitad izquierda es el original y la derecha es el color invertido. El "Aa" de cada muestra está pintado con el color opuesto, de modo que ves de un vistazo lo legible que resulta el color invertido como color de texto. El número central es la relación de contraste entre ambos colores.
4. Si arrastras una barra del espejo de canales o cambias un número, cambia el color original. El círculo vacío es el valor original y el lleno es el invertido; los dos están siempre a la misma distancia de la línea central, uno a cada lado.
5. Si pegas varios colores separados por comas, espacios o saltos de línea, hasta 12 pasan a la vez a la tira de película. "Copiar todos los HEX invertidos" copia la lista de colores invertidos, uno por línea.

Cómo se calcula: restar de 255, o restar cada dígito hexadecimal de F

Un código HEX escribe en hexadecimal los valores de rojo, verde y azul, con dos dígitos cada uno. Por eso la inversión se hace en tres pasos: convertir cada par a decimal, restarlo de 255 y volver a escribir el resultado con dos dígitos hexadecimales.

No hace falta pasar a decimal. 255 es FF en hexadecimal, así que restar un valor de dos dígitos de FF equivale a restar cada dígito de F, sin llevadas. Si te sabes los pares de abajo, puedes invertir #3498DB y obtener #CB6724 de cabeza.

Los pares funcionan en los dos sentidos: 8 pasa a 7 y C pasa a 3.

HEX de 3, 4 y 8 dígitos y opacidad

CSS admite colores hexadecimales de 3, 4, 6 u 8 dígitos. El #F0F de 3 dígitos equivale a #FF00FF con cada dígito duplicado, así que al restar cada dígito de F se obtiene #0F0 (= #00FF00), de nuevo con 3 dígitos. El último dígito de un código de 4 dígitos y los dos últimos de uno de 8 son la opacidad (alfa). La inversión da la vuelta solo al color y deja la opacidad como está, de modo que el invertido de #3498DB80 es #CB672480. El filtro CSS invert() también cambia solo el rojo, el verde y el azul, y no toca el alfa.

Color invertido y relación de contraste de colores habituales

La relación de contraste es la diferencia de brillo entre dos colores, medida con la fórmula de WCAG, cuando uno se usa como fondo y el otro como texto. El veredicto usa 4,5:1 (AA, texto normal), 3:1 (texto grande) y 7:1 (AAA); un valor que se queda un poco corto nunca se redondea hacia arriba.

Ningún color tiene un invertido idéntico a sí mismo, como muestra el par #808080 y #7F7F7F. Como 255 es impar, no existe ningún entero que cumpla x = 255 − x. El par más cercano es #808080 y #7F7F7F, que se diferencian en solo 1 en cada uno de los tres valores.

El color invertido es el complementario más una inversión de luminosidad

Con frecuencia se usan "invertido" y "complementario" como si fueran lo mismo, pero no lo son, y HSL (matiz, saturación y luminosidad) deja clara la diferencia. Al invertir RGB, el valor mayor y el menor intercambian sus posiciones, de modo que el color se desplaza exactamente 180° en el círculo cromático, la luminosidad L pasa a ser 100 % − L y la saturación se mantiene. El complementario gira solo el matiz 180° y conserva la luminosidad.

El panel "Comparación con el color complementario" muestra estos cuatro colores en una cuadrícula de 2×2. Los colores de esquinas opuestas son inversos entre sí: el invertido del original es el color invertido, y el invertido del complementario es el color "solo la luminosidad". Un color con una luminosidad de exactamente el 50 % (colores puros como #FF0000 y #0000FF, o #CC3333) sigue en el 50 % al invertir la luminosidad, así que su invertido y su complementario coinciden. Un gris, en cambio, no tiene matiz: su complementario es él mismo y al invertirlo solo cambia la luminosidad.

El color invertido no siempre se lee bien

Es fácil suponer que un color opuesto implica mucho contraste, pero la relación de contraste depende de la diferencia de luminosidad, no del matiz. Un color de luminosidad media sigue teniendo una luminosidad parecida después de invertirlo. El ejemplo #3498DB y su invertido #CB6724 son opuestos en matiz, azul frente a naranja, y sin embargo su relación de contraste es de solo 1,20:1, de modo que el texto de uno sobre el otro casi no se lee.

Los grises muestran dónde está el límite. Un gris igual o más oscuro que #484848, o igual o más claro que #B7B7B7, se diferencia de su invertido en 4,5:1 o más y sirve como texto normal. Los grises entre #585858 y #A7A7A7 no llegan ni a 3:1. Los colores con tono siguen el mismo patrón: solo los muy claros o muy oscuros forman una buena pareja de texto y fondo con su invertido. Si necesitas ajustar por separado el contraste del texto sobre un fondo, compruébalo en un verificador de contraste de accesibilidad.

No uses la inversión tal cual para el modo oscuro

Si inviertes los colores sin más para convertir una pantalla clara en una oscura, el matiz se da la vuelta junto con la luminosidad. Un botón azul pasa a naranja y una marca verde de éxito pasa a magenta, con lo que se difumina su significado. Por eso la función de inversión de los teléfonos viene en dos variantes. Según Apple Soporte, Inversión inteligente invierte los colores de la pantalla, a excepción de las imágenes, el contenido multimedia y algunas apps que usan estilos de color oscuro, mientras que Inversión clásica invierte todos los colores de la pantalla.

Al diseñar, un mejor punto de partida es un color que conserva el matiz e invierte solo la luminosidad. Es la casilla "Solo la luminosidad" de la calculadora. En CSS, filter: invert(1) hue-rotate(180deg) produce un efecto parecido, pero solo aproximado. hue-rotate() no es un giro del matiz HSL, sino una matriz que conserva en lo posible el brillo, así que el resultado varía mucho según el color original.

Un color puro con una luminosidad del 50 % se queda igual al invertir la luminosidad, pero la combinación de CSS convierte el rojo en rosa claro y el azul en un lavanda muy pálido. Las fotos y los logotipos también se invierten, así que es más seguro usar el filtro solo en elementos de un único color, como los iconos, y definir aparte los demás colores.

Invertir con CSS, Excel y código

• CSS: filter: invert(1) (o 100 %) invierte todos los colores de un elemento igual que esta calculadora. La especificación del W3C hace que las funciones de filtro operen en el espacio de color sRGB, y el valor por defecto es 1. Los valores entre 0 y 1 mezclan el original con el invertido; con 0,5 todos los canales pasan al valor central, así que cualquier color se vuelve gris (#808080).
• JavaScript: para una cadena HEX de 6 dígitos h (sin el #), inviértela con '#' + (0xFFFFFF ^ parseInt(h, 16)).toString(16).padStart(6, '0'). Un O exclusivo (XOR) con FFFFFF equivale a restar cada dígito de F.
• Python: '#%06x' % (0xFFFFFF ^ int(h, 16)) da el mismo valor.
• Excel: si la celda A1 contiene #3498DB, =DEC.A.HEX(16777215-HEX.A.DEC(SUSTITUIR(A1;"#";""));6) devuelve CB6724 en Excel en español, donde el separador de argumentos suele ser el punto y coma (en Excel en inglés se escribe =DEC2HEX(16777215-HEX2DEC(SUBSTITUTE(A1,"#","")),6)). 16777215 es FFFFFF escrito en decimal, y el último argumento, 6, rellena con ceros a la izquierda hasta seis dígitos.

Errores frecuentes

• Usar el color invertido como complementario: la inversión también da la vuelta a la luminosidad. Si necesitas el matiz opuesto con la misma luminosidad, usa el complementario. Los dos coinciden solo cuando la luminosidad es del 50 %.
• Dar por hecho que el invertido siempre tiene contraste suficiente: un color de luminosidad media tiene con su invertido una relación de contraste cercana a 1:1. Comprueba siempre el contraste antes de usar los dos como texto y fondo.
• Invertir entero un HEX de 8 dígitos: el 80 final de #3498DB80 es la opacidad. Si restas los ocho dígitos de F obtienes #CB67247F, que también cambia la opacidad. Invierte solo los seis primeros dígitos.
• Restar los valores RGB de 256: los valores van de 0 a 255, así que la base es 255. Si restas de 256, el 0 pasa a ser 256, fuera de rango.
• Tomar invert(1) hue-rotate(180deg) de CSS por una inversión exacta de "solo la luminosidad": es una aproximación, y el rojo #FF0000 pasa a ser #FF9292, por ejemplo.
• Confundir la inversión de una foto con la de un código de color: esta calculadora invierte códigos de color. Para convertir una foto entera en negativo, usa la función de inversión de un editor de imágenes o un filtro CSS; el principio es el mismo.

Límites y precauciones

• La inversión se basa en sRGB de 8 bits (0 a 255). En colores que van más allá de sRGB, como display-p3 u oklch, se invierte el valor que el navegador convierte a sRGB.
• Los valores HSL, el complementario y el color "solo la luminosidad" se redondean tras el cálculo con decimales, de modo que al volver a convertir un valor HSL a RGB puede haber una diferencia de en torno a 1.
• La relación de contraste se calcula para dos colores opacos, sin la opacidad. Un color translúcido depende del fondo con el que se solape en realidad.
• Solo se reconocen los 148 nombres de color estándar de CSS. Los nombres con espacios, como "dark blue", o los propios de una herramienta de diseño, introdúcelos como HEX.

Criterio: la inversión coincide con la definición de invert() del W3C Filter Effects Module Level 1, y la relación de contraste sigue las definiciones de luminancia relativa y relación de contraste de WCAG 2.2. Los valores del filtro CSS de la tabla se comprobaron en un navegador Chromium el 20 de octubre de 2026.

Fuentes

• 01W3C — Filter Effects Module Level 1invert() usa tableValues amount y 1 − amount por canal, no cambia el alfa, las funciones de filtro operan en sRGB, valor por defecto 1, hue-rotate() es una matriz feColorMatrix
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2Relación de contraste (L1 + 0.05) / (L2 + 0.05) y fórmula de la luminancia relativa
• 03W3C — Understanding SC 1.4.3 Contrast (Minimum)4,5:1 para texto normal, 3:1 para texto grande, el valor calculado no se redondea (4,499:1 no es 4,5:1)
• 04W3C — CSS Color Module Level 4Notación hexadecimal de 3, 4, 6 y 8 dígitos, los dos últimos dígitos son el alfa, fórmulas de conversión entre RGB y HSL
• 05MDN — invert() (en inglés)100 % es la inversión total, 0 % deja el color igual, valor por defecto 1
• 06Apple Soporte — Usar las preferencias de pantalla y tamaño del texto en el iPhone, iPad y iPod touchDiferencia entre Inversión clásica e Inversión inteligente
• 07Microsoft Soporte — Función DEC.A.HEXDEC.A.HEX con el número y un segundo argumento opcional, caracteres, que rellena con ceros a la izquierda

Preguntas frecuentes

Herramientas para usar junto con esta