Seletor e Conversor de Cores
Selecione cores e converta entre formatos HEX, RGB e HSL. Seletor de cores online grátis com pré-visualização instantânea e suporte a cópia.
#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
O que é o Seletor e Conversor de Cores?
O Seletor e Conversor de Cores é uma ferramenta online gratuita que permite selecionar cores visualmente e convertê-las entre formatos populares como HEX, RGB e HSL. Ele fornece pré-visualizações instantâneas e facilita encontrar os valores exatos de cor que você precisa para seus projetos web e de design. Entender formatos de cores é essencial para desenvolvimento web e design digital, e esta ferramenta elimina a necessidade de cálculos manuais ao converter instantaneamente entre todas as principais notações de cor usadas em CSS, software de design gráfico e produção para impressão.
Como usar este Seletor de Cores?
- Use o seletor de cores visual para selecionar a cor desejada clicando e arrastando na área de cores.
- Alternativamente, insira um valor HEX conhecido diretamente no campo de entrada HEX para consultar seus equivalentes RGB e HSL.
- Visualize todos os três formatos de cor (HEX, RGB, HSL) atualizados simultaneamente em tempo real conforme você ajusta a cor.
- Copie qualquer valor de cor para sua área de transferência usando o botão Copiar ao lado de cada formato.
- Use a amostra de pré-visualização de cor para confirmar visualmente que a cor selecionada corresponde à sua intenção de design.
Dicas e boas práticas
Use HSL para Variações de Design
Ao criar paletas de cores, HSL é o formato mais intuitivo para trabalhar. Mantenha o matiz (H) o mesmo e ajuste a saturação (S) e luminosidade (L) para criar tons mais claros, tons mais escuros e tons suavizados da mesma cor base. Isso é muito mais intuitivo do que tentar ajustar canais RGB individualmente.
Verifique Contraste de Cores para Acessibilidade
Ao escolher cores de texto e fundo, certifique-se de que haja contraste suficiente para legibilidade. As Diretrizes de Acessibilidade de Conteúdo Web (WCAG) recomendam uma proporção de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. Use suas cores escolhidas em uma ferramenta de verificação de contraste para verificar conformidade.
Use Abreviação HEX Quando Possível
Em CSS, cores HEX com pares de dígitos repetidos podem ser abreviadas: #FF5533 se torna #F53, e #AABBCC se torna #ABC. Esta abreviação é totalmente suportada em todos os navegadores e torna seu CSS mais conciso sem nenhuma diferença funcional.
Salve Suas Cores de Marca
Ao trabalhar em um projeto, anote os valores de cor selecionados em todos os três formatos. Diferentes ferramentas de design e plataformas podem requerer formatos diferentes — projetos web tipicamente usam HEX, animações CSS podem preferir HSL, e fluxos de trabalho de impressão podem precisar de valores RGB como ponto de partida para conversão CMYK.
Casos de uso comuns
Desenvolvimento Web e Estilização CSS
Desenvolvedores web constantemente precisam de valores de cor ao escrever CSS. Seja estilizando botões, fundos, bordas ou texto, esta ferramenta permite selecionar visualmente a cor perfeita e obter instantaneamente o valor HEX, RGB ou HSL para colar diretamente na sua folha de estilos. Ela elimina adivinhação e garante cores consistentes em todo o seu site.
Identidade de Marca e Guias de Estilo
Ao estabelecer ou documentar a identidade visual de uma marca, você precisa de valores de cor em múltiplos formatos. Materiais de marketing podem precisar de HEX para web, RGB para telas digitais, e os valores como referência para impressão. Esta ferramenta fornece todos os formatos simultaneamente, facilitando a criação de guias de estilo de marca abrangentes.
Handoff de Design UI/UX
Designers e desenvolvedores frequentemente trabalham em ferramentas diferentes que usam formatos de cor diferentes. Um designer pode especificar uma cor em HSL da sua ferramenta de design, enquanto o desenvolvedor precisa do valor HEX para CSS. Este conversor preenche essa lacuna, garantindo que a mesma cor exata seja usada em todo o pipeline de design-para-desenvolvimento sem discrepâncias.
FAQ
Qual é a diferença entre HEX, RGB e HSL?
HEX usa um código hexadecimal de seis dígitos (ex.: #FF5733). RGB define cores pelos valores dos canais vermelho, verde e azul (0-255). HSL usa matiz (0-360), saturação (0-100%) e luminosidade (0-100%) para uma abordagem mais intuitiva.
Posso usar esta ferramenta para encontrar cores de um design existente?
Você pode inserir manualmente um valor HEX, RGB ou HSL conhecido para ver suas conversões. Para capturar cores diretamente da sua tela, use o seletor de cores nativo do seu sistema operacional ou uma extensão do navegador.
Qual formato de cor devo usar em CSS?
Todos os três formatos (HEX, RGB, HSL) são totalmente suportados em CSS moderno. HEX é o mais comumente usado e produz o código mais compacto. RGB é útil quando você precisa adicionar transparência alfa (rgba). HSL é ideal quando você quer criar variações de cor programaticamente ajustando luminosidade ou saturação, como gerar estados hover ou paletas de cores.
Qual é a diferença entre RGB e RGBA?
RGB define uma cor usando três canais: vermelho, verde e azul, cada um variando de 0 a 255. RGBA adiciona um quarto canal — alfa — que controla a transparência, variando de 0 (totalmente transparente) a 1 (totalmente opaco). Por exemplo, rgba(255, 87, 51, 0.5) cria um laranja semi-transparente. Esta ferramenta fornece valores RGB, e você pode adicionar o canal alfa por conta própria no seu CSS.
Como crio uma paleta de cores consistente usando esta ferramenta?
Comece selecionando sua cor primária de marca e anotando seus valores HSL. Para criar variações harmoniosas, mantenha o matiz o mesmo e crie versões mais claras aumentando a luminosidade (ex.: L: 90% para tons muito claros) e versões mais escuras diminuindo a luminosidade (ex.: L: 20% para tons escuros). Para cores complementares, adicione 180 graus ao valor do matiz. Para cores análogas, adicione ou subtraia 30 graus.