Palettes Sanzo Wada

Que fait Palettes Sanzo Wada ?

Utilisez ceci lorsque l'utilisateur souhaite un jeu de couleurs « du livre de Wada », une palette Sanzo Wada, un numéro de combinaison spécifique, ou une palette de bon goût pour un site, une marque, un design ou une tenue.

1. Obtenir les données

Source : mattdesl/dictionary-of-colour-combinations (licence MIT). Clonez-le dans son propre dossier vide :

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

Solution de repli : npm install dictionary-of-colour-combinations dans un dossier vide.

colors.json est un tableau de 159 couleurs :

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

Les palettes ne sont pas stockées directement. La combinaison N est chaque couleur dont la liste combinations contient 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] -> liste de 2, 3 ou 4 couleurs

Exécutez Python avec -I, et conservez les scripts en dehors du dossier cloné.

2. Choisir les palettes

• Si l'utilisateur donne un numéro de combinaison, utilisez-le directement.
• Sinon, filtrez selon ce qu'il a demandé : nombre de couleurs (2, 3 ou 4), ambiance (chaud/froid par teinte, doux/vif par chroma LAB), ou une couleur qu'il souhaite inclure (la plus proche par distance LAB).
• Choisissez 5 à 10 candidates pour le changeur (étape 4). S'il ne s'agit pas de construire un site, affichez 3 à 5 comme échantillons en ligne (hex, nom, numéro de combinaison).
• Pour le travail d'interface, vérifiez le contraste du texte avec les ratios WCAG : 4,5:1 pour le corps du texte. Utilisez la couleur la plus claire ou la plus foncée comme arrière-plan. Corrigez une paire défaillante en dérivant une teinte plus claire ou plus foncée d'une couleur de la palette pour le texte, et notez-le.

3. Mapper chaque palette à un thème

Pour le travail web (Tailwind/shadcn par défaut), transformez chaque palette candidate en un ensemble complet de variables CSS shadcn : --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --muted, --muted-foreground, --border, --ring. Utilisez le format de couleur déjà employé par le projet (HSL ou OKLCH). Si une palette ne contient ni blanc ni noir approchant, dérivez des teintes/ombres à partir de ses propres couleurs plutôt que d'utiliser du gris pur.

Écrivez tous les thèmes dans un seul fichier, par exemple lib/wada-themes.ts :

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

4. Ajouter le changeur de thème (toujours, pour le travail web)

Créez un composant client components/wada-theme-switcher.tsx et affichez-le une fois dans la mise en page racine.

Comportement :

• Un petit bouton flottant dans le coin inférieur droit (z-index élevé, avec son propre style neutre fixe pour rester lisible sur tous les thèmes).
• Un clic ouvre un panneau listant chaque thème : numéro de combinaison, nom, et ses échantillons sous forme de petits cercles. Un clic sur un thème l'applique instantanément en définissant ses vars sur document.documentElement.style.
• Des flèches précédent/suivant ainsi que des raccourcis clavier ([ et ]) pour parcourir rapidement les thèmes.
• Une option « Par défaut » qui supprime les variables en ligne pour restaurer le thème d'origine du site.
• Mémorisez le thème sélectionné dans localStorage (enveloppé dans un try/catch) pour qu'il survive à la navigation et aux rechargements de page.
• Un bouton « Copier CSS » qui copie le thème actuel sous forme de bloc :root { ... } prêt à coller dans globals.css, avec le numéro de combinaison dans un commentaire.
• Visibilité : affichez-le lorsque process.env.NODE_ENV !== "production" OU que l'URL contient ?themes=1. Cela permet à l'utilisateur de tester sur un aperçu Vercel en direct et de partager le lien avec un client, tandis que les visiteurs normaux ne le voient jamais.

Lorsque l'utilisateur choisit un gagnant (« verrouiller 176 »), écrivez les variables de ce thème dans globals.css comme valeur par défaut. Demandez s'il faut supprimer le changeur et wada-themes.ts ou les conserver derrière ?themes=1.

Autres sorties

• Sites CSS simples : le même changeur en JavaScript vanille, définissant les propriétés personnalisées sur :root.
• Design / impression : listez hex, RGB et CMYK par couleur avec le numéro de combinaison.
• Tenues / non numériques : décrivez chaque couleur en mots simples et à quel vêtement elle convient (base, principal, accent).

Citez toujours le(s) numéro(s) de combinaison pour que l'utilisateur puisse les retrouver dans le livre.

Notes

• Les valeurs hexadécimales sont des approximations numérisées. Les valeurs CMYK du livre imprimé sont la référence.
• Les noms de couleurs proviennent du jeu de données. N'inventez pas de noms japonais.