Rampa – A color toolkit for AI agents and humans

Rampa — A color toolkit for AI agents and humans

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

CLI + SDK Explore and integrate

OKLCH/LAB Perceptually uniform

APCA/WCAG Built-in contrast analysis

Ramps HSL start:end values

Color Spaces Define color edges

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 "" -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 "" -L 98:5 -S 3:8 --tint-color="" --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 "" -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

1. Fixed saturation — consistent vibrancy

1. Maximum hue spacing — use harmonies

1. Single shade per color — distinct hues, not ramps

3 Colors (Triadic)

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

4 Colors (Square)

rampa -C "" --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 "" --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 "" -L 95:10 --size=10 -O css --name=accent

2. Secondary Accent (Complementary)

rampa -C "" --add=complementary -L 95:10 --size=10 -O css

3. Neutral Ramp

rampa -C "" -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

npm / bun npm install @basiclines/rampa-sdk

Docs SDK reference →

Contribute github.com/basiclines/rampa-studio

Neutral

Foreground

Background

Hues

Red

Green

Blue

Cyan

Magenta

Yellow

Rampa

A color toolkit for AI agents and humans

Feedback & Testing

Ramsés Cabello

Carlos Tallón

Adrián Mato

Libraries & Tools

Web Editor

React · React Three Fiber · Three.js · Zustand · chroma-js

Radix UI · shadcn/ui · Tailwind CSS · Vite

SDK

chroma-js · TypeScript · Bun

CLI

chroma-js · citty · TypeScript · Bun

Landing Page

WebGL · Rampa SDK · TypeType

Inspiration

ColorColor

Perceptually uniform palette generator

Primer Prism

GitHub's color scale tool

ColorSpace

Advanced color manipulation

Special Thanks

Björn Ottosson

OKLCH color space research

The open-source community

For making tools like these possible

Made with care · MIT License · 2024–2026

Created & Designed by

Ismael Canal

@basiclines

AI Pair Programming

GitHub Copilot CLI

Claude Opus 4.6 Code generation & review