Algorithmic Colour Palette
Leidt hover/active/tint/grey/semantische tokens af van één merk hex via vaste HSL-formules.
Getest · Werkt
Wat het doet
Breidt één of twee merkkleuren uit tot een volledig UI-kleursysteem met behulp van expliciete HSL-aanpassingsformules: donkerdere/lichtere interactieve staten, merk-tint-ontverzadigde grijstinten in plaats van generieke neutralen, en semantische statuskleuren afgestemd op de verzadiging en helderheid van het merk. Activeert bij het bouwen of uitbreiden van een kleursysteem, het kiezen van hover/active tinten, of het genereren van tokens voor CSS/Tailwind/design-system bestanden.
Testrapport
De daadwerkelijke HSL-berekening uitgevoerd op merkkleur #2D6A4F (H153/S40/L30): de skill-output produceerde grijstinten die zichtbaar groen getint zijn (#161d1a, #45544d, #f4f5f5) en semantische kleuren die vastzitten aan de eigen 40% verzadiging van het merk, versus de standaard Tailwind-grijstinten en standaard rood/amber/groen van de ongeleide baseline die geen enkele tint- of intensiteitsrelatie met het merk delen.
Getest op: 2026-07-14 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/algorithmic-color-paletteLeidt hover/active/tint/grey/semantische tokens af van één merk hex via vaste HSL-formules.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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