Seletor de Cores
Escolhe uma cor, ajusta a opacidade ou cola um código para converter instantaneamente.
Pré-visualização
Sincronizado
HEX + Alpha
#ff6b6bff
Vermelho
255
Verde
107
Azul
107
Alpha
1
Suporta entrada em HEX, HEXA, RGB(A) e HSL(A).
Formatos
Suporta entrada em HEX, HEXA, RGB(A) e HSL(A).
HEX
#ff6b6b
HEX + Alpha
#ff6b6bff
RGB
rgb(255, 107, 107)
RGBA
rgba(255, 107, 107, 1)
HSL
hsl(0 100% 71%)
HSLA
hsla(0 100% 71% / 1)
HWB
hwb(0 42% 0% / 1)
CMYK
cmyk(0%, 58%, 58%, 0%)
Dicas
- Usa o seletor nativo para escolher visualmente uma cor e afina a opacidade com o slider.
- Cola valores HEX, RGB(A) ou HSL(A) no campo de origem para converter tokens de design existentes.
- Copia qualquer formato com um clique para CSS, ferramentas de design, documentação ou handoff.
- HEX não inclui transparência, por isso usa HEX + Alpha ou RGBA quando a opacidade importa.
Porque usar um conversor de cores?
Fluxos de trabalho de design e frontend obrigam frequentemente a alternar entre formatos de cor. Um designer pode entregar um valor hex, o CSS pode pedir rgb() ou hsl(), e documentação de marca ou impressão pode precisar de uma aproximação em CMYK. Fazer estas conversões manualmente é moroso e propenso a erros.
Esta ferramenta mantém uma única cor sincronizada entre os formatos mais úteis para a web. Podes escolher a cor visualmente ou colar um código existente e depois copiar exatamente a representação de que precisas sem sair do browser.
Quando cada formato é útil
- HEX / HEXA - muito usado em design tokens, configs de Tailwind e handoff de interfaces por ser compacto e familiar.
- RGB / RGBA - útil em CSS e canvas, especialmente quando precisas de valores de canal explícitos ou transparência.
- HSL / HSLA - mais fácil de ajustar quando estás a trabalhar matiz, saturação ou luminosidade em temas.
- HWB / CMYK - útil para comunicação de cor mais abrangente, comparações aproximadas com impressão ou documentação.