Rampa – A color toolkit for AI agents and humans

Rampa has launched a new color toolkit that enables both AI agents and human designers to generate cohesive color systems from a single brand color. The open-source command-line tool provides recipes for creating neutral palettes, accessible contrast pairs, data visualization colors, status indicators, and complete theme foundations using mathematical color relationships.

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