Paletas Sanzo Wada

O que Paletas Sanzo Wada faz?

Use isso quando o usuário quiser um esquema de cores "do livro Wada", uma paleta Sanzo Wada, um número de combinação específico, ou uma paleta elegante para um site, marca, design ou roupa.

1. Obter os dados

Fonte: mattdesl/dictionary-of-colour-combinations (licença MIT). Clone em uma pasta vazia:

mkdir -p /tmp/wada && git clone --depth 1 -q https://github.com/mattdesl/dictionary-of-colour-combinations /tmp/wada/repo

Alternativa: npm install dictionary-of-colour-combinations em uma pasta vazia.

colors.json é um array com 159 cores:

{"name": "Hermosa Pink", "combinations": [176, 227, 273], "swatch": 0,
 "cmyk": [0,30,6,0], "lab": [...], "rgb": [249,193,206], "hex": "#f9c1ce"}

As paletas não são armazenadas diretamente. A combinação N é toda cor cuja lista combinations contém N:

import json, collections
colors = json.load(open('/tmp/wada/repo/colors.json'))
combos = collections.defaultdict(list)
for c in colors:
    for n in c['combinations']:
        combos[n].append(c)
# combos[n] -> lista de 2, 3 ou 4 cores

Execute Python com -I e mantenha os scripts fora da pasta clonada.

2. Escolher paletas

• Se o usuário fornecer um número de combinação, use-o diretamente.
• Caso contrário, filtre pelo que foi pedido: quantidade de cores (2, 3 ou 4), clima (quente/frio por matiz, sóbrio/ vibrante por croma LAB) ou uma cor a ser incluída (a mais próxima por distância LAB).
• Selecione de 5 a 10 candidatos para o trocador (passo 4). Se não estiver criando um site, mostre de 3 a 5 como amostras inline (hex, nome, número do combo).
• Para trabalhos de UI, verifique o contraste do texto com as taxas WCAG: 4,5:1 para texto corrido. Use a cor mais clara ou mais escura como fundo. Corrija um par reprovado derivando um tom mais claro/escuro de uma das cores da paleta para o texto e anote.

3. Mapear cada paleta para um tema

Para trabalhos web (Tailwind/shadcn por padrão), transforme cada paleta candidata em um conjunto completo de variáveis CSS shadcn: --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --muted, --muted-foreground, --border, --ring. Use o formato de cor que o projeto já utiliza (HSL ou OKLCH). Se uma paleta não tiver uma cor próxima do branco ou do preto, derive matizes/sombras das próprias cores em vez de usar cinza puro.

Escreva todos os temas em um único arquivo, por exemplo lib/wada-themes.ts:

export const wadaThemes = [
  { id: 176, name: "Hermosa Pink / ...", swatches: ["#f9c1ce", ...], vars: { "--background": "...", ... } },
  ...
];

4. Adicionar o trocador de temas (sempre, para trabalhos web)

Crie um componente cliente components/wada-theme-switcher.tsx e renderize-o uma vez no layout raiz.

Comportamento:

• Um pequeno botão flutuante no canto inferior direito (alto z-index, estilo neutro fixo para permanecer legível em qualquer tema).
• Ao clicar, abre um painel listando cada tema: número do combo, nome e suas amostras como círculos pequenos. Clicar em um tema o aplica instantaneamente definindo suas vars em document.documentElement.style.
• Setas anterior/próxima mais atalhos de teclado ([ e ]) para navegar rapidamente entre os temas.
• Uma opção "Padrão" que remove as variáveis inline para restaurar o tema original do site.
• Lembrar o tema selecionado no localStorage (envolvido em try/catch) para que sobreviva à navegação e recarregamento de páginas.
• Um botão "Copiar CSS" que copia o tema atual como um bloco :root { ... } pronto para colar em globals.css, com o número do combo em um comentário.
• Visibilidade: mostrá-lo quando process.env.NODE_ENV !== "production" OU a URL tiver ?themes=1. Isso permite que o usuário teste em uma preview Vercel ao vivo e compartilhe o link com um cliente, enquanto visitantes normais nunca o veem.

Quando o usuário escolher um vencedor ("fixar 176"), escreva as variáveis desse tema em globals.css como padrão. Pergunte se deseja remover o trocador e wada-themes.ts ou mantê-los atrás de ?themes=1.

Outras saídas

• Sites CSS puro: o mesmo trocador em JS vanilla, definindo propriedades personalizadas em :root.
• Design / impressão: liste hex, RGB e CMYK de cada cor com o número da combinação.
• Roupas / não digital: descreva cada cor em palavras simples e qual peça combina (base, principal, destaque).

Sempre cite o(s) número(s) da combinação para que o usuário possa encontrá-los no livro.

Notas

• Os valores hex são aproximações digitalizadas. Os valores CMYK do livro impresso são a referência.
• Os nomes das cores vêm do conjunto de dados. Não invente nomes japoneses.