Aufgabenpfad / von der Eingabe zum Ergebnis
So baust du eine Fünf-Farben-Harmonie
- 01
Lege die Startfarbe fest
Tippe einen sechsstelligen Hex-Wert in Start-HEX — das Präfix # ist optional — oder wähle die Farbe visuell mit der Farbauswahl. Die beiden Felder bleiben synchron, und der Arbeitsbereich öffnet mit der Startfarbe #5D4DF1.
- 02
Wähle die Harmonieregel
Wähle Analog, Komplementär, Geteilt-komplementär, Triadisch, Tetradisch oder Monochrom. Die Engine verwendet feste Farbton-Abstände und fixiert danach das mittlere Feld auf die exakte Startfarbe; die übrigen Felder treffen nicht unbedingt Lehrbuchwinkel. Monochrom behält den Farbton bei, variiert aber Sättigung und Helligkeit.
- 03
Lege das Kontrastziel fest
Wähle ein Textkontrast-Ziel: 3:1 für großen Text, 4,5:1 für AA-Fließtext oder 7:1 für AAA-Fließtext — der Standard ist 4,5:1. Jedes Farbfeld wird gegen Schwarz oder Weiß gemessen, je nachdem, was sich darauf besser liest.
- 04
Generiere die Palette
Drücke Palette generieren. Fünf Farbfelder erscheinen, und das mittlere ist immer exakt deine Startfarbe — die anderen vier verschieben Farbton, Sättigung und Helligkeit um sie herum innerhalb begrenzter Bereiche, sodass die Skala nutzbar bleibt, statt nach Neon oder Matsch zu driften.
- 05
Lies die Kontrast-Badges
Jedes Farbfeld zeigt seinen Hex-Wert, sein Kontrastverhältnis und ein Badge Bestanden oder Unter dem Ziel, wobei der Text des Felds in Schwarz oder Weiß gerendert wird — der Farbe, die den Kontrastvergleich gewonnen hat. Ein Badge Unter dem Ziel heißt: Wähle einen dunkleren oder helleren Nachbarn für Text, nicht dass die Farbe kaputt ist.
- 06
Kopiere das CSS oder lade das JSON herunter
CSS kopieren kopiert einen kommentierten :root-Block mit den Custom Properties --palette-1 bis --palette-5. JSON herunterladen speichert toolars-palette.json, das Startfarbe, Harmonie, Kontrastziel und die Kontrastdaten jeder Farbe aufzeichnet, neben den explizit auf null gesetzten Feldern aiModel und api.