Conversor de Cores — HEX, RGB, HSL, OKLCH e CMYK

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 a mesma cor sRGB. Designers entregam o HEX do Figma, uma biblioteca de componentes pede canais HSL e um sistema de design moderno pode ser escrito em OKLCH, então converter rápido e corretamente é uma tarefa do dia a dia.

Formatos suportados

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, projetado para que passos iguais em L (luminosidade) pareçam passos iguais aos olhos; C é o croma (intensidade da 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); quando você informar uma delas, esta ferramenta a ajusta para o sRGB e sinaliza isso.

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 fixa de luminosidade (de 50, bem claro, a 950, bem escuro) e uma parcela do croma da sua cor, que é reduzido quando necessário para que cada amostra permaneça dentro do sRGB. Com Manter minha cor exata ativado, a sua entrada substitui o passo cuja luminosidade é 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 usado pela gráfica. 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 trabalhos de impressão 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 Color variable (painel Variables). Criar uma variável para cada passo da paleta — por exemplo, Brand 50 … Brand 950 — oferece a mesma estrutura de tokens da saída em variáveis CSS, para que as classes possam referenciar tons em vez de valores fixos.

Também pesquisado como: hex para rgb, rgb para hex, hex para hsl, conversor oklch, seletor de cor, cmyk, hwb, tons e sombras.

Ferramentas que combinam com: Conversor de Cores

• Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
• Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
• Conversor de Bases — Digite um número em qualquer base e veja instantaneamente o valor em todas as outras.
• Imagem para Base64 — Transforme um arquivo PNG, JPEG, SVG, WebP ou GIF em um URI de dados Base64 com CSS e HTML prontos para copiar — ou cole uma sequência Base64 para visualizar e baixar a imagem.