# Rampa – A color toolkit for AI agents and humans

> Source: <https://rampa.design/>
> Published: 2026-06-05 12:37:19+00:00

tinted-neutrals/skill.md

# Tinted Neutrals

Create neutral palettes that carry a subtle hint of your brand color. Instead of pure grays, get warm or cool neutrals that feel cohesive with your design system.

## When to Use

- "Create grays that match my brand"

- "I want warm/cool neutrals"

- "Tint my neutral palette with brand color"

## Recipe

### 1. Pure Neutral (Desaturated Brand)

`rampa -C "<brand>" -L 98:5 -S 3:8 --size=10 -O css --name=neutral`

### 2. Tinted Neutral

Apply your brand color as a subtle overlay tint:

`rampa -C "<brand>" -L 98:5 -S 3:8 --tint-color="<brand>" --tint-opacity=8 --tint-blend=overlay --size=10`

accessible-contrast/skill.md

# Accessible Contrast Pairs

Generate color ramps designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.

## The 11-Step Strategy

Why 11 steps? Predictable pairing math:

Maximum → 0 + 10 → Highest contrast

AAA → 1 + 9 → 7:1+ ratio

AA → 3 + 7 → 4.5:1+ ratio

AA Large → 4 + 6 → 3:1+ ratio

## Recipe

`rampa -C "<brand>" -L 98:5 --size=11 -O css --name=color`

Pairs are symmetrical: 0+10, 1+9, 2+8, etc.

data-viz-palette/skill.md

# Data Visualization Palette

Generate colors optimized for charts, graphs, and dashboards. Colors are mathematically spaced for maximum distinction and equal visual weight.

## Key Principles

1. **Fixed lightness** — equal visual weight

2. **Fixed saturation** — consistent vibrancy

3. **Maximum hue spacing** — use harmonies

4. **Single shade per color** — distinct hues, not ramps

### 3 Colors (Triadic)

`rampa -C "<brand>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css`

### 4 Colors (Square)

`rampa -C "<brand>" --add=square --size=2 -L 50:50 -S 70:70 -O css`

status-from-accent/skill.md

# Status Colors from Accent

Generate success, warning, danger, and info colors mathematically related to your brand using square harmony.

## The Square Harmony Approach

4 colors at 90° intervals on the color wheel:

`rampa -C "<brand>" --add=square -L 95:15 --size=10 -O css`

base → your brand color (info/primary)

square-1 → +90° rotation

square-2 → +180° (opposite)

square-3 → +270° rotation

## Mapping Hues to Status

80-150° → Success (green/teal)

30-80° → Warning (yellow/orange)

0-30° → Danger (red/pink)

theme-foundation/skill.md

# Theme Foundation

Generate a complete theme color system from a single brand color. Creates primary accent, secondary accent, and neutral ramps — all mathematically derived.

## When to Use

- "Create a theme from my brand color"

- "I need colors for light and dark mode"

- "Generate a color system for my app"

## Recipe

### 1. Primary Accent Ramp

`rampa -C "<brand>" -L 95:10 --size=10 -O css --name=accent`

### 2. Secondary Accent (Complementary)

`rampa -C "<brand>" --add=complementary -L 95:10 --size=10 -O css`

### 3. Neutral Ramp

`rampa -C "<brand>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral`