Skip to content
Zoyku

Conversor de cores

Cole uma cor em hex, rgb() ou hsl() e receba os três formatos mais uma fileira de tons e sombras pronta para o seu design system.

Cor (hex, rgb() ou hsl())
#0071e3
rgb(0, 113, 227)
hsl(210, 100%, 45%)
Tons e sombras

A fileira de amostras mistura a cor com branco (esquerda) e preto (direita) a 20/40/60/80% — útil para estados hover e modo escuro.

Esta ferramenta roda inteiramente no seu navegador. Seus dados nunca saem do seu dispositivo e não são enviados a nenhum servidor.

Como usar

  1. 1Cole uma cor em qualquer dos três formatos — hex, rgb() ou hsl().
  2. 2Veja os valores convertidos e copie o que precisar.
  3. 3Pegue tons e sombras na fileira de amostras abaixo.

Conversor de cores

Informe #0071e3, rgb(0, 113, 227) ou hsl(211, 100%, 45%) — o parser detecta o formato automaticamente e devolve hex, RGB e HSL de uma vez, cada um com cópia em um clique.

Abaixo dos valores, uma fileira de tons e sombras mistura a cor com branco e preto em passos de 20/40/60/80%: estados hover, bordas e variantes de modo escuro na hora, sem abrir ferramenta de design.

Perguntas frequentes

Como o HSL é convertido em RGB?

Pelo mapeamento cilíndrico padrão: croma c = (1 − |2L − 1|) × S, um valor intermediário x definido pelo setor do matiz e um deslocamento m = L − c/2 em cada canal. São as fórmulas clássicas, então os resultados batem com as ferramentas de design.

Por que meu código de cor aparece como inválido?

As formas aceitas são #RGB / #RRGGBB, rgb(r, g, b) e hsl(h, s%, l%). Os canais devem estar no intervalo (0–255 para RGB, 0–360 para o matiz, 0–100% para o resto), separados por vírgula ou espaço.

Para que servem tons e sombras?

Tons (misturados com branco) servem para fundos hover, badges e cartões; sombras (misturadas com preto) para estados pressionados, bordas e superfícies escuras. Derivar tudo de uma cor de marca mantém a UI consistente.

Ferramentas relacionadas

Todas as ferramentas de Utilidades →

Seletor de cores

Escolha uma cor na paleta ou capture uma direto da tela com a API EyeDropper — hex, RGB e HSL copiáveis num clique.

Todas as ferramentas →

Gerador de QR Code

Transforme qualquer texto ou URL num QR code nítido com tamanho, cores e correção de erros ajustáveis — baixe em PNG ou SVG.

Todas as ferramentas →

Calculadora de proporção

Com uma proporção como 16:9 e uma dimensão, obtenha a largura ou altura que falta na hora — com presets de 1:1 a 21:9 para vídeo e design.

Todas as ferramentas →

Gerador UUID

Gere identificadores UUID v4 aleatórios em lote com um clique — de 1 a 500 por vez, usando a aleatoriedade criptográfica do navegador. Grátis e instantâneo.

Todas as ferramentas →

Incorporar esta ferramenta

Coloque esta ferramenta no seu site com uma linha — ela roda no navegador do visitante.

<iframe src="https://zoyku.com/pt/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>
100% local processing