🎨
Conversor de Cores
Live PreviewConverta entre formatos de cor HEX, RGB e HSL.
Supports #hex, rgb(r,g,b), hsl(h,s,l)
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
Modelos de cor explicados (HEX/RGB/HSL)
Modelos de cor são sistemas matemáticos para representar cores. HEX (Hexadecimal) é um código de 6 dígitos usado em HTML e CSS, representando componentes Vermelho, Verde e Azul. RGB (Vermelho, Verde, Azul) usa valores decimais de 0 a 255 para cada canal, frequentemente usado em imagens digitais.
HSL (Matiz, Saturação, Luminosidade) é mais intuitivo para humanos, pois descreve a cor em termos de seu pigmento base (Matiz), intensidade (Saturação) e brilho (Luminosidade). Entender esses modelos ajuda a escolher o formato certo para suas necessidades de design e desenvolvimento, garantindo consistência em diferentes plataformas e dispositivos.
Como usar esta ferramenta
- Use o seletor visual de cores para selecionar uma cor arrastando o cursor no quadrado de saturação/brilho e no controle deslizante de matiz.
- Como alternativa, insira um valor específico no campo «Entrada Manual» (suporta formatos #hex, rgb ou hsl).
- Observe a caixa de «Visualização» para ver a cor selecionada em tempo real.
- Veja os valores convertidos nos cartões HEX, RGB, HSL e HSV abaixo.
- Clique no ícone «Copiar» em qualquer cartão para salvar esse formato específico na área de transferência.
Casos de uso comuns
- Web Design: Converter cores de ferramentas de design (frequentemente RGB/HSL) para códigos HEX para uso em folhas de estilo CSS.
- Consistência de marca: Garantir que suas cores de marca sejam representadas com precisão em diferentes formatos digitais e mídias.
- Desenvolvimento de UI: Gerar rapidamente variações mais claras ou escuras de uma cor base ajustando o valor de Luminosidade no HSL.
- Teste de acessibilidade: Usar a visualização para verificar se suas cores fornecem contraste suficiente para texto legível e elementos de UI.
Dicas avançadas
- Use HSL ao projetar componentes de UI como botões, pois facilita a criação de estados de hover simplesmente ajustando o valor de luminosidade.
- Ao trabalhar com transparência em CSS, prefira
rgba()ouhsla()para melhor legibilidade e controle sobre o canal alfa. - Sempre verifique as proporções de contraste de cores para garantir que seus designs sejam acessíveis a usuários com deficiências visuais.