Más juegos en WuGames.ioPatrocinadoDescubre juegos de navegador gratis — juega al instante, sin descargas ni registro.Jugar
Herramientas de Color ColorHerramientas Generadoras GeneradorHerramientas de Conversión Conversor

Generador de Pares Modo Oscuro

Pega una paleta HEX de modo claro y obtén los colores de modo oscuro mediante inversión de luminosidad OKLCH. Comprobaciones WCAG y exportación CSS.

Pega colores HEX separados por saltos de línea, comas o espacios. Notación corta (#fff) soportada.

¿Qué es el Generador de Pares Modo Oscuro?

Una herramienta perceptualmente precisa que convierte cualquier paleta de modo claro en su contraparte de modo oscuro. En lugar de simplemente invertir los valores HEX, trabaja en OKLCH — el espacio de color perceptualmente uniforme que impulsa el CSS moderno — invirtiendo solo el componente de luminosidad mientras preserva el tono. Esto mantiene los colores de marca reconocibles en modo oscuro y les da la apariencia más calmada que los usuarios esperan. Cada par se verifica contra las pautas de contraste WCAG para que puedas enviar interfaces accesibles.

Características Principales

  • Inversión de luminosidad basada en OKLCH preserva tono e identidad de marca
  • Relación de contraste WCAG por color contra fondos #FFFFFF y #121212 (insignias AA / AAA)
  • Desaturación, piso y techo de luminosidad ajustables para control fino
  • Muestras de vista previa claras y oscuras lado a lado
  • Exporta como variables CSS listas para usar en :root, [data-bs-theme="dark"] y prefers-color-scheme
  • Acepta HEX de 3 y 6 dígitos en cualquier formato separado por espacios, comas o líneas
  • 100% en el navegador — tu paleta nunca sale del dispositivo
Generador de Pares Modo Oscuro — Pega una paleta HEX de modo claro y obtén los colores de modo oscuro mediante inversión de luminosidad OKLCH. Comprobaci
Generador de Pares Modo Oscuro

Cómo Usar

  1. Pega tus colores HEX de modo claro en la caja de paleta (uno por línea funciona mejor)
  2. Opcionalmente ajusta la desaturación si los colores oscuros se ven demasiado saturados
  3. Ajusta el piso de luminosidad para evitar que los fondos oscuros lleguen al negro puro
  4. Ajusta el techo de luminosidad para evitar que el texto claro llegue al blanco puro (reduce fatiga visual)
  5. Haz clic en Generar Par Oscuro para ver muestras, puntuaciones WCAG y exportación de variables CSS
  6. Copia el bloque CSS y pégalo en tu hoja de estilos — tu tema oscuro está listo

Preguntas Frecuentes

HSL es un espacio de color de conveniencia de los años 70 — agradable para selectores pero perceptualmente incorrecto. Un amarillo brillante en HSL 60 50 50 se ve mucho más brillante que un azul profundo en HSL 240 50 50, por lo que invertir ingenuamente la luminosidad en HSL da resultados desiguales: amarillos pálidos se vuelven mostaza apagada mientras los azules pálidos siguen brillantes. OKLCH (diseñado por Björn Ottosson en 2020 y ahora nativo en CSS) es perceptualmente uniforme: valores de luminosidad iguales se ven igualmente brillantes en todos los tonos.

Los temas oscuros intencionalmente desaturan colores porque la saturación vívida contra un fondo oscuro es visualmente fatigante — tus pupilas se ensanchan en ambientes con poca luz, amplificando la aberración cromática. iOS, macOS y Material Design reducen el croma en sus paletas oscuras aproximadamente 10-30%. La desaturación predeterminada del 15% aquí coincide con esas guías. Si tus colores oscuros se sienten DEMASIADO descoloridos, reduce el deslizador hacia 0%; si se sienten demasiado vibrantes, empújalo hacia 50%.

El piso establece la luminosidad más oscura que cualquier color de modo oscuro puede alcanzar. Un piso del 12% evita que tus colores más oscuros se ajusten al negro puro (#000), lo cual las Directrices de Interfaz Humana de Apple desalientan explícitamente porque los fondos negros puros hacen más visibles los halos y fantasmas alrededor del texto en OLED. El techo limita cuán claro puede ser un color de modo oscuro, típicamente 92-95%, por lo que tu texto 'blanco' se convierte en un blanco suave en lugar de #FFFFFF — eso reduce la dureza del contraste.

La herramienta calcula las relaciones de contraste WCAG 2.1 para cada par contra el color de superficie (fondo) que selecciones para cada tema, y los etiqueta: Fallar (<3), AA Lg (≥3, solo texto grande), AA · AAA Lg (≥4.5, pasa AA para texto de cuerpo y AAA para texto grande), AAA (≥7, pasa AAA para texto de cuerpo). El texto del cuerpo necesita al menos 4.5:1 y el texto grande al menos 3:1. Si ves insignias de Fallar, el color está pensado como decorativo o de gran visualización, no para texto del cuerpo.

Usa los dos menús desplegables de 'superficie (fondo)' encima de la tabla de pares. Las versiones anteriores medían cada color contra un blanco fijo (#FFFFFF) o casi negro (#121212), lo cual no es como se evalúa realmente la accesibilidad: el texto pasa o falla contra la superficie sobre la que se asienta. Ahora eliges qué color de la paleta es tu token de fondo para el tema claro y el oscuro, y la relación WCAG de cada color restante se recalcula contra esa superficie real. La superficie seleccionada se muestra como '— superficie —' en lugar de puntuarse contra sí misma. Los umbrales son 4.5:1 para texto de cuerpo (AA) y 3:1 para texto grande (AA Grande, 18pt/24px o 14pt/18.5px negrita). Los pares que fallan también se anotan como comentarios en el CSS exportado.

Esta herramienta usa la fórmula de relación de contraste WCAG 2.1 (luminancia relativa, umbrales 4.5:1 / 3:1) porque es el estándar referenciado legalmente actual (EN 301 549, ADA, Sección 508). APCA (Algoritmo de Contraste Perceptual Accesible) es la métrica candidata para el emergente WCAG 3 y modela el contraste de luminosidad percibida mucho mejor, especialmente para fondos oscuros, donde se sabe que WCAG 2.1 es demasiado permisivo con texto claro sobre oscuro. APCA aún no es normativo, así que publica según WCAG 2.1 hoy, pero si un par de tema oscuro apenas pasa 2.1, trátalo como límite y verifícalo perceptualmente.

Solo colores sólidos. Para gradientes, pasa cada color de parada por la herramienta individualmente y reensambla en tu CSS. La interpolación de gradiente OKLCH en CSS moderno (linear-gradient(in oklch, ...)) dará un resultado perceptualmente suave con las paradas convertidas, mucho más suave que el gradiente predeterminado en espacio sRGB que tiende a embarrarse en el medio.

La exportación CSS usa variables CSS estándar que funcionan nativamente en Tailwind v3+ vía la directiva @theme, en SCSS vía @use 'sass:meta', y en CSS plano en cualquier navegador moderno (Chrome 49+, Safari 9.1+, Firefox 31+). Para React Native o Flutter, copia los valores HEX de la tabla de muestras y defínelos en tu propio archivo de constantes. El patrón de nombres (--color-1, --color-2, ...) es intencionalmente genérico para que puedas renombrarlos para que coincidan con tus tokens de diseño.

color-scheme le dice al navegador qué controles de formulario y barras de desplazamiento incorporadas usar — NO modifica tu paleta. color-mix() mezcla dos colores pero no puede invertir inteligentemente la luminosidad manteniendo el tono. Esta herramienta te da valores HEX concretos que envías como tokens de diseño, lo que significa que controlas exactamente lo que ven los usuarios y puedes auditar accesibilidad por adelantado. La salida también es compatible con QA de diseño basado en capturas de pantalla y emails HTML renderizados en servidor.
Ver también
Herramientas de ColorHERRAMIENTAS DE COLOR31
WuToolsWUTOOLS