Explore a paleta ou ajuste a cor no seletor. Use o valor exibido no CSS ou nas suas anotações de design.
Funciona localmente no seu navegadorO seletor é um campo plano no estilo spectrum: arraste dentro do quadrado para ajustar saturação e brilho, use o controle vertical para o matiz e o horizontal para a opacidade, ou digite uma cor direto no campo abaixo deles. Esse campo sempre mostra a cor atual, como #rrggbb enquanto ela é totalmente opaca e como rgba(...) assim que a opacidade fica abaixo de 100%.
A paleta ao lado do quadrado traz 66 amostras fixas em três linhas, e a linha de baixo guarda as cores que você mesmo misturou. Escolher uma cor acontece na página: nenhuma requisição é feita enquanto você arrasta, digita ou clica, e nenhum valor de cor sai do navegador.
As três linhas de cima são fixas: seis tons de cinza, dez cores saturadas e cinquenta tons suaves. Elas não mudam, e clicar em uma delas não é registrado, porque um preset não é uma cor sua.
A linha de baixo guarda até sete cores escolhidas por você, da mais recente para a mais antiga: entra tudo o que você digita, clica ou define depois de arrastar. A lista fica neste navegador sob uma chave do domínio voritools.com, então sobrevive a um recarregamento neste dispositivo, mas não é sincronizada e outro navegador começa com a linha vazia.
O campo é a saída da ferramenta: a cor atual escrita no formato que o CSS usa. Cores opacas aparecem como #rrggbb; cores com opacidade abaixo de 100% aparecem como rgba(...), porque seis dígitos hexadecimais não carregam canal alfa. A dica de cada amostra e a pequena prévia ao lado do campo mostram o mesmo valor.
Valores com alfa escritos em hexadecimal são lidos como o CSS Color 4 define: #12345678 significa #123456 com alfa 0x78/255 e aparece como o rgba(...) equivalente, e #abcd significa #aabbccdd. Um valor que o seletor não consegue ler mantém a borda vermelha e a página mostra o aviso de que a cor não pôde ser interpretada.
Ela trabalha com uma cor por vez e apenas nesta página: não exporta paletas, não baixa variáveis CSS nem JSON, não verifica contraste ou acessibilidade e não extrai cores de uma foto ou captura de tela. Para isso existe a ferramenta irmã de cores de imagem.
Também não há botão de copiar; o campo é uma caixa de texto comum, então você copia o conteúdo como qualquer outro valor. E como a linha de recentes vive no navegador, apagar os dados do site a remove, enquanto uma janela privada começa sempre com a linha vazia.