Algorithmic Colour Palette
Leitet hover/active/tint/grey/semantic Tokens aus einem Marken-Hex-Wert über feste HSL-Formeln ab.
Getestet · Funktioniert
Was es kann
Erweitert eine oder zwei Markenfarben zu einem vollständigen UI-Farbsystem unter Verwendung expliziter HSL-Anpassungsformeln: dunklere/hellere interaktive Zustände, Markenfarbton-entsättigte Grautöne anstelle generischer Neutraltöne und semantische Statusfarben, die auf die Sättigung und Helligkeit der Marke abgestimmt sind. Wird ausgelöst beim Aufbau oder der Erweiterung eines Farbsystems, der Auswahl von hover/active Farbtönen oder der Generierung von Tokens für CSS/Tailwind/design-system Dateien.
Testbericht
Die tatsächliche HSL-Berechnung für die Markenfarbe #2D6A4F (H153/S40/L30) in der Praxis durchgeführt: Die Skill-Ausgabe erzeugte Grautöne, die sichtbar grünlich getönt sind (#161d1a, #45544d, #f4f5f5), und semantische Farben, die an die eigene 40%ige Sättigung der Marke gebunden sind, im Gegensatz zu den Standard-Tailwind-Grautönen und den roten/bernsteinfarbenen/grünen Standardfarben der ungelenkten Basislinie, die keinerlei Farbton- oder Intensitätsbeziehung zur Marke aufweisen.
Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/dembrandt/dembrandt-skills cd dembrandt-skills mkdir -p ~/.claude/skills cp -r skills/algorithmic-color-palette ~/.claude/skills/algorithmic-color-palette
Befehle & Beispiel-Prompts
/algorithmic-color-paletteLeitet hover/active/tint/grey/semantic Tokens aus einem Marken-Hex-Wert über feste HSL-Formeln ab.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Generate a full color palette from our brand hex #2D6A4FI need hover and active state colors for our primary buttonCreate brand-tinted grey tokens for our Tailwind config