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.
Constrói uma rampa de 50 a 950 a partir de uma cor, do jeito que um design system quer. As metas de luminosidade são a média das próprias famílias cromáticas do Tailwind, medidas a partir do pacote instalado e não escolhidas à mão, então o resultado cai onde o seu olho já espera cada passo. Um controle deslizante move entre essa curva familiar e uma espaçada uniformemente.
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
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
O matiz e o croma dela semeiam a rampa. A luminosidade dela decide qual passo recebe o anel ao redor — o passo mais próximo da cor que você trouxe.
Decida quão familiar você quer a curva
Em 100%, os passos ficam onde o Tailwind os põe, que é o que todo mundo na equipe já tem na cabeça. Em 0, a rampa é uma linha reta de 0,97 a 0,25 — mais uniformemente espaçada, e menos familiar. Não há resposta certa; casar com um produto existente é o motivo habitual para ficar em 100%.
Adicione deriva de matiz se a ponta escura parecer estranha
Famílias reais derivam: o vermelho do Tailwind vai de 17° no passo 50 a 26° no 950, porque um vermelho escuro se lê melhor um pouco mais quente. Alguns graus normalmente bastam; o controle vai até 40 em qualquer direção.
Decida se fica dentro do sRGB
Ligado, cada passo é uma cor que qualquer tela consegue mostrar e o hexadecimal é exato. Desligado, os passos do meio de um matiz saturado mantêm o croma, um monitor P3 os mostra, e o hexadecimal vira uma aproximação — os passos que transbordam são marcados.
Exporte como variáveis, um tema do Tailwind ou JSON
O prefixo é seu. A forma JSON também carrega as âncoras de luminosidade, o que é útil se algo mais adiante precisar reconstruir a mesma rampa.
Perguntas frequentes
O hexadecimal da minha marca não está em lugar nenhum da rampa. Isso é um bug?
Não, e é o comportamento honesto. A rampa é construída a partir de metas de luminosidade, não enfiada pela sua cor, então, a menos que a sua cor por acaso caia exatamente em uma das onze metas, ela não vai aparecer literalmente. O passo com anel é o mais próximo. Se o hexadecimal exato precisa estar lá, use-o diretamente para aquele token e deixe a rampa fornecer o resto.
Estas são cores do Tailwind?
Não. O que vem do Tailwind é a *forma* da curva — os onze valores de luminosidade, na média das suas famílias cromáticas. O matiz e o croma são seus. Para descobrir qual token do Tailwind é o mais próximo de uma cor que você tem, a busca de cor Tailwind mais próxima mede isso em ΔE.
“Perceptualmente uniforme” significa que todo passo difere pela mesma quantidade?
Só com 0% de ancoragem. Em 100%, a rampa segue deliberadamente a curva do Tailwind, que não é uniformemente espaçada — ela concentra a ponta clara para que haja tons de fundo utilizáveis o bastante. O que o OKLCH compra em qualquer caso é que os números significam algo perceptualmente, então duas famílias construídas assim andam em passo uma com a outra.
Os passos passam na WCAG uns contra os outros?
Esta página não verifica isso, além do painel de prova na aba de modo escuro. Passos iguais de luminosidade não são passos iguais de contraste, porque o contraste WCAG é calculado sobre luminância relativa e a luminosidade OKLCH não é uma função linear dela. Leve o par que você realmente pretende usar ao verificador de contraste.
Pode receber de
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.
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.
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.
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.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
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.
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.
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.
Cor Tailwind mais próxima
Nearest Tailwind Colour
Encontra a entrada da paleta Tailwind mais próxima de qualquer cor e mostra a distância perceptual.
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.