Rampa – A color toolkit for AI agents and humans

tinted-neutrals/skill.md

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

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 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

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

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