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.
Lê qualquer cor CSS — hexadecimal, `rgb()`, `hsl()`, `lab()`, `oklch()`, uma palavra-chave — e a mostra em todas as notações de uma vez, sobre um fundo claro e um escuro. Também diz quando uma cor está fora do sRGB e qual é a mais próxima que dá para alcançar.
Lido como HEX · a palavra-chave mais próxima é mediumslateblue (#7b68ee), ΔEok 0,050
Sobre claro
Texto nesta cor
Texto corrido ao lado, para comparar.
Sobre escuro
Texto nesta cor
Texto corrido ao lado, para comparar.
| HEX | #5b6cffO que qualquer ferramenta de design copia. | |
|---|---|---|
| RGB | rgb(91 108 255)Os canais como uma tela os recebe. | |
| HSL | hsl(233.78 100% 67.84%)Um rearranjo do sRGB. A “luminosidade” dele não é perceptual. | |
| HWB | hwb(233.78 35.69% 0%)A mesma roda descrita como um matiz mais branco e preto. | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*, referido a D50 como o CSS define. | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* na forma polar. O croma vai até uns 150. | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)OKLab retangular. Aqui a distância euclidiana é distância perceptual. | |
| OKLCH | oklch(60.153% 0.2167 273.01)O que vale a pena deixar como padrão — veja a nota abaixo. |
Por que OKLCH é o padrão a escolher
- A interpolação continua saturada. Uma reta entre duas cores no sRGB passa perto do eixo neutro, então um degradê de azul para amarelo fica cinza no meio. Em OKLCH o caminho contorna a roda de matizes e o ponto médio mantém o croma. É a maior diferença visível e a razão de o CSS ter ganhado
in oklch. - Luminosidade quer dizer luminosidade. Duas cores HSL a
50%podem diferir em brilho percebido por um fator de três:hsl(60 100% 50%)é amarelo ehsl(240 100% 50%)é azul-marinho. O L do OKLCH é calibrado contra a percepção, então uma escala de 50 a 950 construída sobre ele tem passos iguais em vez de um degrau no meio. - Distância quer dizer diferença. A distância euclidiana em OKLab é um ΔE utilizável, e é isso que faz a “cor com nome mais próxima” lá em cima dar respostas sensatas onde uma distância RGB chama um roxo escuro de
darkslateblue.
Esta cor é L 60,2%, C 0,2167, H 273,0°. Segurando L e H e mexendo só em C, você tem a rampa de tons; segurando L e C e mexendo em H, você tem uma paleta harmônica. Nenhuma das duas funciona em HSL.
Como usar
Cole a cor
Qualquer notação. A linha sob a caixa diz como ela foi lida e nomeia a palavra-chave CSS mais próxima, com a distância perceptual até ela.
Olhe os dois fundos
Uma cor está só meio especificada sem a superfície em que se apoia. Um azul médio que se lê como confiante sobre branco se lê como apagado sobre um fundo escuro, e nenhuma notação mostra isso.
Copie a notação de que precisa
Cada linha tem o próprio botão de copiar e uma frase dizendo para que serve aquele espaço. A linha que corresponde à sua entrada fica destacada.
Perguntas frequentes
Por que a página fica recomendando OKLCH?
Três motivos testáveis. A interpolação continua saturada, então um degradê de azul para amarelo não fica cinza no meio. A luminosidade dele é perceptual, então uma rampa de 50 a 950 tem passos uniformes. E a distância nele é diferença percebida, que é o que faz “cor nomeada mais próxima” dar respostas sensatas.
O que “fora do sRGB” significa para a minha cor?
Que a cor exata precisa de valores de canal abaixo de 0 ou acima de 1, que um monitor não consegue produzir. A amostra mostra a cor mais próxima que ele consegue — encontrada mantendo luminosidade e matiz e baixando o croma, o que abre mão só da saturação que a tela nunca teve. Um monitor P3 consegue mostrar mais dela.
A luminosidade do HSL é a mesma do OKLCH?
Não, e essa é a armadilha. `hsl(60 100% 50%)` é um amarelo vivo e `hsl(240 100% 50%)` é um azul-marinho — a mesma “luminosidade”, brilho percebido três vezes diferente. HSL é um rearranjo do sRGB, não um espaço perceptual.
LAB e OKLAB são a mesma coisa?
Espaços diferentes com a mesma ideia. O CIE L*a*b* data de 1976 e tem não uniformidades conhecidas, sobretudo nos azuis, em que um desvio de matiz aparece quando você muda a luminosidade. O OKLab foi ajustado a dados mais novos especificamente para corrigir isso, e é por isso que é o que vale a pena usar.
Pode receber de
Extrair paleta de cores
Palette Extractor
Extrai uma paleta de N cores de uma imagem e exporta como hex, variáveis CSS ou amostra ASE.
Cor média e dominante
Average & Dominant Colour
Devolve uma cor representativa da imagem — média, mediana ou mais frequente — como um recurso de cor.
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.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Conversor de cor para impressão
Print Colour Converter
Converte RGB em CMYK pela fórmula simples (sem perfil ICC ou de papel) e aponta as cores saturadas que uma impressão em quatro tintas vai apagar.
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.
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.
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.
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.