Seletor e conversor de cores — RGB, HEX, HSL
Capture qualquer cor de qualquer lugar da tela ou converta na hora entre HEX, RGB e HSL.
Dica: no Chrome ou no Edge, aparece aqui um conta-gotas para "capturar da tela" — ele consegue capturar qualquer pixel do seu monitor, até fora do navegador.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX (#RGB ou #RRGGBB), rgb(), hsl() ou um simples "r, g, b" — até 500 linhas. Cada linha é exibida em HEX, RGB e HSL; linhas que não são cores são sinalizadas e o resto é convertido normalmente.
Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.
Converta qualquer cor entre HEX, RGB e HSL na hora. Escolha uma cor visualmente, cole um código HEX, digite valores RGB ou HSL, ou use o conta-gotas de tela para capturar qualquer pixel em qualquer parte do monitor, até em outro aplicativo. Todos os formatos ficam sincronizados, com strings CSS prontas para copiar em cada um.
Tem uma paleta inteira? Cole uma lista de cores, uma por linha, na caixa de conversão em lote, e cada linha é convertida para HEX, RGB e HSL em uma única tabela, que você pode baixar como CSV.
Como usar
- Escolha uma cor no seletor visual, digite em qualquer campo (HEX, RGB ou HSL) ou clique em "Capturar cor da tela" e clique em qualquer pixel do monitor, inclusive fora do navegador.
- Todos os outros formatos são atualizados na hora.
- Clique em Copiar ao lado do formato de que precisa: os valores estão prontos para colar no CSS.
- Para converter muitas cores, cole-as uma por linha na caixa de conversão em lote abaixo do conversor e baixe a tabela em CSV.
Perguntas frequentes
Qual é a diferença entre HEX, RGB e HSL?
Eles descrevem as mesmas cores de formas diferentes. HEX (#071E93) é compacto e a notação mais comum na web. RGB (rgb(7, 30, 147)) expressa os componentes vermelho, verde e azul, o que é útil ao adicionar transparência com rgba(). HSL (hsl(229, 91%, 30%)) expressa matiz, saturação e luminosidade, a forma mais intuitiva de ajustar uma cor, por exemplo deixando-a mais clara ou mais suave.
Quando devo usar HSL no CSS?
Use HSL quando precisar de variações de uma cor: manter a matiz e a saturação fixas e mudar a luminosidade gera tons mais claros e mais escuros consistentes de uma cor da marca, muito mais fácil do que adivinhar valores HEX.
Aceita códigos HEX de 3 dígitos?
Sim. Formas abreviadas como #fff ou #1a9 são expandidas automaticamente para a forma completa de 6 dígitos (#ffffff, #11aa99).
As conversões de RGB para HEX são exatas?
Sim. HEX é simplesmente RGB escrito em base 16, então a conversão entre eles é exata nos dois sentidos. Idas e voltas com HSL podem deslocar um valor em ±1 por causa do arredondamento, o que é imperceptível na prática.
Posso converter várias cores de uma vez?
Sim. Cole até 500 cores na caixa "Conversão em lote", uma por linha: HEX (#fff ou #071E93), rgb(), hsl() ou um trio simples "r, g, b" funcionam. Cada linha aparece em uma tabela com os valores HEX, RGB e HSL e uma amostra da cor; linhas que não são cores são sinalizadas sem interromper o resto, e "Baixar CSV" salva a tabela inteira.
Como funciona o conta-gotas de tela?
Ele usa a API EyeDropper nativa do navegador: clique no botão, o cursor vira uma lupa, e clicar em qualquer pixel (nesta página, em outra aba ou em um aplicativo completamente diferente) captura exatamente aquela cor. Nada é gravado nem enviado; a API devolve apenas a cor em que você clicou. Funciona no Chrome e no Edge; o Firefox e o Safari ainda não a implementaram.
Referência rápida: as três notações de cor
• HEX (#071E93): seis dígitos hexadecimais, dois por canal. A notação mais compacta e o padrão na maioria das ferramentas de design e bases de código CSS.
• RGB (rgb(7, 30, 147)): cada canal de 0 a 255. Use rgba() ou a sintaxe moderna rgb(r g b / a) quando precisar de transparência alfa.
• HSL (hsl(229, 91%, 30%)): matiz no círculo cromático (0–360°), saturação e luminosidade. A notação mais fácil de editar à mão: mude um número para obter uma versão mais clara, mais escura ou mais suave da mesma matiz.
Um fluxo prático: defina as cores da marca em HEX, manipule-as em HSL (tons mais claros e mais escuros mexendo na luminosidade) e use RGB quando uma biblioteca ou a API de canvas exigir canais numéricos.
Ferramentas grátis relacionadas
- Conversor de imagens — Converta entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP e SVG. A maioria das conversões nem sai do seu navegador.
- Cortar imagem — Recorte imagens em qualquer tamanho ou proporção no seu navegador — quadrada, 16:9, 4:3 ou livre.