Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL formats instantly.
Sobre esta ferramenta
Um seletor de cores permite escolher uma cor visualmente e ler seu valor em todos os formatos que você possa precisar: HEX para CSS e ferramentas de design, RGB para canvas e edição de imagens, e HSL quando quer ajustar luminosidade ou saturação sem mudar o matiz.
Os três formatos descrevem a mesma cor de maneiras diferentes. HEX e RGB são a mesma informação escrita de outro jeito — #2563EB é exatamente rgb(37, 99, 235). HSL é o útil quando você monta uma paleta, porque pode manter o matiz fixo e variar a luminosidade para obter um conjunto coerente de tons claros e escuros.
Tudo roda localmente no seu navegador, e cada valor pode ser copiado com um clique direto para sua folha de estilos ou arquivo de design.
Como escolher e converter uma cor
- 1Use o campo de cor para escolher visualmente, ou cole um valor HEX existente para partir de uma cor conhecida.
- 2Leia os valores HEX, RGB e HSL, que atualizam juntos conforme você move o seletor.
- 3Clique em qualquer valor para copiá-lo para a área de transferência na sintaxe exata que o CSS espera.
- 4Ajuste a luminosidade em HSL para criar variantes mais claras e mais escuras do mesmo matiz e formar uma paleta.
O que esta ferramenta faz
HEX, RGB e HSL juntos
Os três formatos aparecem ao mesmo tempo, então você nunca precisa de uma segunda conversão nem de procurar fórmulas.
Copiar com um clique
Cada valor é copiado em sintaxe CSS válida — #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%) — pronto para colar.
Seleção visual
Escolha cores a olho com o campo nativo, ou digite um valor exato quando precisa igualar uma cor de marca.
Sem conta, sem upload
Roda inteiramente no seu navegador. Nada é armazenado e a ferramenta funciona offline depois de carregada.
Perguntas frequentes
Como converto HEX para RGB?
Um código HEX são três pares de dígitos hexadecimais para vermelho, verde e azul. #2563EB se divide em 25, 63 e EB, que em decimal são 37, 99 e 235 — ou seja, rgb(37, 99, 235). Esta ferramenta faz a conversão enquanto você escolhe.
Qual a diferença entre RGB e HSL?
RGB descreve quanta luz vermelha, verde e azul misturar. HSL descreve matiz (qual cor na roda), saturação (quão vívida) e luminosidade (quão clara). HSL é mais intuitivo: para uma versão mais escura da mesma cor, basta baixar a luminosidade.
Qual formato devo usar no CSS?
Os três são válidos em qualquer navegador moderno. HEX é o mais comum em bases de código e entregas de design. RGB é conveniente quando você precisa de transparência via rgba(). HSL é o melhor para gerar escalas de cor sistemáticas.
O que significa o código HEX de 8 dígitos?
Um HEX de 8 dígitos acrescenta dois caracteres no fim para transparência alfa — #2563EBFF é totalmente opaco e #2563EB80 é cerca de 50% transparente. É suportado em todos os navegadores modernos.
Meus dados de cor são enviados a algum lugar?
Não. A conversão de cor é aritmética simples feita no seu navegador. Nada é transmitido nem armazenado.