Algorithmic Colour Palette
Dérive les tokens hover/active/tint/grey/semantic à partir d'une couleur hex de marque via des formules HSL fixes.
Testé · Fonctionne
Ce que fait
Développe une ou deux couleurs de marque en un système de couleurs d'interface utilisateur complet en utilisant des formules explicites d'ajustement HSL : états interactifs plus foncés/clairs, gris désaturés de la teinte de la marque au lieu de neutres génériques, et couleurs de statut sémantiques alignées sur la saturation et la luminosité de la marque. Se déclenche lors de la construction ou de l'extension d'un système de couleurs, du choix des nuances hover/active, ou de la génération de tokens pour les fichiers CSS/Tailwind/design-system.
Rapport de test
J'ai exécuté les calculs HSL réels sur la couleur de marque #2D6A4F (H153/S40/L30) pour de vrai : la sortie de la compétence a produit des gris visiblement teintés de vert (#161d1a, #45544d, #f4f5f5) et des couleurs sémantiques bloquées à la saturation de 40% de la marque, par rapport aux gris Tailwind de base non guidés et aux rouges/ambres/verts par défaut qui n'ont aucune relation de teinte ou d'intensité avec la marque.
Testé le: 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
Commandes et exemples de prompts
/algorithmic-color-paletteDérive les tokens hover/active/tint/grey/semantic à partir d'une couleur hex de marque via des formules HSL fixes.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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