Seletor de cores simples

Seletor de cores gratuito para o Chrome

Escolha uma cor de qualquer página. Obtenha #E8553D

Seletor de cores simples é um conta-gotas gratuito para o Chrome. Clique no botão ou prima Alt+P, aponte a qualquer pixel pela lupa de zoom e clique: o código HEX, RGB ou HSL já está na área de transferência. As últimas 50 cores esperam no popup.

Adicionar ao Chrome — grátis

453 utilizadores na Chrome Web Store

Também funciona no Edge, Brave, Opera e noutros navegadores Chromium.

A lupa de zoom quadrada sobre um cartaz numa página web, a enquadrar um pixel com o seu HEX, RGB e HSL, ao lado do popup do Seletor de cores simples com #E8553D e um histórico de cores

Num relance

O que faz
Um conta-gotas de cores: aponte a qualquer pixel de uma página web através de uma lupa de zoom, clique, e o código HEX, RGB ou HSL é copiado.
Para quem é
Programadores web e designers que igualam cores de sites reais, maquetes e capturas de ecrã abertos no navegador, e quem precisa de um código de cor.
Preço
Grátis. Sem conta, sem versão paga.
Dados
O histórico e o formato predefinido ficam no armazenamento local da extensão, no seu dispositivo. Sem análises, sem pedidos de rede.
Funciona em
Chrome e outros navegadores Chromium que instalam a partir da Chrome Web Store, num computador. Não em páginas do navegador, como o novo separador, as definições ou a Chrome Web Store.
Limites
Escolhe a partir da parte visível do separador, com base numa captura feita ao iniciar. Sem CMYK, Pantone nem verificação de contraste, e sem escolher fora do navegador.
Versão
2.7.0, atualizada em 23 de outubro de 2026

Três passos, um clique

  1. 1

    Inicie o seletor

    Clique no ícone da barra de ferramentas e em Escolher uma cor, ou prima Alt+P em qualquer página.

  2. 2

    Aponte com a lupa

    Uma lupa quadrada amplia a zona à volta do cursor e enquadra o pixel exato. Uma etiqueta por baixo mostra o HEX, RGB e HSL em direto.

  3. 3

    Clique e cole

    O código é copiado no formato predefinido e uma nota breve confirma. Cole-o em CSS, no Figma ou numa mensagem.

Quem o usa

CSS

Desenvolvimento front-end

Retire valores exatos de um site real para CSS, SCSS ou uma configuração Tailwind, sem abrir as DevTools.

HEX

Design e verificação de marca

Recolha uma paleta de uma interface, de uma maquete ou de uma referência, e confirme que uma página usa a cor certa da marca.

HSL

Ajustar cores

Use HSL para afinar luminosidade e saturação à mão, ou RGB para código que pede números.

O que faz

  • pixel, enquadrado

    A lupa amplia 11 × 11 pixels à volta do cursor e uma mira enquadra o que vai recolher. Acerte num contorno de um pixel ou num único degrau de um gradiente.

  • formatos

    HEX como #2A6FDB, RGB como rgb(42, 111, 219), HSL como hsl(217, 71%, 51%). Escolha o formato predefinido uma vez no popup.

  • cores no histórico

    Cada cor escolhida vai para o início de uma grelha das últimas 50 cores, sem duplicados. Clique numa amostra para ver e copiar os três códigos.

  • Atalho Alt+P

    Comece a escolher sem abrir o popup. A tecla no popup abre as definições de atalhos do Chrome, se quiser outra tecla.

  • pedidos de rede

    Tudo corre no seu navegador. Sem conta, sem análises, sem telemetria.

  • Claro e escuro

    O popup e a lupa seguem o tema do sistema, em cinzentos neutros que não alteram as cores que avalia.

Como obter o código de cor de qualquer coisa numa página

O conta-gotas do próprio Chrome está dentro das DevTools: abra o painel Estilos, encontre uma propriedade de cor, clique na amostra e depois no conta-gotas. Funciona, mas está escondido, e o valor escolhido substitui essa propriedade no CSS da página em vez de ir para a área de transferência.

O Seletor de cores simples põe um conta-gotas a um clique ou a um atalho de distância. Ao iniciar, tira uma captura da parte visível do separador e abre uma lupa quadrada por cima, para ver o pixel exato e não uma média. Um clique copia o código, e o popup guarda-o com as últimas 50 cores nos três formatos.

Desloque-se até à parte da página de que precisa antes de iniciar: a lupa lê dessa captura. As páginas do navegador, como o novo separador, as definições e a Chrome Web Store, estão fechadas a todas as extensões.

Privado por conceção

  • Sem pedidos de rede

    A extensão nunca comunica com um servidor. Sem análises, sem telemetria.

  • Fica no seu dispositivo

    O histórico e o formato predefinido ficam no armazenamento local da extensão.

  • Quatro permissões

    O separador ativo, apenas quando inicia uma escolha, para tirar a captura; scripting para mostrar a lupa; armazenamento para o histórico e o formato; escrita na área de transferência para copiar o código.

Conta-gotas das DevTools vs Seletor de cores simples

Conta-gotas das DevTools vs Seletor de cores simplesConta-gotas das DevToolsSeletor de cores simples
Como iniciarAbrir as DevTools, encontrar uma cor em Estilos, clicar na amostra e depois no conta-gotasBotão da barra de ferramentas ou Alt+P
O resultado vai paraA propriedade CSS que abriu; copia-o vocêA área de transferência, ao clicar
Formatos de corHEX, RGB, HSL e outrosHEX, RGB e HSL
Cores escolhidas antesNão são guardadasAs últimas 50, prontas para copiar de novo
PreçoIncluído no ChromeGrátis

Perguntas

Como obtenho o código de cor de um site?

Instale o Seletor de cores simples, prima Alt+P na página, aponte a lupa à cor e clique. O código HEX, ou RGB ou HSL se preferir, é copiado para a área de transferência.

Como escolho uma cor de uma imagem numa página web?

Da mesma forma: inicie o seletor e clique no pixel que quer na imagem. A lupa amplia, por isso pode recolher um pixel exato.

Posso copiar HSL ou RGB em vez de HEX?

Sim. Escolha o formato predefinido no popup: HEX, RGB ou HSL. O popup mostra também os três para qualquer cor do histórico, cada um com o seu botão de copiar.

Onde encontro as cores que escolhi antes?

Abra o popup: as últimas 50 cores estão lá como amostras, das mais recentes para as mais antigas. Clique numa para ver e copiar os códigos, ou limpe o histórico.

Como altero o atalho Alt+P?

Clique na tecla do atalho no popup. Abre a página de atalhos de teclado do Chrome, onde pode definir outra tecla.

Porque é que não funciona em algumas páginas?

O Chrome fecha as suas próprias páginas, como o novo separador, as definições e a Chrome Web Store, a todas as extensões. O seletor também lê apenas a parte visível do separador, por isso desloque-se primeiro até à cor.

Consegue escolher cores fora do navegador?

Não. Escolhe apenas do separador atual do navegador. Também não converte para CMYK nem Pantone, nem verifica o contraste.

É grátis? Recolhe dados?

É grátis e não faz pedidos de rede. O histórico e o formato predefinido ficam no seu dispositivo.

Mais extensões gratuitas da PYROCTAL

Aponte. Clique. Cole.

Adicionar ao Chrome — grátis