devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Ferramentas de cor

Conversor de Cores

Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta de 50 a 950 pronta para usar.

Funciona no seu navegador · nada é enviado
#4f46e5
Experimente:

Todos os formatos

Paleta de tons e sombras (50–950)

Opções
Esta ferramenta foi útil?Seja o primeiro a avaliar

Como usar: Conversor de Cores

  1. Digite ou cole uma cor em Valor da cor — qualquer formato CSS funciona — ou escolha uma no seletor de cores.
  2. Ajuste a Opacidade se precisar de transparência; valores HEX de 8 dígitos e / alpha são atualizados automaticamente.
  3. Clique em Copiar ao lado do formato que você precisa. Mude para a sintaxe Legada se o seu código usa rgba(…, …) com vírgulas.
  4. Role até a paleta para ver 11 tons e sombras; escolha a saída em variáveis CSS, Tailwind v4, SCSS ou JSON e copie ou baixe.

O que é um conversor de cores?

Um conversor de cores traduz uma cor para as diferentes notações usadas pelo CSS e pelas ferramentas de design. O mesmo índigo pode ser escrito como #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) ou oklch(51.06% 0.2301 276.97) — todos descrevem uma mesma cor sRGB. Designers entregam o HEX do Figma, uma biblioteca de componentes pede canais HSL e um design system moderno pode estar escrito em OKLCH, então converter rápido (e corretamente) é tarefa do dia a dia.

Formatos suportados

FormatoExemploIdeal para
HEX (3, 4, 6, 8 dígitos)#4f46e5, #4f46e580O formato de entrega mais comum. O par opcional de 4º/8º dígito é o alpha: 80 ≈ 50%.
RGB / RGBArgb(79 70 229 / 0.5)Cálculos de canais, canvas, código legado com rgba().
HSL / HSLAhsl(243 75% 59%)Ajustes manuais rápidos de matiz, saturação e luminosidade.
HWBhwb(243 27% 10%)Misturar um matiz puro com branco e preto — intuitivo para seletores de cor.
OKLCHoklch(51% 0.23 277)Paletas perceptualmente uniformes e tokens de design (o Tailwind CSS v4 entrega sua paleta em OKLCH).
CMYKcmyk(66%, 69%, 0%, 10%)Um ponto de partida aproximado para impressão — veja a nota abaixo.
Cores nomeadastomato, rebeccapurpleTodas as 148 palavras-chave de cor CSS são reconhecidas; a ferramenta também mostra o nome mais próximo de qualquer cor.

Por que vale a pena aprender OKLCH

No HSL, um amarelo com “50% de luminosidade” parece muito mais claro que um azul com 50%, porque o HSL é uma transformação geométrica simples do RGB. O OKLCH é baseado no modelo OKLab, pensado para que passos iguais em L (luminosidade) pareçam passos iguais aos olhos, C é a croma (intensidade de cor) e H é o ângulo do matiz. Isso o torna ideal para gerar tons consistentes, estados de hover e pares de cores acessíveis. O OKLCH também pode descrever cores fora do sRGB (por exemplo, Display P3); ao inserir uma dessas, esta ferramenta a ajusta para o sRGB e sinaliza o fato.

Como a paleta de 50 a 950 é gerada

A paleta mantém o matiz da sua cor e trabalha em OKLCH: cada passo recebe uma meta de luminosidade fixa (do muito claro 50 ao muito escuro 950) e uma parte da croma da sua cor, que é reduzida quando necessário para que cada amostra fique dentro do sRGB. Com Manter minha cor exata ativado, a sua entrada substitui o passo cuja luminosidade está mais próxima, então a cor da marca aparece sem alterações na escala. Precisa verificar pares da paleta quanto à acessibilidade? Use o Verificador de Contraste.

Uma nota sobre CMYK

A conversão de tela para impressão depende da tinta, do papel e do perfil ICC que a sua gráfica usa. Os valores CMYK aqui usam a fórmula padrão não calibrada (K = 1 − máx(R, G, B)), que serve para maquetes, mas não para impressões em que a marca é crítica — peça à gráfica uma conversão com perfil.

Usando as cores no Webflow

Cole o valor HEX no seletor de cores do Webflow ou em uma Variável de cor (painel Variables). Criar uma variável por passo da paleta — por exemplo, Marca 50 … Marca 950 — dá a mesma estrutura de tokens da saída em variáveis CSS, para que as classes possam referenciar tons em vez de valores fixos.

Perguntas frequentes

Como converter HEX para RGB manualmente?
Separe os seis dígitos em três pares e converta cada um da base 16 para a base 10. Para #4F46E5: 4F = 79, 46 = 70, E5 = 229, então a cor é rgb(79 70 229). Um código de 3 dígitos como #f60 duplica cada dígito primeiro (#ff6600).
O que significa uma cor HEX de 8 dígitos?
Os dois últimos dígitos são o canal alpha (opacidade), de 00 (totalmente transparente) a ff (opaco). #4f46e580 é o índigo com 128/255 ≈ 50% de opacidade. Todos os navegadores modernos suportam HEX de 4 e 8 dígitos.
Devo usar OKLCH em vez de HEX ou HSL?
Para tokens de design e tons gerados, o OKLCH costuma ser melhor, porque sua luminosidade é perceptualmente uniforme e ele consegue expressar cores de gama ampla. É suportado em todos os principais navegadores atuais. O HEX continua sendo o formato mais portável para entregas e ferramentas mais antigas.
Por que meu valor HSL muda um pouco depois da conversão?
As cores na tela são armazenadas como RGB de 8 bits (0–255 por canal), então muitos valores HSL arredondam para a mesma cor RGB. A ferramenta mostra o HSL com uma casa decimal para que a conversão de volta resulte no mesmo HEX.
Qual é a diferença entre HSL e HWB?
Ambos usam um ângulo de matiz. O HSL então define saturação e luminosidade, enquanto o HWB indica quanto branco e preto misturar ao matiz puro — hwb(0 0% 0%) é vermelho puro e hwb(0 50% 0%) é vermelho misturado com 50% de branco (rosa). O HWB costuma ser mais fácil de entender em seletores de cor.
Posso instalar o Conversor de Cores como um aplicativo da web e usá-lo offline?
Sim. O Conversor de Cores é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

Gerador de Gradiente CSSMonte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefi…Gerador de Box ShadowEmpilhe várias camadas de sombra, ajuste deslocamentos, desfoque, espalhamento e opacidade em um cartão ao …Conversor de Bases NuméricasDigite um número em qualquer base e veja instantaneamente o valor em todas as outras. Analise complemento d…