Para que serve o seletor de cores
O seletor de cores lê a cor do pixel em uma posição específica da imagem e retorna o valor da cor. Ao ver uma cor bonita em uma imagem e querer saber o valor exato, basta clicar com o seletor de cores.
Usos comuns:
- Extrair cores de marca (cor principal do logo)
- Referência de paleta (extrair paleta de fotos bonitas)
- Restaurar cores (captar cor de design, replicar em código)
- Depuração (confirmar a cor real de uma parte da imagem)
Vários formatos de cor
O seletor de cores gera diferentes formatos, cada um adequado a diferentes situações:
HEX (hexadecimal)
Como #FF5733. O mais comum, usado em CSS e softwares de design. Os 6 dígitos representam os componentes vermelho, verde e azul.
RGB
Como rgb(255, 87, 51). Vermelho, verde e azul, cada um de 0 a 255. Comum em CSS.
HSL
Como hsl(11, 100%, 60%). Matiz, saturação e luminosidade. Mais intuitivo para ajustar cores — mudar o matiz muda a cor, mudar a saturação muda a vivacidade.
HSV/HSB
Similar ao HSL, usado em alguns softwares de design.
CMYK
Para impressão, proporção das quatro tintas. A captura de cores na tela geralmente não fornece CMYK diretamente.
Para frontend, HEX ou RGB são os mais usados; para ajuste de cores em design, HSL é mais intuitivo.
Passos de uso do seletor de cores
- Faça upload da imagem no seletor de cores de imagem
- Mova o mouse para a posição desejada
- O valor da cor daquele pixel é exibido em tempo real
- Clique para fixar a cor e copiar o valor
- Capture várias cores para compor uma paleta
Dicas de captura de cor
Capturar a cor principal
A cor principal da imagem é a da área com maior extensão. É o tom base da paleta.
Capturar cor de destaque
Encontre a cor mais viva e proeminente na imagem, frequentemente usada como cor de destaque (botões, links).
Capturar várias cores para uma paleta
De uma imagem harmoniosa, extrair 4 a 6 cores já compõem uma paleta: cor principal, cor secundária, cor de destaque, cor de fundo, cor de texto.
Evitar capturar ruído
Imagens ampliadas mostram grânulos de pixel; um único pixel pode ser afetado por ruído de compressão. Ao captar a cor, é mais preciso obter a média de uma área um pouco maior, ou verificar vários pixels adjacentes para ver se são consistentes.
Gradiente: capturar as duas extremidades
Para gradientes, capture as cores das extremidades inicial e final; as cores intermediárias usam interpolação.
Aplicações da extração de paleta
Extrair cores do logo da marca
Logos de empresas geralmente têm a cor principal da marca. Após captar a cor, aplique-a ao site, PPT, pôsteres para manter a unidade visual.
Extrair paleta de fotos
Ao ver fotos com tons bonitos (como paisagens), extraia as cores principais para compor uma paleta e use em seus próprios designs para replicar aquela atmosfera.
Restaurar design
O design é uma imagem; o frontend precisa replicar as cores. Use o seletor de cores para captar as cores do design e preencher no CSS.
Armadilhas comuns
Inconsistência na exibição de cores
Diferentes telas têm diferentes gamas e temperaturas de cor; a mesma cor pode aparecer diferente. Confie no valor da cor, não no que os olhos veem.
Capturar artefatos de compressão
A compressão JPEG gera ruído de cor, especialmente nas bordas. Ao captar cores, evite bordas e zonas de transição; capture o centro de blocos de cor sólida.
Captura em pixels transparentes
O valor de cor em áreas transparentes de PNG pode não ser preciso (pixels transparentes têm cor, mas são invisíveis). Confirme que a posição é opaca antes de captar a cor.
Diferença de cores para impressão
A captura na tela é RGB, a impressão é CMYK; as cores mudam. Para designs que serão impressos, não use diretamente a cor da tela; faça conversão de gerenciamento de cores.
Sugestões de padrão de paleta
- 1 cor principal: 60% da área
- 1 a 2 cores secundárias: 30%
- 1 cor de destaque: 10%
- Cores neutras (preto, cinza, branco): texto, fundo
Após captar as cores, distribua-as segundo essa proporção para uma paleta harmoniosa e organizada.
Resumo
O seletor de cores é uma ferramenta para extrair cores de imagens. Capture a cor principal, secundária e de destaque para compor uma paleta e mantenha a unidade visual ao aplicá-la ao design. Evite ruído e artefatos de compressão; capture o centro de blocos de cor sólida. Para frontend, use HEX/RGB; para ajuste de cores, use HSL. O seletor do DocsAll processa no navegador, a imagem não é enviada, e a captura de cores do design não vaza.