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 scale

rampa -C "#3b82f6" --lightness-scale=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-scale	-	Distribution scale for lightness	linear
--saturation-scale	-	Distribution scale for saturation	linear
--hue-scale	-	Distribution scale 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

Scale 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

1. For dark mode themes, use -L 5:85 to avoid pure black/white
2. For muted palettes, use -S 60:20
3. Use --add=analogous for harmonious multi-color themes
4. Use -O json when you need to process colors programmatically
5. Combine with --size=5 for minimal palettes