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 entrega as swatches (amostras de cor) e não vai além disso. O Match Themes segue até o código: escolha uma cor base, valide o contraste em componentes shadcn reais e copie um bloco @theme (diretiva de tokens do Tailwind v4) pronto para colar. Sem etapa de conversão, sem mapear variável na mão.
A diferença começa no espaço de cor. No HSL, duas cores com o mesmo valor de luminosidade não parecem ter o mesmo brilho: um slate-500 e um yellow-500 têm L idêntico, e ainda assim o amarelo parece bem mais claro. O OKLCH corrige isso porque suas coordenadas acompanham a percepção humana. Troque o matiz e o contraste continua o mesmo. O estúdio trabalha em OKLCH de ponta a ponta; HEX e RGB aparecem só na hora de pintar a tela.
São três eixos, e cada um responde por uma coisa:
| Eixo | O que controla | Faixa |
|---|---|---|
L luminosidade | Quão claro a cor parece ao olho | 0 preto · 1 branco |
C croma | Intensidade, o quanto a cor é viva | 0 cinza · 0.4 vívido |
H matiz | Ângulo na roda de cores | 0° vermelho · 270° roxo |
O app usa a própria paleta como demonstração: o título do topo pinta Match com a cor base ativa e themes com a segunda cor da harmonia. Trocar o seletor recolore o texto ao vivo.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| OKLCH (Oklab Lightness Chroma Hue, espaço de cor perceptual) | Espaço de cor cujas coordenadas seguem a percepção do olho humano. O contraste se mantém quando o matiz muda. |
| HSL (Hue, Saturation, Lightness, Matiz, Saturação e Luminosidade) | Espaço de cor anterior ao OKLCH. Cores de matiz diferente e mesma luminosidade aparentam brilhos diferentes. |
| 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. |
| token (de design) | Valor de cor declarado uma vez, num lugar só. Cada componente lê o token em vez de repetir o valor dentro de si. |
| harmonia | Conjunto de cores derivado de uma cor base por uma regra do círculo cromático (complementar, triádica, análoga). |
| escala tonal | Os 11 tons de uma mesma cor, do mais claro (50) ao mais escuro (950), como nas paletas do Tailwind. |
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 tons (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 |
O arredondamento entra no mesmo pacote
Tema não é só cor. O estúdio controla também o --radius, a variável que arredonda os cantos de todo componente shadcn, em seis presets fixos, do canto reto ao formato de pílula:
| Preset | Valor |
|---|---|
sharp | 0 |
subtle | 0.3rem |
soft | 0.5rem |
default | 0.625rem |
round | 0.75rem |
pill | 1rem |
O valor escolhido aparece na hora nos painéis de demonstração e sai junto no CSS exportado, então o arredondamento chega ao seu projeto pela mesma cópia que leva as cores.
Página de teoria
A rota /teoria é uma referência educacional integrada ao estúdio: 9 seções recolhíveis (accordions, blocos que expandem e fecham no lugar) 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.
Inspiração e crédito
O layout vem do tweakcn: barra fixa no topo que mantém os controles de paleta sempre à mão, showcase recolhível para o grid de cores ficar em foco, e a exportação como modal, para o fluxo terminar onde começou.
O título do topo é a demonstração mais direta do que a ferramenta faz. Match é pintado com a cor base ativa e themes com a segunda cor da harmonia, então trocar o seletor repinta o título ao vivo.
Status
| Aspecto | Estado |
|---|---|
| Maturidade | Em uso, evolução iterativa |
| Cobertura de testes | 121 testes (Vitest + Testing Library), com o núcleo de cor testado sem DOM nem React |
| Disponibilidade | Live no GitHub Pages |
| Repositório | Público, licença ISC |
| Monetização | Nenhuma, ferramenta de código aberto |
A matemática de cor fica em
/src/core, em funções puras, separada da tela que a usa. Se você quer outro export, outra harmonia ou outro conjunto de presets, o repositório é público e sob licença ISC, então faça seu fork.