Seletor de Cores (Color Picker) Online
Arraste no quadro para ajustar saturação e brilho, escolha a matiz na barra e copie o código no formato que precisar.
Processado no seu navegador — nada é enviado ou armazenado.
Setas para a direita e para a esquerda mudam a saturação; para cima e para baixo, o brilho. Com Shift, em passos de 10.
HEX
#336ce8
RGB
rgb(51, 108, 232)
HSL
hsl(221, 80%, 55%)
HSV
hsv(221, 78%, 91%)
OKLCH
oklch(0.5656 0.1976 263.03)
Cores recentes
As cores que você escolher aparecem aqui, guardadas só neste navegador.
Como usar
- Escolha a matiz (o tom) na barra colorida.
- Arraste no quadro: para a direita aumenta a saturação, para cima aumenta o brilho.
- Ajuste a transparência, se precisar, ou digite um código em qualquer campo.
- Clique em Copiar ao lado do formato desejado. A cor entra nas recentes para você voltar a ela depois.
- No Chrome e no Edge, o conta-gotas pega a cor de qualquer ponto da tela.
Por que o quadro usa HSV
No HSV, o quadro mostra exatamente o que o olho espera: o canto superior direito é a cor mais pura, a borda de baixo é preta e a borda da esquerda vai do branco ao preto. É o modelo de Photoshop, Figma e dos seletores do sistema operacional.
Os campos ao lado mostram a mesma cor em HEX, RGB, HSL e HSV — mexer em um atualiza os outros na hora.
Os formatos de cor
- HEX: #1a73e8 — três pares de dígitos hexadecimais (vermelho, verde, azul), de 00 a ff. O mais usado em CSS e design.
- RGB: rgb(26, 115, 232) — os mesmos três canais em decimal, de 0 a 255.
- HSL: hsl(214, 82%, 51%) — matiz (0–360°), saturação e luminosidade. O mais fácil de ajustar à mão.
- Com transparência: #1a73e880, rgba(26, 115, 232, 0.5) ou hsla(214, 82%, 51%, 0.5).
Conteúdo e funcionamento revisados pela Equipe UtiliLab em . Consulte nossa metodologia de revisão.
Perguntas frequentes
Onde ficam as cores recentes?
No armazenamento local do seu navegador, só neste aparelho. Elas não são enviadas a lugar nenhum, e você pode apagá-las com o botão Limpar.
O conta-gotas funciona em todos os navegadores?
Ele usa um recurso que hoje existe no Chrome, no Edge e no Opera para computador. No Firefox e no Safari o botão não aparece, mas o resto da ferramenta funciona igual.
Ferramentas relacionadas
Gerador de Paleta de Cores
Gere paletas análogas, complementares, triádicas e tetrádicas e exporte em HEX, RGB ou CSS.
Verificador de Contraste
Calcule a razão de contraste entre texto e fundo e veja se atende aos níveis AA e AAA da WCAG.
Conversor de Cores
Converta uma cor entre HEX, RGB, HSL e OKLCH, com prévia e razão de contraste.
HEX para RGB
Converta códigos HEX em RGB e RGBA, com validação e cópia em um clique.