Como usar: Seletor de Cores
- Arraste na área de cor e mova o controle de matiz, digite um valor HEX ou use o conta-gotas para pegar uma cor da sua tela.
- Clique em qualquer linha para copiar a cor em HEX, RGB, HSL ou OKLCH.
- Use os tons e as harmonias para montar uma paleta e verifique o contraste do texto.
- Para colocar o seletor no seu site, ajuste as opções em Incorpore este seletor e copie o código.
Qual formato de cor devo usar?
- HEX é a forma curta usada em CSS e em ferramentas de design.
- RGB traz os canais vermelho, verde e azul, útil quando uma ferramenta pede números.
- HSL é mais fácil de ajustar manualmente: mude a luminosidade para obter um tom mais claro ou mais escuro.
- OKLCH é uniforme perceptualmente, então passos de mesma luminosidade parecem iguais. Todos os principais navegadores atuais oferecem suporte.
Incorporando o seletor
O código de embed é um custom element autocontido, sem biblioteca e sem requisições externas. Cole em qualquer página, escute o evento input e leia event.detail.value. Os estilos ficam em um shadow root, então não entram em conflito com o seu site. No Webflow, o botão Copy to Webflow cola o código como um elemento Embed.
Precisa de mais? Converta valores com o Conversor de Cores, misture duas cores com o Misturador de Cores, extraia uma paleta de uma foto com a Paleta de Cores de Imagem ou verifique a legibilidade com o Verificador de Contraste.
Também pesquisado como: seletor de cor html, seletor de cor hex, seletor de cor rgb, seletor de cores online, conta-gotas de cor da tela, incorporar seletor de cores, seletor de cores javascript.
Ferramentas que combinam com: Seletor de Cores
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
- Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.
- CSS Variables para Tailwind — Transforme suas variáveis de cor em :root em um tema do Tailwind com uma única colagem — Tailwind v3 com tailwind.config.js ou v4 com @theme, usando valores literais ou referências var().
Perguntas frequentes
Como escolho uma cor da minha tela?
Pressione o botão conta-gotas no seletor e clique em qualquer lugar da tela. Funciona no Chrome e no Edge para desktop. Outros navegadores abrem a própria janela de cores, que pode incluir um seletor de tela.
Posso usar o seletor incorporado em um site comercial?
Sim. O código é grátis para projetos pessoais e comerciais, sem necessidade de atribuição.
Como leio a cor escolhida no embed?
Adicione um listener para o evento input no elemento e leia event.detail.value, ou leia a propriedade value a qualquer momento.
O embed carrega algo do devpack?
Não. Tudo fica dentro do snippet que você cola, então continua funcionando mesmo offline.
Posso instalar o Seletor de Cores como um aplicativo da web e usá-lo offline?
Sim. O Seletor de Cores é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.