O Seletor de Cores fornece uma ferramenta de conta-gotas precisa ao nível do pixel para escolher cores de qualquer elemento numa página web — texto, fundos, imagens, gradientes ou qualquer pixel visível. Obtenha o valor exato da cor simultaneamente nos formatos HEX, RGB e HSL, com uma pré-visualização de pixel ampliada para uma seleção precisa. As cores escolhidas anteriormente são guardadas numa barra de histórico para acesso rápido.
Extrair valores exatos de cor de uma página web é uma tarefa comum — corresponder a uma cor de marca, referenciar um design ou verificar um tom utilizado no site de um concorrente. As DevTools do navegador mostram cores no painel Styles, mas apenas para elementos com propriedades de cor CSS explícitas — não para imagens, gradientes ou cores herdadas. O conta-gotas do Seletor de Cores funciona ao nível do pixel — lê a cor real renderizada de qualquer pixel que esteja sob o seu cursor, independentemente de como essa cor lá chegou. Clique num céu azul numa imagem de destaque, num ponto médio de um gradiente ou numa sobreposição semi-transparente, e obtenha o valor exato da cor composta. O círculo de pré-visualização ampliado mostra uma vista aproximada dos pixels circundantes para que possa selecionar o pixel exato que deseja. Todas as três saídas de formato (HEX, RGB, HSL) são mostradas simultaneamente — clique em qualquer formato para copiar. As suas últimas escolhas são guardadas numa barra de histórico de cores na parte inferior, para que possa regressar facilmente a uma cor escolhida anteriormente.
Uma pré-visualização circular ampliada mostra pixels aproximados em redor do seu cursor, com mira para seleção exata de pixels. Escolha cores de texto, fundos, imagens, gradientes, SVGs ou qualquer pixel visível na página.
Cada cor escolhida é mostrada nos três formatos ao mesmo tempo: HEX (#7c3aed), RGB (rgb(124, 58, 237)) e HSL (hsl(262, 83%, 58%)). Sem alternar ou converter — todos os formatos estão imediatamente disponíveis.
Clique em qualquer linha de formato (HEX, RGB ou HSL) para copiar esse valor específico para a sua área de transferência instantaneamente. Uma breve animação "Copiado!" confirma a ação. Cole diretamente no seu CSS, ferramenta de design ou especificação de cor.
As suas cores escolhidas recentemente são guardadas numa barra de histórico visual que mostra amostras de cores. Clique em qualquer amostra para selecionar novamente essa cor e ver os seus valores. O histórico persiste durante a sua sessão — escolha cores de várias páginas.
A cor escolhida é exibida como uma amostra grande acima dos valores de formato, facilitando a visualização e verificação da cor. A amostra é suficientemente grande para mostrar tons subtis que poderiam parecer idênticos em tamanhos menores.
Escolhe cores de qualquer pixel visível: cores CSS, gradientes CSS, imagens (PNG, JPG, SVG), elementos canvas, frames de vídeo, sobreposições semi-transparentes (escolhendo a cor composta) e até iframes. Se consegue ver, consegue escolher.
Escolha a cor exata da marca no website de uma empresa para garantir que o seu design ou conteúdo utiliza o tom correto. Obtenha o valor HEX preciso em vez de tentar adivinhar a olho ou pesquisar nas diretrizes da marca.
Escolha cores diretamente de imagens de destaque, fotos de produtos ou ilustrações. Extraia uma cor dominante de uma foto para usar como um fundo complementar no seu design.
A especificação do design diz que o botão deve ser #7c3aed. Escolha a cor do botão implementado para verificar se corresponde. Deteta diferenças de cor subtis que são invisíveis a olho nu.
Navegue por sites de inspiração de design e escolha cores que lhe chamem a atenção. A barra de histórico constrói uma paleta de cores que escolheu durante a sessão — use-a como ponto de partida para o seu próprio esquema de cores.
Escolha cores em diferentes pontos ao longo de um gradiente CSS para ver a cor exata em cada posição. Útil para replicar gradientes ou compreender como as paragens de gradiente se misturam.
Abra a doca flutuante do DevSuite Pro e clique no ícone Seletor de Cores. O cursor muda para um conta-gotas com um círculo de pré-visualização ampliado.
Mova o seu cursor sobre a página. A pré-visualização ampliada mostra uma vista aproximada dos pixels em redor do seu cursor, com uma mira indicando o pixel alvo exato.
Clique em qualquer lugar da página para escolher a cor nesse pixel. A amostra de cor, os valores HEX, RGB e HSL atualizam-se instantaneamente.
Clique na linha HEX, RGB ou HSL para copiar esse valor para a sua área de transferência. Uma confirmação "Copiado!" aparece brevemente.
Continue a clicar para escolher mais cores. Cada escolha é adicionada à barra de histórico. Clique em qualquer amostra do histórico para recuperar essa cor.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
