Conversor de Formato de Cor

Digite uma cor em qualquer sintaxe CSS e veja-a como HEX, RGB, HSL, HWB, LAB, LCH, OKLCH e OKLAB de uma vez, com uma amostra ao vivo. Tudo é convertido no seu navegador.

O Conversor de Formato de Cor analisa e converte cada cor localmente no seu navegador. Os valores que você digita ou cola nunca saem do seu dispositivo e nada é enviado à ArrayKit.

Abrir o Conversor de Cores CSS

Sobre Conversor de Formato de Cor

O Conversor de Formato de Cor pega uma única cor escrita em qualquer sintaxe CSS — um hex como #7c3aed, um valor rgb() ou hsl(), hwb(), lab(), lch(), oklch(), oklab(), ou uma cor nomeada como rebeccapurple — e a mostra simultaneamente em todas as outras notações. Você obtém HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH e OKLAB, além da cor CSS nomeada mais próxima e uma amostra ao vivo, cada uma pronta para copiar. É feito para designers e desenvolvedores front-end que estão migrando uma paleta para espaços modernos como OKLCH, combinando uma cor entre uma ferramenta de design e a folha de estilos, ou verificando como um valor fica em um espaço perceptualmente uniforme. O alfa é preservado de ponta a ponta. Toda análise e conversão roda localmente no seu navegador, então as cores que você digita nunca saem do seu dispositivo.

Recursos

Como usar Conversor de Formato de Cor

  1. Digite ou cole uma cor na entrada em qualquer formato CSS
  2. Leia a amostra ao vivo para confirmar que digitou a cor certa
  3. Copie a notação que você precisa — HEX, RGB, HSL, HWB, LAB, LCH, OKLCH ou OKLAB
  4. Pegue a cor nomeada mais próxima quando quiser um rótulo legível

Exemplo

Entrada

#7c3aed

Saída

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

Um hex se expande em todas as notações de cor CSS de uma vez.

Erros comuns e solução de problemas

Perguntas frequentes

Quais formatos de cor este conversor gera?
Ele mostra HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH e OKLAB simultaneamente, além da cor CSS nomeada mais próxima, para qualquer cor que você digitar.
O que é OKLCH e por que eu converteria para ele?
OKLCH é um espaço de cor perceptualmente uniforme onde luminosidade, croma e matiz se comportam de forma previsível. Designers migram paletas para ele porque interpolar e clarear cores em OKLCH parece mais uniforme que em HSL ou RGB.
Como a cor nomeada mais próxima é escolhida?
Sua cor é comparada com as 148 cores CSS nomeadas pela distância em RGB, e a correspondência mais próxima é retornada. Quando nada está genuinamente perto, a ferramenta diz isso em vez de sugerir um nome enganoso.
O conversor mantém o canal alfa?
Sim. Uma cor translúcida é mostrada como HEXA (#rrggbbaa), como rgba()/hsla(), e com uma cauda de alfa `/ 0.5` em HWB, LAB, LCH, OKLCH e OKLAB. Cores opacas omitem o alfa por completo.
Posso colar um valor oklch() ou lab() como entrada?
Sim. A entrada aceita qualquer sintaxe de cor CSS, incluindo oklch(), oklab(), lab(), lch() e hwb(), e a converte em todos os outros formatos do mesmo jeito que trata hex ou rgb().
As cores que eu digito são enviadas a um servidor?
Não. A análise e cada conversão rodam localmente no seu navegador, então as cores que você digita ou cola nunca saem do seu dispositivo e não são enviadas à ArrayKit.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit