Três verdes que ninguém distingue. Uma paleta que se sustenta.
As cores escorregam: um verde escolhido na ferramenta de design, outro um pouco diferente digitado na mão, um cinza que falha no fundo creme. A skill acha cada cor que a página usa de verdade, junta as que ninguém distingue, corrige o que não dá pra ler e monta pra marca uma paleta OKLCH pra claro e escuro.
npx skills add c0le0ni/skills --skill coleoni-color
Dezesseis cores, oito que não dava pra ler.
A página de bolos da padaria: três verdes, dois terracotas e três cinzas que são iguais pro olho, e o texto secundário falhando no contraste com o creme. Cada falha vem com o mesmo tom um pouco mais escuro que passa.
h1 { color: #2E4B3B }
.brand { color: #2F4A3A }
.btn.alt { background: #304A39 }
.btn { background: #C8643B }
.eyebrow { color: #C9663C }
.lead { color: #8B8F87 } /* 2.91:1 */
.card p { color: #A9AFA4 } /* 2.12:1 */
34 cores no CSS, 0 tokens
O que ela mede.
Cada texto contra o fundo real dele, não contra o branco.
| Conferência | O que conta como problema |
|---|---|
| Contraste | Abaixo de 4,5:1 (3:1 pra texto grande), com o tom mais próximo que passa |
| Quase iguais | Cores a menos de ΔE 0,016 no OKLab |
| Valores soltos | Mais da metade das declarações de cor sem token |
| Destaques | Mais de 6 cores saturadas |
| Modo escuro | Sem prefers-color-scheme: dark (vale olhar) |
| Paleta | Escalas OKLCH a partir da marca, neutros tingidos, tokens semânticos claro e escuro |
Um comando, em qualquer agente.
O único pacote é o playwright-core. Faz parte da família de interface com acabamento, tipografia e layout.
npx skills add c0le0ni/skills --skill coleoni-color
/coleoni-color https://seusite.com.br
-g-a claude-code-a codexnpx skills add c0le0ni/skillsDa auditoria ao modo escuro.
Cor da marca nunca muda calada: quando uma falha como texto, ela fica pros fundos e um passo mais escuro faz o texto.
Auditar as cores.
/coleoni-color https://seusite.com.br
Uma paleta a partir da marca.
/coleoni-color --brand "#C8643B,#2F4A3A", tokens e aplica
Criar o modo escuro.
/coleoni-color o app, cria um modo escuro a partir dos tokens
O motor, pelo terminal.
node color.mjs https://seusite.com.br --brand "#C8643B" --lang pt --out color-report
| Opção | Para quê |
|---|---|
--brand "#hex,#hex" | Cores da marca pra paleta |
--select "main" | Só uma parte da página |
--lang en|pt | Língua do relatório |
Menos cores, todas legíveis.
npx skills add c0le0ni/skills --skill coleoni-color