A color toolkit for AI agents and humans

Generate perceptually uniform and precise color ramps straight from your terminal. CLI, SDK and web editor available.

Web editor

rampa

Features

Everything you need for
production color systems

One tool generates palettes, analyzes contrast, mixes colors, and exports to any format. No plugins, no dependencies.

Color Ramps

Configure lightness, saturation, and hue shift as start:end ranges.

Harmonies

Generate complementary, triadic and more hue shift variations.

Blending modes

Get perfect brand-tinted neutrals as an overlay with adjustable opacity.

Color Spaces

Powerful theming options to derive full color palettes from a few sample colors.

Color conversion

Convert to hex, rgb, hsl, or oklch. Returns Text/JSON/CSS with structured values.

APCA/WCAG ready

Check contrast in any color pair with w3c specs.

Examples

See it in action

Explore colors from the terminal or build robust color systems with the SDK. Every CLI flag maps to a chainable SDK method.

Ramps

AI Skills

Teach your AI agent
color theory

7 installable skills for Copilot, Claude Code, Codex, Cursor, and any agent that supports skills. Theme creation, status colors, data viz palettes, accessible contrast.

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

Start building color systems

Try the CLI for quick exploration or install the SDK to build robust color systems.

npm / bun global

npm install -g @basiclines/rampa

Docs CLI reference →

Contribute github.com/basiclines/rampa-studio