Inversor de Colores
Invierte cualquier color para obtener su opuesto exacto al instante, sin pulsar ningún botón. Introduce un color en formato HEX, RGB o HSL y verás el color invertido con una vista previa en paralelo. Cada formato tiene su propio botón de copiar, y un indicador de relación complementaria muestra el cambio de tono entre el color original y el invertido. Totalmente privado, 100% gratis y sin registro.
Sample Colors
Enter a Color
Original Color
Inverted Color
rgb(255, 0, 0) → rgb(0, 255, 255)Complementary Relationship
Original hue: 0° → Inverted hue: 180° (shifted by 180°)
✓ The inverted colour is approximately complementary (180° apart on the colour wheel).
¿Por qué usar nuestro inversor de colores?
- Inversión de color instantánea: el inversor de colores actualiza el resultado en cada pulsación de tecla, sin botones que pulsar. Introduce un color en formato HEX, RGB o HSL y verás su opuesto exacto al instante con una vista previa en paralelo.
- Varios formatos de entrada: el inversor de colores acepta formatos HEX (de 3 o 6 dígitos), RGB y HSL. Cambia entre ellos con un clic. También hay un selector de color nativo para elegir el color visualmente.
- 100% privado, sin subidas: todo el procesamiento ocurre localmente en tu navegador. Tus valores de color nunca salen de tu dispositivo ni se envían a ningún servidor: totalmente privado y seguro.
- Gratis y sin límites: invierte colores ilimitados sin registro, sin suscripción y sin límites de uso. El inversor de colores es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.
Casos de uso habituales del inversor de colores
- Invertir en CSS y modo oscuro: los desarrolladores frontend usan el inversor de colores para encontrar rápidamente colores invertidos para variantes de modo oscuro, estados hover y efectos del filtro invert() de CSS. Invierte cualquier color de marca para hallar su equivalente en modo oscuro.
- Efecto de negativo fotográfico: fotógrafos y editores de imágenes usan el inversor de colores para entender cómo funciona el filtro de inversión de negativo en el software de edición, replicando el clásico efecto de negativo de película para proyectos creativos.
- Accesibilidad y contraste: los especialistas en accesibilidad usan el inversor de colores para encontrar rápidamente alternativas de alto contraste. Los colores invertidos suelen ofrecer un contraste fuerte frente al original, útil para estados hover e indicadores de foco.
- Diseño y prototipado de interfaces: los diseñadores de UI usan el inversor de colores para explorar esquemas de color complementarios para interfaces, encontrando alternativas de paleta invertida para botones, tarjetas y elementos de interfaz durante la fase de prototipado.
- Aprendizaje de teoría del color: estudiantes y docentes usan el inversor de colores para entender la relación entre un color y su inverso, aprendiendo sobre colores complementarios y cómo funciona el círculo cromático RGB en la práctica.
- Exploración de temas y marca: los diseñadores de marca usan el inversor de colores para explorar versiones invertidas de los colores de marca destinadas a temas alternativos, ediciones especiales o variaciones de paletas existentes enfocadas a la accesibilidad.
¿Qué es la inversión de color?
La inversión de color es una operación matemática que produce el opuesto exacto de un color en el espacio de color RGB. Para cada canal (rojo, verde, azul), el valor invertido se calcula como 255 menos el valor original. Así, un rojo puro rgb(255, 0, 0) se convierte en cian rgb(0, 255, 255). Es la misma fórmula que usan el filtro invert() de CSS y el clásico efecto de negativo fotográfico.
Cómo funciona nuestro inversor de colores
- Introduce un color en cualquier formato: escribe un valor HEX (por ejemplo #FF0000), un valor RGB (por ejemplo 255, 0, 0) o un valor HSL (por ejemplo 0, 100%, 50%). También puedes usar la muestra del selector de color nativo para elegirlo visualmente. Todo el procesamiento se ejecuta localmente en tu navegador.
- El color invertido aparece al instante: mientras escribes, el color invertido se calcula y se muestra junto al original. Ambos colores muestran sus valores HEX, RGB y HSL con botones de copiar para cada formato.
- Entiende la relación: la herramienta muestra el cambio de tono entre el color original y el invertido, e indica si el resultado es aproximadamente complementario (giro de tono de 180°) para ayudarte a comprender las relaciones entre colores.
Inversión de color frente a colores complementarios
- La inversión RGB calcula 255 - valor para cada canal de forma independiente. Esto siempre produce un opuesto visualmente llamativo, pero no siempre da como resultado un color perfectamente complementario (giro de tono de 180°).
- Los colores verdaderamente complementarios se definen girando el tono 180° en el círculo cromático manteniendo constantes la saturación y la luminosidad. Esto produce un opuesto más armonioso a nivel perceptivo.
- Cuándo usar cada uno: usa la inversión RGB para efectos de negativo fotográfico y para replicar el filtro invert() de CSS. Usa colores complementarios reales para armonías cromáticas y esquemas de diseño donde el equilibrio perceptivo sea importante.
- La inversión en HSL se puede lograr girando el tono 180°, algo que nuestro inversor de colores explica junto al resultado estándar de la inversión RGB.
Dónde se usa la inversión de color
La inversión de color se usa ampliamente en el diseño y el desarrollo digitales. La función CSS filter: invert() aplica exactamente esta transformación a elementos HTML e imágenes. Las implementaciones de modo oscuro suelen usar colores invertidos en elementos de interfaz que deben adaptarse tanto a fondos claros como oscuros. El software de edición fotográfica usa la inversión para el clásico efecto de negativo, y los desarrolladores de videojuegos la usan para efectos visuales especiales como destellos de daño o cambios de estado de la interfaz. Entender la inversión de color ayuda a diseñadores y desarrolladores a predecir cómo se verán los colores al transformarlos, lo que la convierte en una herramienta esencial en cualquier flujo de trabajo con color digital.
Preguntas frecuentes
La inversión de color es una operación matemática que produce el opuesto exacto de un color. Para cada canal RGB, el valor invertido es 255 menos el valor original. Por ejemplo, el rojo (rgb(255, 0, 0)) se invierte a cian (rgb(0, 255, 255)). Es la misma fórmula que usan el filtro invert() de CSS y los negativos fotográficos.
Introduce tu color en formato HEX (por ejemplo #FF0000), RGB (por ejemplo 255, 0, 0) o HSL (por ejemplo 0, 100%, 50%). El inversor de colores muestra al instante el color invertido con una vista previa en paralelo. También puedes usar el selector de color nativo para elegir cualquier color visualmente.
No exactamente. La inversión RGB resta cada canal a 255, lo que produce un color visualmente opuesto, pero no siempre un complementario real (que requiere un giro de tono exacto de 180°). El inversor de colores te indica si el resultado es aproximadamente complementario según la diferencia de tono entre el color original y el invertido.
Sí. Todo el procesamiento ocurre 100% en el lado del cliente, en tu navegador, con JavaScript. Tus valores de color nunca se envían a ningún servidor, ni se almacenan, ni se transmiten a ningún sitio. El inversor de colores es completamente privado.
El inversor de colores admite tres formatos de entrada: HEX (de 3 dígitos como #F00 o de 6 como #FF0000), RGB (valores separados por comas como 255, 0, 0, con o sin el envoltorio rgb()) y HSL (valores separados por comas como 0, 100%, 50%, con o sin el envoltorio hsl()). Cambia entre formatos haciendo clic en los botones de formato encima del campo de entrada.
Sí. El inversor de colores es 100% gratis, sin registro, sin funciones premium y sin límites de uso. Invierte colores ilimitados sin restricciones ni costes ocultos.
El color invertido se calcula con la fórmula: valor_invertido = 255 - valor_original para cada canal RGB. Si introduces un valor HSL, primero se convierte a RGB, luego se invierte y después se convierte de nuevo a HEX y HSL para mostrarlo. Esto coincide con el funcionamiento del filtro invert() de CSS en los navegadores.
Sí. Cada formato de color (HEX, RGB, HSL) tiene su propio botón de Copiar tanto para el color original como para el invertido. También puedes usar el botón «Copiar ambos colores» en la parte inferior para copiar de una vez todos los valores de ambos colores, formateados como un bloque de texto limpio.