Buscador de nome de cor
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
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.