Adaptador de colores para modo oscuro
Convierte cualquier paleta de color de modo claro a equivalentes de modo oscuro al instante. Elige entre tres modos de adaptación (perceptual, inversión o desplazamiento) con aplicación automática del contraste WCAG. Exporta como propiedades personalizadas de CSS o configuración de Tailwind. Todo el procesamiento se ejecuta localmente en tu navegador. Sin registro.
Enter your light-mode color palette and instantly generate dark-mode equivalents with WCAG contrast checks. Export as CSS custom properties or Tailwind config - all processing runs locally in your browser.
background
#828282
surface
#708599
border
#6485af
text
#e5e9f0
muted
#818ea2
primary
#3780f6
accent
#9369f7
Adaptation Mode
Background lightness of the dark theme
Boost or reduce saturation in dark mode
WCAG AA = 4.5, AAA = 7.0
:root {
--background: #ffffff;
--surface: #f8f9fa;
--border: #e2e8f0;
--text: #1a202c;
--muted: #718096;
--primary: #3b82f6;
--accent: #8b5cf6;
}
[data-theme="dark"],
.dark {
--background: #828282;
--surface: #708599;
--border: #6485af;
--text: #e5e9f0;
--muted: #818ea2;
--primary: #3780f6;
--accent: #9369f7;
}Contrast ratios are calculated against the dark background lightness you set. WCAG AA requires 4.5:1 for normal text. WCAG AAA requires 7:1. Colors that fail the minimum contrast are automatically nudged toward higher lightness until they pass.
¿Por qué usar nuestro adaptador de colores para modo oscuro?
- Generación instantánea del modo oscuro: pega tu paleta de modo claro y obtén los equivalentes de modo oscuro en tiempo real. Ajusta el modo de adaptación y la configuración y verás todos los colores actualizarse al momento.
- Seguro y privado: todos los cálculos de color se ejecutan 100 % en el lado del cliente, en tu navegador. Los datos de tu paleta nunca se envían a un servidor, así que puedes adaptar con seguridad colores de marca propietarios.
- Comprobación de contraste WCAG: cada color adaptado se comprueba automáticamente respecto al fondo oscuro para cumplir WCAG AA (4,5:1) y AAA (7:1). Los colores que no cumplen se ajustan hasta que lo logran.
- 100 % gratis para siempre: totalmente gratis, sin registro, sin límites de uso y sin anuncios que bloqueen la interfaz. Adapta tantas paletas como necesites.
Usos habituales del adaptador de colores para modo oscuro
- Añadir modo oscuro a aplicaciones existentes: convierte tus tokens de diseño de modo claro en equivalentes de modo oscuro en segundos. Exporta como propiedades personalizadas de CSS y pégalas en tu hoja de estilos actual.
- Temas en React y Next.js: genera los tokens de color del modo oscuro para tu configuración de Tailwind o tu objeto de tema CSS-in-JS. La exportación de Tailwind está lista para pegar en tailwind.config.js.
- Mantenimiento del sistema de diseño: mantén tus paletas clara y oscura sincronizadas mientras tu sistema de diseño evoluciona. Vuelve a ejecutar el adaptador cada vez que actualices un color de modo claro.
- Adaptación de colores de marca: adapta los colores de marca para interfaces de modo oscuro preservando el tono y la saturación. El modo perceptual mantiene los medios tonos y los acentos visualmente coherentes.
- Cumplimiento de accesibilidad: verifica que todos tus colores de modo oscuro cumplan los requisitos de contraste WCAG AA sobre tu fondo oscuro. Los que no cumplen se ajustan automáticamente.
- Variables y tokens CSS: exporta ambas paletas, clara y oscura, como propiedades personalizadas de CSS con un clic. La salida usa selectores data-theme="dark" y .dark para máxima compatibilidad.
¿Qué es un adaptador de colores para modo oscuro?
Un adaptador de colores para modo oscuro convierte una paleta de modo claro en equivalentes apropiados para modo oscuro ajustando la luminosidad de cada color en el espacio HSL. Invertir simplemente los colores (100 − L) suele dar malos resultados: los colores muy claros se vuelven muy oscuros y los tonos medios turbios. Nuestro adaptador usa tres algoritmos más inteligentes (perceptual, inversión y desplazamiento) para producir colores de modo oscuro visualmente coherentes y accesibles. Todo el procesamiento se ejecuta al instante en tu navegador, sin subida a servidores.
Cómo funciona nuestro adaptador de colores para modo oscuro
- Introduce tu paleta de modo claro: añade cada color con un nombre (que se usa como nombre de la variable CSS) y su valor HEX. Usa los botones predefinidos para cargar una paleta de ejemplo al instante.
- Elige la configuración de adaptación: selecciona un modo (perceptual, inversión o desplazamiento), establece la luminosidad del fondo oscuro, ajusta la saturación y define el ratio de contraste WCAG mínimo. Los colores del modo oscuro se actualizan en tiempo real.
- Exporta CSS o configuración de Tailwind: copia las propiedades personalizadas de CSS generadas (con selectores :root y .dark) o el fragmento de configuración de Tailwind directamente a tu proyecto.
Los tres modos de adaptación
- Modo perceptual: usa una asignación en curva S que preserva las relaciones de contraste relativas entre colores. Los colores claros (L alto) se vuelven ligeramente brillantes sobre fondos oscuros y los oscuros (L bajo) mucho más brillantes. Es el modo recomendado para la mayoría de sistemas de diseño.
- Modo inversión: refleja la luminosidad alrededor del 50 % (oscuro = 100 − claro). Sencillo y predecible, pero puede producir resultados deslavados en tonos medios. Ideal para paletas minimalistas de alto contraste.
- Modo desplazamiento: desplaza todos los colores hacia el extremo brillante del rango del tema oscuro. Los colores oscuros reciben un impulso mayor que los claros. Buena opción para paletas con muchos tonos oscuros.
- Aplicación del contraste: tras la adaptación, cada color se comprueba respecto al fondo oscuro con la fórmula de contraste WCAG. Los colores por debajo del ratio mínimo se desplazan automáticamente hacia mayor luminosidad hasta que lo cumplen.
Preguntas frecuentes
Un adaptador de colores para modo oscuro convierte una paleta de modo claro en equivalentes de modo oscuro ajustando la luminosidad HSL, comprobando el contraste WCAG y corrigiendo automáticamente los colores que no lo cumplen. Nuestro adaptador se ejecuta por completo en tu navegador.
La simple inversión de luminosidad suele dar malos resultados: los colores muy claros se vuelven muy oscuros y los tonos medios se vuelven turbios. Los modos perceptual y de desplazamiento usan algoritmos más inteligentes que preservan la jerarquía visual.
Cada color adaptado se compara con el fondo oscuro usando la fórmula de ratio de contraste WCAG 2.1. Los colores por debajo del ratio mínimo se desplazan automáticamente hacia mayor luminosidad hasta que lo cumplen.
Sí. Todos los cálculos se ejecutan 100 % en el lado del cliente. Ningún dato de color se envía nunca a ningún servidor.
Pega la salida CSS en tu hoja de estilos. El bloque :root define los colores de modo claro y el bloque .dark los de modo oscuro. Activa o desactiva la clase dark en el elemento raíz para cambiar de tema.
Combina el fragmento de configuración de Tailwind en la sección theme.extend.colors de tu tailwind.config.js. Los colores hacen referencia a propiedades personalizadas de CSS y cambian automáticamente con la clase dark.
Sí. 100 % gratis, sin registro y sin límites de uso. Adapta tantas paletas como necesites.