Buscador de nome de cor
Dada qualquer cor (hex, RGB ou seletor), encontra os 8 nomes mais próximos em três bases: cores nomeadas CSS 4 (148, como `cornflowerblue` que você pode usar direto em CSS), paleta padrão Tailwind v3 (110+ entradas de `slate-50` a `rose-700`) e pesquisa XKCD de cores (nomes mais comuns de um estudo com 222 mil respondentes). A distância é medida em OKLab — espaço perceptualmente uniforme — então o ranking realmente reflete como o olho humano percebe similaridade, diferente da euclidiana RGB que enfatiza demais luminosidade.
- dodgerblue#1e90ff · ΔE 0.0363
- royalblue#4169e1 · ΔE 0.0668
- cornflowerblue#6495ed · ΔE 0.0697
- mediumslateblue#7b68ee · ΔE 0.0871
- steelblue#4682b4 · ΔE 0.1011
- mediumpurple#9370db · ΔE 0.1131
- slateblue#6a5acd · ΔE 0.1140
- lightslategray#778899 · ΔE 0.1564
Distância euclidiana OKLab — perceptualmente uniforme. Menor é mais próximo.
Como usar
- Insira um hex (`#3b82f6`, `3b82f6`, `#36e`), `rgb(59, 130, 246)` ou use o seletor.
- Alterne entre as bases CSS, Tailwind e XKCD.
- Copie um nome para usar direto em seu CSS ou config Tailwind.
Perguntas frequentes
- Por que OKLab e não distância RGB?
- Distância RGB pura dá rankings enganosos — 10% de mudança de brilho em cores escuras vale igual a em cores brilhantes, mas nossos olhos são muito mais sensíveis a tons médios. OKLab (Björn Ottosson, 2020) é calibrado para uniformidade perceptual, então 'mais próximo' significa 'parece mais similar'.
- O que é a pesquisa XKCD?
- Em 2010, Randall Munroe pesquisou 222.500 pessoas pedindo para nomear 5 cores aleatórias cada. Os nomes com mais consenso viraram paleta útil, usada até em bibliotecas como matplotlib. Inclui nomes coloquiais como 'puke green' (fora do nosso top 60).
- Por que só 8 resultados?
- Além do rank 8, distâncias ficam tão grandes que 'mais próximo' perde sentido. Para lista completa, o algoritmo é simples distância euclidiana OKLab.
Ferramentas relacionadas
Exportador de Tokens de Cor
Defina uma paleta de cores uma vez, exporte para CSS custom properties, config Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color ou `colors.xml` Android. Swatches de pré-visualização ao vivo.
Paleta de Cores Tailwind
Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().
Seletor de Cor OKLCH
Escolha cores no espaço OKLCH perceptualmente uniforme (luminosidade · croma · matiz) — e veja se cada escolha cabe dentro do gamut de tela sRGB.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Cores Nomeadas do CSS
Todas as 147 cores nomeadas CSS / X11 com HEX, RGB e amostra visual — pesquisáveis e agrupadas por tonalidade.
Interpolação de Cor / Passos de Gradiente
Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.