Como ele é
Ao clicar no botão que você define, um painel desce logo abaixo dele, nas cores do tema. No topo fica um retângulo de cor que vai do branco ao tom puro na horizontal e escurece até o preto na vertical, com uma bolinha que você arrasta. Abaixo, uma barra de arco-íris troca o matiz. Depois vêm um menu de formato e os campos para digitar os números, além de uma barra quadriculada de transparência nos formatos com alfa. Seis amostras padrão, mais as suas, ficam em fileira, e o rodapé mostra uma letra A sobre a cor, a razão de contraste e os selos AA e AAA.
Você pode estar procurando isto se pediu algo assim
- escolher uma cor no painel de configurações do meu app
- campo de cor que mostra HEX e RGB para copiar
- deixar o cliente escolher a cor do produto no site
- seletor de cor que avisa se o contraste está bom para leitura
- paleta com cores prontas e opção de cor personalizada
- selecionar cor com transparência para o tema do painel
Também chamado de
- color picker
- seletor de cor
- seletor de cores
- color input
- HEX color picker
- paleta de cores
- escolher cor
Quando usar
- Painéis administrativos em que o cliente define as cores da marca
- Editores de página, de e-mail ou de posts
- Configuradores de produto com escolha de cor livre
- Ferramentas de design que precisam conferir o contraste do texto
Quando evitar
- Escolhas entre poucas cores fixas, em que botões de amostra bastam
- Uso só com teclado sem ajustes, já que o quadro e as barras de cor respondem apenas a mouse e toque
Como pedir para a sua IA
Adicione um seletor de cor ao painel de tema: quadro de saturação, barra de matiz, campos em HEX, RGB e HSL, transparência, amostras com as cores da minha marca, teste de contraste AA e AAA e controles de cor acessíveis pelo teclado.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Guache
Guache funciona com teclado?
Em parte. Na versão original de Guache, o quadro de saturação e as barras de matiz e de transparência respondem a mouse e toque, enquanto os campos numéricos, o menu de formato e as amostras funcionam pelo teclado. Para uso completo sem mouse, peça à IA para transformar o quadro e as barras em controles com setas.
Em que formatos Guache devolve a cor?
Guache emite o evento value-change com a mesma cor em cinco formatos de uma vez: HEX, HSL, HSLA, RGB e RGBA, com o alfa arredondado. Também aceita como valor inicial uma cor em HEX ou em objeto HSV, HSL ou RGB, e o prompt instala a única dependência extra, de conversão de cores.
Guache acompanha o modo escuro?
Acompanha. O painel de Guache usa os tokens de tema do catálogo para fundo, borda e textos, então segue o claro e o escuro do projeto. O teste de contraste calcula a razão para texto branco sobre a cor num fundo escuro e para texto preto num fundo claro, e mostra a maior.
