Guia do Slop Colors
Primeiros passos com o Slop Colors
O Slop Colors é um seletor de cores, um criador de paletas e um verificador de contraste em uma só página. As imagens e as paletas são lidas no seu navegador e nunca são enviadas.
A página
No topo fica a cor atual, com o valor em HEX, RGB, HSL, OKLCH e CMYK e um botão Copiar para cada um. Abaixo ficam quatro cartões: Pegar cor de uma imagem, Paleta, Feita a partir desta cor e Verificação de contraste.
O painel à direita tem os campos da cor, o que criar a partir dela, quantas cores encontrar em uma imagem e a exportação. No celular, ele é uma folha na parte de baixo: toque em Configurações para abri-lo.
Pegue cores de uma imagem
- Solte uma imagem na página ou clique em Abrir imagem….
- Passe o mouse sobre ela e clique para pegar uma cor; a lupa mostra os pixels sob o ponto.
- Use as setas do teclado para mover um pixel por vez, e Enter para adicionar a cor à paleta.
- Clique em Adicionar tudo à paleta para manter as cores principais da imagem.
Dica: No Chrome e no Edge, Pegar da tela pega uma cor de qualquer lugar da sua tela.
Monte a paleta
- Clique em Adicionar esta cor para incluir a cor atual.
- Escolha uma Harmonia e uma Escala no painel e depois Usar como paleta abaixo de uma linha.
- Sob cada cor da paleta, ‹ e › a movem, ✎ dá um nome a ela e × a remove.
Verifique o contraste
Digite uma cor de texto e um fundo, ou use Usar como cor do texto e Usar como fundo no painel. A razão e os níveis WCAG aparecem de uma vez, e Corrigir a cor do texto encontra a cor mais próxima que passa no AA.
Exporte e guarde
- Dê um nome à paleta e escolha um Formato em Exportar.
- Clique em Baixar paleta, Copiar código ou Salvar no Slop Drive…; Abrir em… envia o arquivo para outro app.
- Para abrir uma paleta de novo, solte o arquivo .gpl, .ase, .json ou .css na página.