Menú
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Audit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation.
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
Generate success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.
| name | brand-expansion |
| description | Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Transform a single brand color into a complete, cohesive color system. Uses multiple harmony types to generate related hues - all mathematically derived from one input.
npx @basiclines/rampa
From one brand color, generate:
The brand color expanded to full 10-shade scale:
rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=primary
Colors adjacent on the wheel (±30°) - great for subtle variations:
rampa -C "<brand-color>" --add=analogous -L 95:10 --size=10 -O css
Outputs: base, analogous-1, analogous-2
Direct opposite for maximum contrast - perfect for CTAs:
rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css
Outputs: base, complementary-1
Two colors flanking the complement - more nuanced contrast:
rampa -C "<brand-color>" --add=split-complementary -L 95:10 --size=10 -O css
Outputs: base, split-complementary-1, split-complementary-2
For brand color #7c3aed (purple):
# 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 |
For a quick overview with minimal output:
# See all harmonies at once
rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css