Extraia primeiro a paleta de exemplo, depois utilize a seleção precisa e edições manuais para decidir que cores pertencem ao seu próprio projeto. Abrir Seletor de Cores de Imagem.
Carregue e extraia uma paleta inicial
Abra o Seletor de Cores de Imagem e carregue uma imagem suportada ou experimente a amostra. A extração automática carrega a origem para o servidor. A amostra neste guia é collage-botanical.jpg, uma fotografia de 1200 x 900 de flores, folhas e um fundo cor de pêssego.
Deixe as Cores a extrair em 6 e selecione Dominante para o exemplo. Dominante favorece as cores principais da imagem, enquanto Vibrante dá mais influência a acentos coloridos. Um pedido pode utilizar 3 a 12 cores; uma imagem com menos grupos visíveis distintos pode devolver menos.
O resultado Dominante real contém #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. O maior grupo é #E3B49F a aproximadamente 28.88% dos píxeis visíveis amostrados. A extração utilizou uma amostra de 512 x 384; essas percentagens não são um censo exato da imagem de resolução total.
Uma cor de paleta pode ser uma média de cores próximas. Escolha um píxel específico quando precisar do valor de um pequeno detalhe.
Escolha e refine cores individuais
Clique ou toque na imagem para inspecionar um píxel com a lupa. Foque a imagem e utilize as teclas de seta para mover um píxel, Shift mais uma seta para mover dez, depois Enter para escolher. Copie HEX, RGB ou HSL com o seu botão de cópia individual ou utilize Adicionar à paleta.
Selecione uma amostra para alterar o seu valor HEX ou cor, mova-a para a esquerda ou direita, ou remova-a. Adicionar uma cor personalizada aceita um valor HEX à sua escolha. Bloquear cor preserva uma amostra selecionada quando Atualizar paleta ou uma definição de extração alterada gera outra paleta inicial.
A amostragem e transparência oferece Cor de origem e Composto sobre um fundo. Cor de origem inclui opacidade nos códigos copiados quando relevante; Composto mostra o pixel misturado sobre o fundo de Amostra escolhido. As amostras da paleta são valores RGB opacos. As cores editadas e escolhidas não têm percentagem de origem estimada.
Imagens descodificáveis pelo navegador usam amostras sRGB do navegador. Se for utilizada uma pré-visualização normalizada, o seletor rotula explicitamente as suas cores e coordenadas como aproximadas.
O exemplo neste guia
Cores a extrair: 6; Dominante; sem alterações manuais ou bloqueios; Guardar como: PNG. A extração automática amostrou 512 x 384 píxeis.
- Imagem de origem
- 1200 x 900 px
- Cores extraídas
- 6 cores opacas
- Cartão de paleta
- 600 x 500 px
- PNG transferido
- 9,163 bytes
Verifique um par de texto e fundo
Abra Verificar contraste de cor. Defina Texto e Fundo com os controlos de cor, introduza códigos HEX ou utilize a cor escolhida para qualquer um dos lados. A amostra de texto em tempo real permite-lhe comparar o par, e o rácio é acompanhado por resultados separados de Normal AA, Normal AAA, Grande AA e Grande AAA.
Escolha um par para o objetivo pretendido em vez de assumir que cada cor extraída pode ser usada como texto. Um pêssego claro e um roxo claro podem funcionar juntos numa fotografia, mas constituir uma combinação pobre de texto e fundo.
Este controlo verifica apenas esse par de cores para contraste de texto. Não é uma auditoria de acessibilidade completa e não decide se a tipografia, a interação por teclado ou o resto do design é utilizável.
Um rácio de contraste aprovado é uma verificação útil, não uma garantia de que uma página inteira é acessível.
Copie valores ou exporte a paleta
Para uma entrega rápida, copie um código individual ou utilize Copiar cores da paleta HEX. Para um ficheiro, escolha Guardar como e selecione Iniciar. PNG cria uma imagem de paleta rotulada; SVG mantém as amostras e etiquetas como conteúdo vetorial; CSS fornece variáveis de cor numeradas; JSON contém valores HEX, RGB e HSL.
O exemplo de seis cores não editado exporta palette.png a 600 x 500 píxeis e 9,163 bytes. A ordem das amostras corresponde à paleta. A sua paleta final pode conter de 1 a 12 cores após a edição, mesmo quando a contagem inicial automática era diferente.
Transfira antes de sair ou atualizar. A exportação final carrega a origem e as cores escolhidas para processamento no servidor. Cria um novo ficheiro de paleta e não altera a cor nem substitui a fotografia original.
PNG e SVG são referências visuais convenientes. CSS e JSON são úteis quando o passo seguinte necessita de valores de cor reutilizáveis.
Questões comuns
O conta-gotas devolve as mesmas cores que a extração automática?
Não necessariamente. Um valor escolhido descreve um pixel de origem ou de pré-visualização específico. A extração automática agrupa píxeis amostrados e pode devolver cores médias.
Os píxeis transparentes são contados?
Os píxeis totalmente transparentes são excluídos da extração. Os píxeis parcialmente transparentes têm um peso reduzido. A amostragem de origem pode mostrar opacidade, mas as amostras da paleta exportadas são opacas.
O que acontece às cores bloqueadas quando atualizo?
As cores bloqueadas permanecem na paleta enquanto novas cores extraídas preenchem as outras posições. Uma cor retida ou editada não recebe uma percentagem de imagem inventada.
Posso usar isto para uma cor de marca exata?
Introduza um valor HEX conhecido diretamente ou escolha um pixel de origem adequado. A iluminação da fotografia, a compressão, a gestão de cor e as pré-visualizações normalizadas podem alterar os valores amostrados, pelo que uma paleta de fotografia automática não é prova de uma especificação de marca original.
Construa uma paleta que possa levar para o seu próximo design
Experimente um exemplo ou utilize o seu próprio ficheiro e reveja o resultado antes de partilhar.
