Gerador e Conversor de Código de Cor

Escolha uma cor ou insira um código HEX — obtenha instantaneamente HEX, RGB, HSL, nome CSS e cor complementar.

Resultado instantâneo Funciona no navegador
Código HEX
#3D7EF7
Valor RGB
rgb(61, 126, 247)
Valor HSL
hsl(218, 91%, 60%)
Nome CSS
—
Cor complementar
#F7823D

Modelos de cor

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: padrão web. RGB: baseado em tela. HSL: matiz-saturação-luminosidade, intuitivo para designers.

Como usar?

  1. 1
    Escolher a corClicar no seletor de cores ou inserir diretamente um código HEX (ex.: #FF5733).
  2. 2
    Ver os valoresHEX, RGB e HSL são calculados instantaneamente; nome CSS e cor complementar são exibidos automaticamente.
  3. 3
    CopiarCopiar o código de cor desejado para a área de transferência com um clique.

Perguntas frequentes

O que é um código de cor HEX?
Um valor hexadecimal de 6 dígitos no formato #RRGGBB. Cada par representa a intensidade de um canal (Vermelho, Verde, Azul) de 00 a FF (0–255), permitindo 16.777.216 cores.
RGB ou HSL — qual usar?
RGB corresponde ao hardware de tela e é amplamente usado em CSS. HSL é mais intuitivo para designers: alterar brilho sem perder o matiz. Ambos são totalmente suportados no CSS moderno.
Para que serve a cor complementar?
A cor complementar está a 180° na roda de cores e cria o máximo contraste — ideal para botões de chamada à ação e visualização de dados.

Códigos de cor na web: HEX, RGB e HSL

No desenvolvimento web, as cores são definidas principalmente por três formatos: HEX, RGB e HSL. Esta ferramenta converte instantaneamente qualquer cor nos três formatos e mostra também o nome CSS e a cor complementar.

Códigos de cor HEX

HEX é o formato de cor mais comum na web. É escrito como #RRGGBB, com cada par indicando a intensidade de um canal (Vermelho, Verde, Azul) de 00 a FF (0–255). Com 256 valores por canal, HEX suporta 16.777.216 cores. A notação abreviada #RGB também é válida: #F06 → #FF0066.

Modelo de cor RGB

RGB reflete a estrutura física das telas. Cada canal assume valores de 0 a 255. Em CSS: rgb(255, 87, 51) ou com transparência rgba(255, 87, 51, 0.8).

Modelo de cor HSL

HSL (Matiz-Saturação-Luminosidade) é mais intuitivo para designers. Matiz: 0–360° na roda cromática. Saturação: 0%=cinza, 100%=cor viva. Luminosidade: 0%=preto, 50%=normal, 100%=branco. Criar tons claros ou escuros é simples: manter matiz e saturação, ajustar a luminosidade.

Cores complementares

As cores complementares estão a 180° na roda de cores: Vermelho ↔ Ciano, Verde ↔ Magenta, Azul ↔ Amarelo. Criam o máximo contraste e são usadas em botões CTA e visualizações de dados.

Acessibilidade web (WCAG)

Cerca de 8% dos homens têm daltonismo. WCAG 2.1 AA exige uma relação de contraste de pelo menos 4,5:1 para texto normal. Nunca transmita informação apenas por cor.

Cores CSS nomeadas

CSS define 148 cores nomeadas (red, navy, coral, teal, etc.). Esta ferramenta as reconhece automaticamente e exibe o nome.

Privacidade

Todos os cálculos são realizados localmente no seu navegador. Nenhum dado é enviado para servidores.

Comentários