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 sequence
golden-ratio - Golden ratio progression
ease-in - Slow start, fast end
ease-out - Fast start, slow end
ease-in-out - Slow start and end
geometric - Exponential growth
logarithmic - 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:85 to avoid pure black/white
For muted palettes, use -S 60:20
Use --add=analogous for harmonious multi-color themes
Use -O json when you need to process colors programmatically
Combine with --size=5 for minimal palettes

rampa-colors

Safety Notice

Copy this and send it to your AI assistant to learn