basiclines Rampa Color Palette Generator
Generate perceptually uniform color palettes from a base color using the OKLCH color space.
Installation
# Run directly
npx @basiclines/rampa -C "#3b82f6"
# Or install globally
npm install -g @basiclines/rampa
Quick Examples
Generate a basic 10-color palette
rampa -C "#3b82f6"
Output as CSS variables
rampa -C "#3b82f6" -O css --name=primary
Output:
:root {
--primary-0: #000000;
--primary-1: #1e3a5f;
--primary-2: #2d5a8a;
...
}
Output as JSON
rampa -C "#3b82f6" -O json
Add complementary harmony
rampa -C "#3b82f6" --add=complementary -O css
Custom lightness and saturation ranges
rampa -C "#3b82f6" -L 15:95 -S 100:20
Use Fibonacci distribution
rampa -C "#3b82f6" --lightness-distribution=fibonacci
Generate 5 colors with triadic harmony
rampa -C "#3b82f6" --size=5 --add=triadic -O css --name=brand
All Options
| Flag | Alias | Description | Default |
|---|---|---|---|
--color |
-C |
Required. Base color (hex, rgb, hsl, or named) | - |
--size |
- | Number of colors in palette | 10 |
--output |
-O |
Output format: text, json, css |
text |
--format |
-F |
Color format: hex, rgb, hsl, oklch |
hex |
--name |
- | Palette name (for CSS/JSON output) | base |
--lightness |
-L |
Lightness range (e.g., 15:95) |
0:100 |
--saturation |
-S |
Saturation range (e.g., 100:20) |
100:0 |
--hue |
-H |
Hue shift range (e.g., -10:10) |
-10:10 |
--lightness-distribution |
- | Distribution curve for lightness | linear |
--saturation-distribution |
- | Distribution curve for saturation | linear |
--hue-distribution |
- | Distribution curve for hue | linear |
--add |
- | Add harmony ramp | - |
--tint-color |
- | Tint overlay color | - |
--tint-opacity |
- | Tint opacity (0-100) | 10 |
--tint-blend |
- | Tint blend mode | overlay |
--no-preview |
- | Hide color preview blocks | false |
Distribution Types
Control how values are distributed across the palette:
linear- Even spacing (default)fibonacci- Fibonacci sequencegolden-ratio- Golden ratio progressionease-in- Slow start, fast endease-out- Fast start, slow endease-in-out- Slow start and endgeometric- Exponential growthlogarithmic- Logarithmic curve
Harmony Types
Generate related color ramps:
complementary- Opposite on color wheel (+1 ramp)triadic- 3 colors, 120° apart (+2 ramps)analogous- Adjacent colors, 30° apart (+2 ramps)split-complementary- 2 colors near opposite (+2 ramps)square- 4 colors, 90° apart (+3 ramps)
Blend Modes (for tinting)
normal · multiply · screen · overlay · darken · lighten · color-dodge · color-burn · hard-light · soft-light
When to Use This Skill
- User asks to "generate a color palette"
- User needs "CSS color variables"
- User wants "accessible colors" or "design system colors"
- User mentions "color ramp" or "color scale"
- User needs "complementary/triadic/analogous colors"
- User wants "perceptually uniform" colors
- User is building a theme or design tokens
Tips
- For dark mode themes, use
-L 5:85to avoid pure black/white - For muted palettes, use
-S 60:20 - Use
--add=analogousfor harmonious multi-color themes - Use
-O jsonwhen you need to process colors programmatically - Combine with
--size=5for minimal palettes