Conversor de cores
Converta uma cor entre HEX, RGB, HSL, HWB, OKLCH, OKLab e CMYK, com tons claros, tons escuros e o nome CSS mais próximo.
Como usar
Digite uma cor em qualquer notação CSS, ou escolha-a no seletor de cores, e a mesma cor aparece em todos os formatos, cada um com seu botão de copiar. A ferramenta lê #hex de 3, 4, 6 ou 8 dígitos, rgb(), hsl(), hwb(), oklch(), oklab() e os 148 nomes de cor do CSS, com ou sem transparência.
HEX e RGB escrevem os mesmos três canais de 0 a 255, na base 16 ou na base 10. HSL e HWB descrevem as mesmas cores sRGB pelo matiz, com saturação e luminosidade ou com branco e preto. OKLCH e OKLab, definidos no CSS Color Module Level 4, foram feitos para que passos iguais pareçam mais ou menos iguais aos olhos: uma luminosidade OKLCH de 50% parece igualmente clara em qualquer matiz, o que o HSL não faz.
OKLCH e OKLab também podem descrever cores que as telas em sRGB não conseguem mostrar. Uma cor assim é levada aos valores sRGB mais próximos, e o resultado avisa. O CMYK usa a fórmula simples a partir do RGB, sem perfil de cor; as gráficas convertem com o próprio perfil, então trate o valor apenas como ponto de partida.
Abaixo dos formatos ficam o nome de cor CSS mais próximo, medido pela distância em OKLab (o CSS Color 4 adota 0,02 como a menor diferença perceptível), e cinco tons claros e cinco tons escuros: a cor misturada com branco ou preto em sRGB, como faz o color-mix(in srgb, …) do CSS. Clique em um para copiar. Tudo é calculado no seu navegador.
Exemplo
#4169e2 está a um passo de royalblue (#4169e1): a diferença entre eles, 0,002, fica muito abaixo de 0,02, a menor diferença perceptível.
#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) e oklch(57.37% 0.1946 257.86).#4169e2Nome mais próximo royalblue (#4169e1), a uma distância de 0,002, abaixo de 0,02.oklch(70% 0.4 150)Saturado demais para o sRGB: aparece como #00d600, a cor mais próxima que uma tela consegue mostrar.rgb(26 115 232 / 50%)#1a73e880: os dois últimos dígitos guardam a opacidade, 80 em hexadecimal, ou 128 de 255.
Perguntas frequentes
Qual a diferença entre HSL e OKLCH?
Os dois usam o matiz, mas a luminosidade do HSL não é a que o olho vê: hsl(60 100% 50%) é amarelo e hsl(240 100% 50%) é azul, ambos com 50%, mas no OKLCH o amarelo tem luminosidade de 96,8% e o azul de 45,2%. O OKLCH mantém a luminosidade percebida quando o matiz muda, por isso é melhor para montar escalas de cores.
Por que o CMYK é diferente do da minha gráfica?
A impressão depende do papel, das tintas e da máquina, e isso é descrito por um perfil de cor. Esta ferramenta usa a fórmula sem perfil, então a gráfica vai converter do RGB com as próprias configurações.
O que significam os códigos hex de 8 dígitos?
Os dois últimos dígitos são a opacidade: ff é totalmente opaco e 00 totalmente transparente. #1a73e880 é a cor #1a73e8 com cerca de 50%.
rgb(26, 115, 232) é o mesmo que rgb(26 115 232)?
Sim. A forma com vírgulas é a sintaxe antiga do CSS; a forma com espaços vem do CSS Color 4 e escreve a transparência depois de uma barra, como em rgb(26 115 232 / 50%). Os navegadores aceitam as duas.
Minha cor é enviada para algum lugar?
Não. A conversão acontece no seu navegador.