Ferramentas de Cor CorGeradores GeradorConversores Converter

Gerador de Pares Modo Escuro

Cole uma paleta HEX de modo claro e obtenha as cores de modo escuro correspondentes via inversão de luminosidade OKLCH. Verificações WCAG e exportação CSS.

Cole cores HEX separadas por quebras de linha, vírgulas ou espaços. Notação curta (#fff) suportada.

O Que É o Gerador de Pares Modo Escuro?

Uma ferramenta perceptualmente precisa que converte qualquer paleta de modo claro em sua contraparte de modo escuro. Em vez de simplesmente inverter valores HEX, trabalha em OKLCH — o espaço de cor perceptualmente uniforme que impulsiona o CSS moderno — invertendo apenas o componente de luminosidade enquanto preserva o matiz. Isso mantém as cores de marca reconhecíveis no modo escuro e dá-lhes a aparência mais calma que os usuários esperam. Cada par é verificado contra as diretrizes de contraste WCAG para que você possa lançar interfaces acessíveis.

Características Principais

  • Inversão de luminosidade baseada em OKLCH preserva matiz e identidade de marca
  • Razão de contraste WCAG por cor contra fundos #FFFFFF e #121212 (selos AA / AAA)
  • Dessaturação, piso e teto de luminosidade ajustáveis para controle fino
  • Amostras de visualização claras e escuras lado a lado
  • Exporta como variáveis CSS prontas para uso em :root, [data-bs-theme="dark"] e prefers-color-scheme
  • Aceita HEX de 3 e 6 dígitos em qualquer formato separado por espaços, vírgulas ou linhas
  • 100% no navegador — sua paleta nunca sai do dispositivo
Gerador de Pares Modo Escuro — Cole uma paleta HEX de modo claro e obtenha as cores de modo escuro correspondentes via inversão de luminosidade OKLCH.
Gerador de Pares Modo Escuro

Como Usar

  1. Cole suas cores HEX de modo claro na caixa de paleta (uma por linha funciona melhor)
  2. Opcionalmente ajuste a dessaturação se as cores escuras parecerem saturadas demais
  3. Ajuste o piso de luminosidade para evitar que fundos escuros virem preto puro
  4. Ajuste o teto de luminosidade para evitar que o texto claro vire branco puro (reduz fadiga ocular)
  5. Clique em Gerar Par Escuro para ver amostras, pontuações WCAG e exportação de variáveis CSS
  6. Copie o bloco CSS e cole na sua folha de estilos — seu tema escuro está pronto

Perguntas Frequentes

HSL é um espaço de cor de conveniência dos anos 70 — agradável para seletores mas perceptualmente errado. Um amarelo brilhante em HSL 60 50 50 parece muito mais brilhante que um azul profundo em HSL 240 50 50, então inverter ingenuamente a luminosidade em HSL dá resultados desiguais. OKLCH (projetado por Björn Ottosson em 2020 e agora nativo no CSS) é perceptualmente uniforme: valores de luminosidade iguais parecem igualmente brilhantes em todos os matizes. Inverter L em OKLCH dá um tema escuro equilibrado e acessível sem ajuste cor-a-cor.

Temas escuros intencionalmente dessaturam cores porque saturação vívida contra fundo escuro é visualmente fatigante — suas pupilas dilatam em ambientes de pouca luz, amplificando aberração cromática. iOS, macOS e Material Design todos reduzem croma em suas paletas escuras em aproximadamente 10-30%. A dessaturação padrão de 15% aqui corresponde a essas diretrizes. Se suas cores escuras parecerem MUITO desbotadas, reduza o controle deslizante para 0%; se parecerem vibrantes demais, empurre para 50%.

Piso define a luminosidade mais escura que qualquer cor de modo escuro pode atingir. Um piso de 12% impede que suas cores mais escuras se ajustem ao preto puro (#000), o que as Diretrizes de Interface Humana da Apple explicitamente desencorajam porque fundos preto puro tornam halos e fantasmas ao redor do texto mais visíveis em OLED. Teto limita o quão claro uma cor de modo escuro pode ser, tipicamente 92-95%, então seu texto 'branco' se torna um branco suave em vez de #FFFFFF — reduz aspereza de contraste.

A ferramenta calcula razões de contraste WCAG 2.1 para cada par contra fundos típicos claro (#FFFFFF) e escuro (#121212) e os rotula: Falhar (<3), AA Grande (≥3), AA (≥4.5), AAA (≥7). Texto de corpo precisa pelo menos AA (4.5:1) e texto grande pelo menos AA Grande (3:1). Se você vir selos de Falhar, a cor é destinada como decorativa ou de exibição grande, não para texto de corpo.

Apenas cores sólidas. Para gradientes, passe cada cor de parada pela ferramenta individualmente e remonte no seu CSS. A interpolação de gradiente OKLCH no CSS moderno (linear-gradient(in oklch, ...)) dará um resultado perceptualmente suave com as paradas convertidas, muito mais suave que o gradiente padrão em espaço sRGB que tende a embaçar no meio.

A exportação CSS usa variáveis CSS padrão que funcionam nativamente em Tailwind v3+ via a diretiva @theme, em SCSS via @use 'sass:meta', e em CSS puro em qualquer navegador moderno (Chrome 49+, Safari 9.1+, Firefox 31+). Para React Native ou Flutter, copie os valores HEX da tabela de amostras e defina-os em seu próprio arquivo de constantes. O padrão de nomenclatura (--color-1, --color-2, ...) é intencionalmente genérico para que você possa renomeá-los para corresponder aos seus tokens de design.

color-scheme diz ao navegador quais controles de formulário e barras de rolagem integrados usar — NÃO modifica sua paleta. color-mix() mistura duas cores mas não pode inverter inteligentemente a luminosidade mantendo o matiz. Esta ferramenta lhe dá valores HEX concretos que você lança como tokens de design, o que significa que você controla exatamente o que os usuários veem e pode auditar acessibilidade antecipadamente. A saída também é compatível com QA de design baseado em capturas e emails HTML renderizados no servidor.
Veja também
Ferramentas de CorFERRAMENTAS DE COR31
WuToolsWUTOOLS