Como ele é
Parece um painel de ferramenta de design dentro de um cartão branco. No alto ficam a amostra da cor, o código hex, um aviso se a cor cabe no sRGB, só no P3 ou em nenhum dos dois, e o botão de conta-gotas. Abaixo, um quadro mostra todas as variações de intensidade e claridade da matiz escolhida, com uma linha marcando o limite do sRGB, outra tracejada para o P3 e hachuras no que a tela não exibe. Depois vêm as barras de matiz e de transparência, os quatro campos de código, o painel de contraste e uma faixa com 11 tons para copiar.
Você pode estar procurando isto se pediu algo assim
- escolher a cor da marca e já ver se o texto fica legível em cima dela
- seletor de cor que gere a paleta de 50 a 950, tipo Tailwind
- campo para o cliente escolher a cor do tema no painel do meu SaaS
- color picker que mostre se a cor passa no contraste de acessibilidade
- pegar uma cor da tela com conta-gotas e copiar o hex
- seletor de cores profissional com OKLCH para o meu design system
- converter a cor entre HEX, RGB e HSL no mesmo lugar
Também chamado de
- color picker
- seletor de cores
- seletor OKLCH
- OKLCH picker
- gerador de paleta
- verificador de contraste
- color palette generator
Quando usar
- Tela de tema em SaaS em que o cliente define a cor da marca
- Ferramenta interna de design system ou de identidade visual
- Editor de páginas, e-mails ou apresentações com escolha de cores
- Painéis que precisam conferir contraste antes de publicar uma cor
Quando evitar
- Formulários simples em que bastam algumas cores prontas para escolher
- Públicos leigos, para quem OKLCH e gamut P3 são informação demais
Como pedir para a sua IA
Adicione um seletor de cor em OKLCH à tela de tema do meu SaaS, com limites de sRGB e P3, campos HEX, RGB, HSL e OKLCH, contraste WCAG contra o fundo, escala de tons de 50 a 950 copiável como variáveis CSS, uso completo pelo teclado e carregamento só no navegador no Nuxt.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Anilina
Anilina funciona no Nuxt com SSR?
Funciona com um cuidado. A área de cor de Anilina é desenhada em canvas no navegador, por isso o prompt do THM Componentes orienta a IA a envolver o componente em ClientOnly, com uma cor ou imagem estática de reserva, e a carregar o componente sob demanda.
Dá para copiar a paleta de Anilina para o meu CSS?
Sim. A escala tonal de Anilina tem 11 tons, do 50 ao 950, gerados em OKLCH a partir da cor escolhida. Um botão copia todos como variáveis CSS com o prefixo que você definir, e cada tom copia o próprio hex com um clique. Os campos HEX, RGB, HSL e OKLCH também têm botão de copiar.
Dá para usar Anilina só com o teclado?
Sim. Em Anilina, a área de cor é um controle deslizante: as setas mudam intensidade e claridade, Shift aumenta o passo, Page Up e Page Down saltam a claridade, Home zera a intensidade e End leva ao limite do sRGB. Matiz e transparência são controles nativos de faixa, e as cópias são anunciadas ao leitor de tela.
