O que é Gerador de Códigos de Cor CSS?

Um gerador de código de cor CSS que converte qualquer cor em todos os formatos compatíveis com CSS: HEX, RGB, RGBA, HSL, HSLA, OKLCH e cores nomeadas do CSS. Escolha uma cor visualmente ou insira em qualquer formato e obtenha todos os outros instantaneamente, com uma verificação de contraste WCAG.

Digite um código hex, arraste o seletor de cor, ajuste os controles RGB ou cole uma string rgb() ou hsl() já existente. A ferramenta calcula os outros formatos ao vivo, incluindo OKLCH para paletas perceptualmente uniformes, e localiza a cor CSS nomeada mais próxima (147 entradas da lista do W3C). Os valores alfa só aparecem quando você baixa a opacidade de 100%. Um painel de contraste mostra a razão WCAG sobre branco e preto para você ver num relance se a cor é legível como texto.

Como usar

1. Selecione uma cor usando o seletor visual ou insira um valor em qualquer formato suportado (HEX, RGB, HSL).
2. Visualize a cor exibida em todos os formatos CSS simultaneamente, com cópia em um clique para cada formato.
3. Ajuste a opacidade com o controle deslizante alfa para obter valores RGBA e HSLA, depois copie o código CSS necessário.

Quando usar

• Traduzir o hex que a designer entregou para o formato que o framework CSS espera.
• Montar uma paleta e precisar dos valores HSL para criar tons mais claros e mais escuros consistentes.
• Adicionar transparência a uma cor de marca para overlays, sombras ou estados de hover.

Resultado

Um desenvolvedor frontend escolhe o laranja da marca #F97316 e obtém instantaneamente rgb(249, 115, 22), hsl(25, 95%, 53%) e todos os outros formatos para usar de forma consistente em sua folha de estilos.

Perguntas frequentes

Por que o campo de cor nomeada às vezes fica vazio?

O CSS traz apenas 147 cores nomeadas e seu hex precisa bater exatamente com uma delas. Quase qualquer cor de marca cai entre dois valores nomeados, o que é normal. O campo serve mais para conferir cores comuns como tomato ou steelblue.

Quando usar HSL em vez de HEX ou RGB?

HSL é mais fácil de ajustar manualmente: somar 10 na luminosidade dá um tom mais claro, somar 30 no matiz percorre a roda de cores. Quem desenha escalas costuma preferir HSL. RGB e HEX ocupam um pouco menos no arquivo de estilos final.

O controle de opacidade muda a cor ou só a transparência?

Só altera o canal alfa. Os valores de vermelho, verde e azul permanecem. Por isso rgba(255, 0, 0, 0.5) sobre fundo branco fica rosa: é o mesmo vermelho, misturado meio a meio com o que está atrás.

Esses valores CSS funcionam em todos os navegadores?

HEX, RGB, RGBA, HSL, HSLA e nomes têm suporte universal há 15 anos, até o IE11. OKLCH também é gerado aqui e funciona em tudo que é atual — Chrome, Firefox, Safari e Edge a partir de 2023 — então mantenha um fallback em hex ou rgb() se ainda atende motores muito antigos.

Como pego o hex de uma cor que vi em um site?

Toque em Capturar da tela para abrir o conta-gotas e clique em qualquer pixel da tela —uma página, uma imagem, um mock— e aquela cor carrega na hora. (O conta-gotas funciona no Chrome, Edge ou Opera; no Safari ou Firefox, pegue o hex com o conta-gotas do seu sistema operacional e cole no campo HEX.) De qualquer jeito você vê todos os formatos equivalentes e as variantes com opacidade de uma só vez.

Ferramentas relacionadas