Loading...
Loading...
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
npx skill4agent add basiclines/rampa-studio brand-expansionnpx @basiclines/ramparampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=primaryrampa -C "<brand-color>" --add=analogous -L 95:10 --size=10 -O cssbaseanalogous-1analogous-2rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O cssbasecomplementary-1rampa -C "<brand-color>" --add=split-complementary -L 95:10 --size=10 -O cssbasesplit-complementary-1split-complementary-2#7c3aed# Primary - the purple itself
rampa -C "#7c3aed" -L 95:10 --size=10 -O css --name=primary
# Analogous - blue and magenta variations
rampa -C "#7c3aed" --add=analogous -L 95:10 --size=10 -O css
# Complementary - lime/yellow for CTAs
rampa -C "#7c3aed" --add=complementary -L 95:10 --size=10 -O css
# Split-complementary - yellow-green options
rampa -C "#7c3aed" --add=split-complementary -L 95:10 --size=10 -O css:root {
/* Primary */
--primary-0: #faf5ff;
--primary-5: #7c3aed;
--primary-9: #2e1065;
/* Analogous */
--analogous-1-0: #eff6ff; /* Blue-ish */
--analogous-1-5: #3b82f6;
--analogous-2-0: #fdf2f8; /* Pink-ish */
--analogous-2-5: #ec4899;
/* Complementary */
--complementary-1-0: #fefce8; /* Yellow/lime */
--complementary-1-5: #84cc16;
/* Split-complementary */
--split-complementary-1-0: #f0fdf4; /* Green */
--split-complementary-2-0: #fefce8; /* Yellow */
}| Harmony | Best For |
|---|---|
| Primary | Main brand applications, headers, primary buttons |
| Analogous | Hover states, related sections, gradients |
| Complementary | CTAs, alerts, highlights that need attention |
| Split-complementary | Secondary actions, badges, alternative accents |
# See all harmonies at once
rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css