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 fondos típicos claros (#FFFFFF) y oscuros (#121212) y los etiqueta: Fallar (<3), AA Grande (≥3), AA (≥4.5), AAA (≥7). El texto del cuerpo necesita al menos AA (4.5:1) y el texto grande al menos AA Grande (3:1). Si ves insignias de Fallar, el color está pensado como decorativo o de gran visualización, no para texto del cuerpo.

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