Paleta para modo escuro
Dark Mode Palette
Monta uma rampa 50–950 a partir de uma cor e a espelha numa versão escura, para que cada par de tokens mantenha o contraste.
Deriva uma escala escura de uma clara espelhando-a: o passo 50 vira 950, o 100 vira 900, e assim por diante. Essa é a única derivação que mantém o *contrato* dos nomes dos tokens, então um par que passou na WCAG no modo claro passa com a mesma razão no modo escuro, e um componente escrito contra a escala não precisa de mudança. Esta é a mesma página da escala de tons e matizes, aberta na aba escura.
Cor base
O matiz e o croma dela semeiam a rampa; a luminosidade decide qual passo fica marcado como o que você escolheu.
Rampa
Os alvos de luminosidade são a média das próprias famílias cromáticas do Tailwind, medidas no pacote instalado em vez de escolhidas aqui.
Modo escuro
O passo 50 vira o 950, o 100 vira o 900, e assim por diante. Os nomes dos tokens mantêm o sentido — 500 continua sendo o tom médio — e um componente escrito em cima da escala não precisa de mudança nenhuma.
Claro
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Escuro
50
100
200
300
400
500
600
700
800
900
950
Por que espelhar: o contraste de um par de tokens se mantém
- 50 sobre 900: claro 8,93 · escuro 12,73
- 100 sobre 800: claro 6,68 · escuro 7,19
- 200 sobre 950: claro 11,16 · escuro 7,19
Os nomes dos tokens mantêm o sentido, então um componente escrito em cima da escala não precisa de mudança nenhuma.
Exportar
Procurando um conjunto de matizes em vez da rampa de um só? O gerador de paleta de cores monta harmonias. Para achar o token do Tailwind mais próximo de qualquer uma delas, a busca da cor mais próxima mede isso em ΔE.
Como usar
Insira a cor-base
Uma cor. A rampa clara é construída primeiro e a escura é derivada dela, então as duas saem da mesma semente em vez de serem mantidas separadamente.
Escolha a estratégia
Espelhar é o padrão e a que tem o argumento de contraste por trás. Deslocar para mais escuro move cada passo três posições para baixo em vez disso, o que mantém a ordenação para que um degradê de claro para escuro não se inverta, ao custo dos passos mais escuros. Espelhar e atenuar é espelhar com o croma puxado ainda mais para baixo.
Amorteça o croma para preenchimentos grandes
Cor saturada sobre uma superfície escura brilha e vibra, e o efeito piora quanto maior a área. Puxar o croma para baixo é a decisão conservadora; deixe-o perto de 100% se a escala só for usada para pequenos destaques e texto.
Leia o painel de prova
Com o espelhamento ligado, ele imprime a razão WCAG de três pares de tokens nos dois modos, lado a lado. É a afirmação sendo verificada na sua frente em vez de apenas afirmada.
Exporte as duas escalas de uma vez
As formas CSS emitem a escala clara em `:root` e a escura dentro de um bloco `prefers-color-scheme: dark`, então o tema inteiro é uma colagem só.
Perguntas frequentes
Posso colar a paleta clara que já tenho?
Como conjunto, não. Esta página pega uma cor e constrói as duas rampas a partir dela, então uma paleta existente com passos ajustados à mão não vai sobreviver a ser alimentada uma cor de cada vez — você receberia onze passos regulares, não os seus onze. Onde a paleta existente importa mais do que a regularidade, converta um token de cada vez e verifique cada par no verificador de contraste.
O espelhamento preserva o contraste exatamente?
De perto, não exatamente. A rampa é simétrica em luminosidade OKLCH, e o contraste WCAG é calculado sobre luminância relativa, que não é uma função linear dela — então as razões saem próximas umas das outras em vez de idênticas. O painel de prova imprime os dois números para que você veja a diferença para a sua cor em vez de aceitar a afirmação na confiança.
Devo usar preto puro como fundo escuro?
Normalmente não. Preto puro contra texto claro maximiza o contraste, e em um LCD o halo que isso produz torna tipografia pequena mais difícil de ler, não mais fácil. A faixa escura aqui é mostrada sobre um cinza muito escuro por esse motivo. Um celular OLED é o único caso em que o preto verdadeiro compra algo real, em energia.
Por que esta é uma página separada da escala de tons e matizes?
Não é — é a mesma ferramenta com a aba escura já ligada, porque “faça uma paleta escura para mim” e “faça uma rampa de 50 a 950 para mim” chegam como perguntas diferentes de pessoas diferentes. Tudo o que está em uma página está na outra.
Pode receber de
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.