{"slug": "rampa-a-color-toolkit-for-ai-agents-and-humans", "title": "Rampa – A color toolkit for AI agents and humans", "summary": "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.", "body_md": "tinted-neutrals/skill.md\n\n# Tinted Neutrals\n\nCreate 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.\n\n## When to Use\n\n- \"Create grays that match my brand\"\n\n- \"I want warm/cool neutrals\"\n\n- \"Tint my neutral palette with brand color\"\n\n## Recipe\n\n### 1. Pure Neutral (Desaturated Brand)\n\n`rampa -C \"<brand>\" -L 98:5 -S 3:8 --size=10 -O css --name=neutral`\n\n### 2. Tinted Neutral\n\nApply your brand color as a subtle overlay tint:\n\n`rampa -C \"<brand>\" -L 98:5 -S 3:8 --tint-color=\"<brand>\" --tint-opacity=8 --tint-blend=overlay --size=10`\n\naccessible-contrast/skill.md\n\n# Accessible Contrast Pairs\n\nGenerate color ramps designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.\n\n## The 11-Step Strategy\n\nWhy 11 steps? Predictable pairing math:\n\nMaximum → 0 + 10 → Highest contrast\n\nAAA → 1 + 9 → 7:1+ ratio\n\nAA → 3 + 7 → 4.5:1+ ratio\n\nAA Large → 4 + 6 → 3:1+ ratio\n\n## Recipe\n\n`rampa -C \"<brand>\" -L 98:5 --size=11 -O css --name=color`\n\nPairs are symmetrical: 0+10, 1+9, 2+8, etc.\n\ndata-viz-palette/skill.md\n\n# Data Visualization Palette\n\nGenerate colors optimized for charts, graphs, and dashboards. Colors are mathematically spaced for maximum distinction and equal visual weight.\n\n## Key Principles\n\n1. **Fixed lightness** — equal visual weight\n\n2. **Fixed saturation** — consistent vibrancy\n\n3. **Maximum hue spacing** — use harmonies\n\n4. **Single shade per color** — distinct hues, not ramps\n\n### 3 Colors (Triadic)\n\n`rampa -C \"<brand>\" --add=triadic --size=2 -L 50:50 -S 70:70 -O css`\n\n### 4 Colors (Square)\n\n`rampa -C \"<brand>\" --add=square --size=2 -L 50:50 -S 70:70 -O css`\n\nstatus-from-accent/skill.md\n\n# Status Colors from Accent\n\nGenerate success, warning, danger, and info colors mathematically related to your brand using square harmony.\n\n## The Square Harmony Approach\n\n4 colors at 90° intervals on the color wheel:\n\n`rampa -C \"<brand>\" --add=square -L 95:15 --size=10 -O css`\n\nbase → your brand color (info/primary)\n\nsquare-1 → +90° rotation\n\nsquare-2 → +180° (opposite)\n\nsquare-3 → +270° rotation\n\n## Mapping Hues to Status\n\n80-150° → Success (green/teal)\n\n30-80° → Warning (yellow/orange)\n\n0-30° → Danger (red/pink)\n\ntheme-foundation/skill.md\n\n# Theme Foundation\n\nGenerate a complete theme color system from a single brand color. Creates primary accent, secondary accent, and neutral ramps — all mathematically derived.\n\n## When to Use\n\n- \"Create a theme from my brand color\"\n\n- \"I need colors for light and dark mode\"\n\n- \"Generate a color system for my app\"\n\n## Recipe\n\n### 1. Primary Accent Ramp\n\n`rampa -C \"<brand>\" -L 95:10 --size=10 -O css --name=accent`\n\n### 2. Secondary Accent (Complementary)\n\n`rampa -C \"<brand>\" --add=complementary -L 95:10 --size=10 -O css`\n\n### 3. Neutral Ramp\n\n`rampa -C \"<brand>\" -L 98:5 -S 5:10 --size=10 -O css --name=neutral`", "url": "https://wpnews.pro/news/rampa-a-color-toolkit-for-ai-agents-and-humans", "canonical_source": "https://rampa.design/", "published_at": "2026-06-05 12:37:19+00:00", "updated_at": "2026-06-05 12:48:21.210933+00:00", "lang": "en", "topics": ["ai-tools", "ai-products"], "entities": ["Rampa"], "alternates": {"html": "https://wpnews.pro/news/rampa-a-color-toolkit-for-ai-agents-and-humans", "markdown": "https://wpnews.pro/news/rampa-a-color-toolkit-for-ai-agents-and-humans.md", "text": "https://wpnews.pro/news/rampa-a-color-toolkit-for-ai-agents-and-humans.txt", "jsonld": "https://wpnews.pro/news/rampa-a-color-toolkit-for-ai-agents-and-humans.jsonld"}}