🎨

seletor de cor

Escolha qualquer cor e converta instantaneamente entre os formatos HEX, RGB, HSL e CMYK. Sincronização bidirecional, histórico de cores e cópia com um clique.

Ferramentas de conversão Executa localmente Nenhum dado enviado
cor hexadecimal rgb hsl cmyk conversor
Escolher cor
Escuro
Mais próxima: —
Formatos
HEX
RGB
HSL
CMYK
Histórico de cores
Nenhuma cor selecionada ainda
#5E6AD2
Valores de cor
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)

O que é o seletor de cor?

Escolha cores visualmente e converta entre HEX, RGB, HSL e CMYK. Copie qualquer formato com um clique e ajuste os valores diretamente no navegador.

Como usar o seletor de cor

  1. Insira um valor HEX ou use o seletor visual para escolher uma cor.
  2. Revise os valores RGB, HSL e CMYK convertidos mostrados abaixo.
  3. Ajuste os campos até que a cor corresponda ao seu design ou alvo de código.
  4. Copie o formato de que você precisa com um clique.

Guias rápidos

Referência de formatos de cor Compara HEX, RGB, HSL e CMYK para que você escolha o formato certo para fluxos de trabalho de CSS, design e impressão.

Ferramentas relacionadas

🎨
conversor formato cor
Converta cores entre os formatos HEX, RGB, HSL e OKLCH
 🎨
gerador paleta cores
Gere paletas de cores complementares, análogas e triádicas
 ⚖️
verificador contraste WCAG
Verifique as taxas de contraste de cores WCAG AA e AAA para acessibilidade
Entenda a seleção de cores ▾
Exemplo
Entrada #FF5733
Saída RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
Casos de uso comuns
  • Escolha cores exatas da interface para CSS ou tokens de design
  • Copie valores HEX, RGB ou HSL para o código front-end
  • Inspecione e compare cores durante o QA de design
  • Crie pequenas paletas a partir de uma única cor selecionada
Perguntas frequentes
Quais formatos de cor são suportados?

HEX, RGB, RGBA, HSL, HSLA e CMYK. Clique em qualquer campo de formato para copiar o valor.

Posso usar o conta-gotas para capturar cores da minha tela?

Em navegadores compatíveis com a API EyeDropper (Chrome 95+), sim. Clique no ícone de conta-gotas para capturar de qualquer lugar da tela.

Qual é a diferença entre HSL e HSB/HSV?

HSL (Hue, Saturation, Lightness) e HSB/HSV (Hue, Saturation, Brightness/Value) são ambos modelos de cor cilíndricos, mas diferem na forma como definem o terceiro eixo. Em HSL, 50% de luminosidade é a cor "pura". Em HSB, 100% de brilho significa o brilho máximo, que está mais próximo da cor que artistas consideram vívida. CSS usa HSL; Photoshop e Figma usam HSB.

Posso usar isto para verificar o contraste de cores WCAG?

Esta ferramenta mostra valores e conversões de cor. Para verificação de contraste de acessibilidade (proporções WCAG AA/AAA) em relação a uma cor de fundo, use a ferramenta dedicada Verificador de Contraste.