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.
Encontra a entrada da paleta do Tailwind mais próxima de uma cor que você tem, medida como ΔE em OKLab, e não como distância em RGB. Também responde à pergunta diferente e muitas vezes mais útil de a qual família a sua cor pertence.
Sua cor
Como isso é medido
A distância é ΔE em OKLab, não a distância euclidiana em RGB. No RGB, azul-marinho e azul puro estão a 128, e dois cinzas médios a dezesseis saem quatro vezes mais perto — para uma diferença bem mais visível. O OKLab foi feito para que a distância em linha reta se aproxime da diferença percebida, que é exatamente a pergunta aqui.
- ≤ 0,001 — Idêntico: esta é a cor do Tailwind.
- ≤ 0,02 — Abaixo da diferença apenas perceptível. Uma troca segura.
- ≤ 0,05 — Dá para ver a diferença lado a lado, mas isolada está perto o bastante.
- ≤ 0,1 — Uma mudança perceptível. Serve para um fundo, não para uma marca.
- > 0,1 — Uma cor diferente. O Tailwind não tem nada perto disso — melhor estender o tema.
Paleta lida do Tailwind 4.3.3 como está instalado, e conferida contra ele por um teste a cada execução.
Correspondência mais próxima
indigo-600
#4f39f6Dá para ver a diferença lado a lado, mas isolada está perto o bastante.
ΔE OKLab
0,0319
Valor do Tailwind
oklch(51.1% 0.262 276.966)
Próximas mais perto
- indigo-700
#432dd7ΔE 0,0545 - blue-700
#1447e6ΔE 0,0580 - blue-600
#155dfcΔE 0,0698 - indigo-500
#6260ffΔE 0,0745 - violet-700
#7008e7ΔE 0,0810 - violet-600
#7f22feΔE 0,0925 - violet-800
#5d0ec0ΔE 0,1010
Famílias mais próximas
- indigomelhor passo 600ΔE 0,0319
- bluemelhor passo 700ΔE 0,0580
- violetmelhor passo 700ΔE 0,0810
- purplemelhor passo 700ΔE 0,1132
- skymelhor passo 700ΔE 0,1415
Uma pergunta diferente de “a cor mais próxima”, e muitas vezes a mais útil: a que família a sua cor de marca pertence, pontuada pelo melhor passo dela.
Se nada aqui está perto o bastante, a resposta é estender o tema em vez de aceitar o mais próximo: gere uma rampa inteira de 50 a 950 a partir da sua cor e cole no @theme.
Como usar
Informe a sua cor
Normalmente um hexadecimal de marca que alguém lhe mandou. O token mais próximo, o hexadecimal dele e o ΔE aparecem na hora.
Pule os neutros se estiver casando um matiz
slate, gray, zinc, neutral e stone vencem toda consulta próxima de cinza, o que está correto e raramente é a resposta que você queria.
Leia a lista de famílias
Cada família pontuada pelo seu melhor passo. “A cor da sua marca é um indigo” é mais acionável do que “a amostra mais próxima é indigo-600”.
Perguntas frequentes
Por que ΔE em vez de distância RGB?
Porque a distância RGB não corresponde ao que você vê. Ela põe azul-marinho e azul puro a 128 de distância enquanto chama dois cinzas médios a dezesseis de distância de quatro vezes mais próximos — para uma diferença que é bem mais visível. O OKLab foi construído para que a distância em linha reta aproxime a diferença percebida.
O que é um bom ΔE?
Abaixo de cerca de 0,02 em OKLab é efetivamente a mesma cor; até 0,05 é uma correspondência que ninguém vai questionar; passado 0,1 você está escolhendo uma cor diferente e deveria dizer isso em voz alta. Os limiares estão listados na página.
Por que uma entrada está marcada como fora do sRGB?
Porque o Tailwind agora define a sua paleta em OKLCH, e algumas entradas caem fora do que o sRGB consegue mostrar. O hexadecimal é uma aproximação mapeada para o gamut; usar o valor `oklch()` mantém a saturação extra em um monitor P3.
Nada está perto o bastante. E agora?
Estenda o tema em vez de aceitar o mais próximo. Gere uma rampa completa de 50 a 950 a partir da sua cor e cole-a em `@theme` — uma cor de marca aproximada para a amostra de fábrica mais próxima deixa de ser a cor da marca.
Pode receber de
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.
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.
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.
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.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
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.
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.
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.