Match Themes
Estúdio de paletas centrado em OKLCH que exporta direto para Tailwind v4 e shadcn. Escolha uma cor, valide o contraste em componentes reais e copie o bloco @theme pronto para usar.
A maioria das ferramentas de paleta para na geração de swatches. O Match Themes fecha o loop inteiro: escolha uma cor base, valide o contraste em componentes shadcn reais, copie um bloco @theme (diretiva de tokens do Tailwind v4) pronto para colar. Sem etapa de conversão, sem mapeamento manual de variáveis.
A diferença começa no espaço de cor. O HSL produz deriva de luminância entre matizes: um slate-500 e um yellow-500 parecem ter brilhos diferentes mesmo com L idêntico. O OKLCH resolve isso operando em espaço perceptualmente uniforme, mantendo contraste consistente conforme o matiz gira. O estúdio trabalha em OKLCH de ponta a ponta; HEX e RGB aparecem apenas na camada de renderização.
O app é seu próprio pitch: o headline do hero colore Match com a cor base ativa e themes com a segunda cor de harmonia. Trocar o seletor recolore o texto ao vivo.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| OKLCH (Oklab Lightness Chroma Hue, espaço de cor perceptual) | Mantém contraste consistente independente do matiz, ao contrário do HSL. |
| HSL (Hue, Saturation, Lightness, Matiz, Saturação e Luminosidade) | Espaço de cor com deriva de luminância entre matizes, predecessor do OKLCH. |
| WCAG (Web Content Accessibility Guidelines, Diretrizes de Acessibilidade para Conteúdo Web) | Define critérios de contraste mínimo AA e AAA para interfaces acessíveis. |
Stack
| Tecnologia | Papel |
|---|---|
| Vite 6 + TypeScript 5 (strict) | Build e tipagem |
| Vitest 3 + Testing Library | 121 testes; core sem DOM nem React |
| Tecnologia | Papel |
|---|---|
| React 19 | UI com feature folders |
| Tailwind CSS v4 | Tokens e estilo utilitário |
| shadcn/ui + Radix UI | Componentes do showcase e export |
| GitHub Actions → gh-pages | Deploy contínuo |
Arquitetura
| Padrão | Descrição | Detalhes |
|---|---|---|
| Core puro | Toda a matemática de cor em /src/core | funções puras sem DOM e sem React, testáveis em isolamento |
| Feature folders | /src/features consome o core via hooks | colors · showcase · navbar · hero · footer · theory |
| 7 harmonias OKLCH | Complementar · split · triádica · tetrádica · análoga · monocromática · quadrada | escala tonal de 11 stops (50 → 950) por cor de harmonia |
| Contraste WCAG ao vivo | Badge AA / AAA por swatch | avaliado contra branco e preto, melhor contraste retornado |
| Export Tailwind v4 | Bloco @theme · tokens :root · overrides .dark | copiar ou baixar como match-themes.css |
| Internacionalização | Interface completa em EN e pt-BR | toggle persistido no localStorage |
Página de teoria
A rota /teoria é uma referência educacional integrada ao estúdio: 9 accordions (conteúdo agrupado em abas) interativos cobrindo círculo cromático, harmonias, regra 60-30-10, WCAG, densidade visual, estratégias de tema claro/escuro e composição prática com escala tonal. A roda de cores é renderizada em OKLCH em tempo real, refletindo a cor base ativa.