# Rampa Colors

> 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. Use when this capability is needed.

- Skill: `tomevault-io/rampa-colors` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/rampa-colors`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/rampa-colors/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/rampa-colors

---


# Rampa Color Palette Generator

Generate perceptually uniform color palettes from a base color using the OKLCH color space.

## Installation

```bash
# Run directly
npx @basiclines/rampa -C "#3b82f6"

# Or install globally
npm install -g @basiclines/rampa
```

## Quick Examples

### Generate a basic 10-color palette
```bash
rampa -C "#3b82f6"
```

### Output as CSS variables
```bash
rampa -C "#3b82f6" -O css --name=primary
```
Output:
```css
:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}
```

### Output as JSON
```bash
rampa -C "#3b82f6" -O json
```

### Add complementary harmony
```bash
rampa -C "#3b82f6" --add=complementary -O css
```

### Custom lightness and saturation ranges
```bash
rampa -C "#3b82f6" -L 15:95 -S 100:20
```

### Use Fibonacci distribution
```bash
rampa -C "#3b82f6" --lightness-distribution=fibonacci
```

### Generate 5 colors with triadic harmony
```bash
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

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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/basiclines) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->