Sanzo Wada-Paletten

Was macht Sanzo Wada-Paletten?

Verwende dies, wenn der Benutzer ein Farbschema "aus dem Wada-Buch", eine Sanzo Wada-Palette, eine bestimmte Kombinationsnummer oder eine geschmackvolle Palette für eine Website, Marke, ein Design oder Outfit wünscht.

1. Daten abrufen

Quelle: mattdesl/dictionary-of-colour-combinations (MIT-Lizenz). Klone es in einen eigenen leeren Ordner:

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

Fallback: npm install dictionary-of-colour-combinations in einem leeren Ordner.

colors.json ist ein Array von 159 Farben:

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

Paletten werden nicht direkt gespeichert. Kombination N ist jede Farbe, deren combinations-Liste N enthält:

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 von 2, 3 oder 4 Farben

Führe Python mit -I aus und behalte Skripte außerhalb des geklonten Ordners.

2. Paletten auswählen

• Wenn der Benutzer eine Kombinationsnummer angibt, verwende sie direkt.
• Andernfalls filtere nach seinen Wünschen: Farbanzahl (2, 3 oder 4), Stimmung (warm/kühl anhand des Farbtons, dezent/kräftig anhand des LAB-Chroma-Werts) oder einer gewünschten Farbe (nächste Farbe basierend auf LAB-Distanz).
• Wähle 5–10 Kandidaten für den Switcher (Schritt 4). Wenn keine Website erstellt wird, zeige 3–5 als Inline-Farbfelder (Hex, Name, Kombinationsnummer).
• Überprüfe für UI-Arbeiten den Textkontrast mit WCAG-Verhältnissen: 4,5:1 für Fließtext. Verwende die hellste oder dunkelste Farbe als Hintergrund. Behebe ein fehlschlagendes Paar, indem du eine hellere/dunklere Nuance einer Palettenfarbe für den Text ableitest, und vermerke dies.

3. Jede Palette in ein Theme umwandeln

Für Web-Arbeiten (standardmäßig Tailwind/shadcn) verwandle jede Kandidaten-Palette in einen vollständigen Satz von shadcn-CSS-Variablen: --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --muted, --muted-foreground, --border, --ring. Verwende das Farbformat, das das Projekt bereits verwendet (HSL oder OKLCH). Wenn eine Palette kein nahezu Weiß oder nahezu Schwarz enthält, leite Töne und Schattierungen aus ihren eigenen Farben ab, anstatt reines Grau zu verwenden.

Schreibe alle Themes in eine Datei, z. B. lib/wada-themes.ts:

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

4. Theme-Switcher hinzufügen (immer, für Web-Arbeiten)

Erstelle eine Client-Komponente components/wada-theme-switcher.tsx und rendere sie einmal im Root-Layout.

Verhalten:

• Ein kleiner schwebender Button in der unteren rechten Ecke (hoher z-index, eigenes festes neutrales Styling, damit er bei jedem Theme lesbar bleibt).
• Beim Klicken öffnet sich ein Panel, das jedes Theme auflistet: Kombinationsnummer, Name und die zugehörigen Farbfelder als kleine Kreise. Durch Klicken auf ein Theme wird es sofort angewendet, indem seine vars auf document.documentElement.style gesetzt werden.
• Vorher-/Nächster-Pfeile plus Tastaturkürzel ([ und ]), um schnell durch die Themes zu blättern.
• Eine "Standard"-Option, die die Inline-Variablen entfernt, um das ursprüngliche Theme der Website wiederherzustellen.
• Merke das ausgewählte Theme in localStorage (in try/catch eingeschlossen), damit es Seitenaufrufe und Neuladungen übersteht.
• Ein "CSS kopieren"-Button, der das aktuelle Theme als bereit zum Einfügen :root { ... }-Block für globals.css kopiert, mit der Kombinationsnummer in einem Kommentar.
• Sichtbarkeit: Zeige es, wenn process.env.NODE_ENV !== "production" ODER die URL ?themes=1 enthält. So kann der Benutzer es in einer Live-Vercel-Vorschau testen und den Link mit einem Kunden teilen, während normale Besucher es nie sehen.

Wenn der Benutzer einen Gewinner auswählt ("Sperre 176"), schreibe die Variablen dieses Themes als Standard in globals.css. Frage, ob der Switcher und wada-themes.ts entfernt oder hinter ?themes=1 behalten werden sollen.

Andere Ausgaben

• Reine CSS-Websites: Der gleiche Switcher in Vanilla-JS, der benutzerdefinierte Eigenschaften auf :root setzt.
• Design / Druck: Liste die Hex-, RGB- und CMYK-Werte pro Farbe mit der Kombinationsnummer auf.
• Outfits / nicht digital: Beschreibe jede Farbe in einfachen Worten und welchem Kleidungsstück sie entspricht (Basis, Hauptfarbe, Akzent).

Gib immer die Kombinationsnummer(n) an, damit der Benutzer sie im Buch finden kann.

Hinweise

• Hex-Werte sind digitalisierte Näherungen. Die CMYK-Werte des gedruckten Buches sind die Referenz.
• Farbnamen stammen aus dem Datensatz. Erfinde keine japanischen Namen.