Seletor de cores online
Pegue qualquer tom que imaginar e copie o valor HEX, RGB, HSL ou RGBA com um único toque. Tudo acontece aqui na página: sem contas, sem uploads e sem que nada saia do seu dispositivo.
Como funciona o seletor de cores
Escolha um matiz
Deslize a barra de arco-íris até a família que quiser (vermelho, turquesa, violeta) e depois ajuste o brilho e a saturação arrastando dentro do quadrado grande.
Ajuste com precisão
Digite um código conhecido direto no campo Hex, RGB ou HSL e o seletor salta para ele. Abaixe o controle de opacidade para obter valores RGBA translúcidos.
Copie e cole
Toque em copiar ao lado do formato de que seu projeto precisa. Cole no seu CSS, num arquivo de design ou no seu código e siga em frente.
Feito para designers e desenvolvedores
Todos os formatos num só lugar
Hex para CSS, RGB para trabalhar com canvas, HSL quando quiser ajustar a luminosidade e RGBA quando precisar de transparência. Veja todos de relance e alterne sem calcular na cabeça.
Nada para instalar
Dispense o programa de design pesado quando só precisa de uma amostra rápida. O seletor carrega na hora, continua funcionando sem rede e nunca pede cadastro.
Privado por natureza
As cores são calculadas localmente com matemática simples no seu navegador. Nenhuma imagem é enviada, nenhum valor é registrado e não há rastreamento do que você escolhe.
Entendendo os códigos de cor
Uma cor na tela é, na verdade, três números: quanta luz vermelha, verde e azul misturar. Os formatos abaixo são apenas maneiras diferentes de escrever essa mesma receita, e este seletor mantém todos sincronizados para você usar o que a sua ferramenta espera.
Hex
O código de seis caracteres que aparece em todo lugar no design web, como #f59e0b. Cada par é um canal (vermelho, verde, azul) escrito em base 16, de 00 (nada) a ff (máximo). A versão de oito dígitos acrescenta um par de alfa para a opacidade.
RGB e RGBA
Os mesmos três canais escritos como números comuns de 0 a 255, por exemplo rgb(245, 158, 11). O RGBA acrescenta um quarto valor de 0 a 1 para a transparência, útil em sobreposições, sombras e efeitos de vidro.
HSL
Uma forma mais humana de descrever a cor: o matiz como um ângulo na roda (0–360°) e depois a saturação e a luminosidade em porcentagens. Como a luminosidade tem o próprio controle, o HSL facilita criar uma série de tons claros e escuros a partir de um único matiz.
Perguntas frequentes
O seletor de cores é mesmo grátis?
Sim, totalmente. Não há paywall, nem marca d'água no que você copia, nem limite de cores. Você nunca precisa de uma conta.
Minhas cores são enviadas para algum lugar?
Não. Cada valor é calculado por JavaScript dentro da sua própria aba. Nada do que você escolhe é enviado, salvo num servidor ou compartilhado.
Posso colar um código que já tenho?
Claro. Digite ou cole um valor hex, RGB ou HSL no campo e pressione Enter: o quadrado e os controles se ajustam para você continuar dali.
O que é o botão conta-gotas?
Nos navegadores que suportam o conta-gotas nativo de tela (Chrome e Edge recentes) aparece um botão para capturar a cor de qualquer pixel do seu monitor. Se o seu navegador não tiver, o botão fica oculto.
Como consigo uma cor transparente?
Arraste o controle de opacidade quadriculado abaixo da barra de matiz. Quando a opacidade cai abaixo de 100%, a ferramenta mostra um valor RGBA e um hex de oito dígitos pronto para o CSS.
Funciona no celular?
Sim. O quadrado e os controles respondem ao toque, então você pode arrastar com o dedo e copiar códigos no celular tão facilmente quanto no computador.