RampkitGitHub—
Open-source color system builder

Turn a color into
a usable color system.

Extract colors from a website or start with your own. Build OKLCH palettes, map light and dark tokens, and export them for your app.

Get started View on GitHub

Free to use. Runs locally. Your colors stay yours.

Pick a starting point

Lavender palette generated from #918df6. Your anchor stays unchanged.

MIT licensedNo accountNo databaseNo paid API
WHY RAMPKIT

A palette is only the beginning.

A few good colors still need consistent scales, clear roles, accessible pairings, and usable exports. Rampkit brings those steps into one local workspace.

01 / DISCOVER

Start with colors you already use.

Analyze a website to find useful colors and see where they appear. Or add a HEX, RGB, or OKLCH color yourself. You choose what becomes a palette.

02 / GENERATE

Build a consistent color scale.

Generate 12-stop OKLCH palettes around your original colors. Lock anchors, adjust generation, and keep the exact values you started with.

03 / MAP

Give every color a clear role.

Map background, surface, text, border, action, and status tokens. Edit Light and Dark separately, then try your mappings in component previews.

THE CANVAS

Paint, mix, and
collect new colors.

Some colors are easier to find by making them. Paint on an infinite canvas, blend pigments, and sample the colors or gradients you discover.

Turn a study into palette anchors when you are ready. Save your painting locally and come back to it later.

Pigment mixing is an approximation of paint, not a physical simulation.
Explore first. Build a palette when you are ready.

Check contrast before you ship

Review text and UI contrast ratios against your actual colors. See failures and suggestions without changing your palette automatically.

Export in the format you use

Get CSS variables, JSON, Tailwind CSS v4, or W3C-style tokens. Copy an integration prompt for Codex, Claude Code, or VS Code.

Keep your work on your machine

No account, database, or paid API. Website analysis runs in a local Chromium browser. Manual color work can run offline after installation.

HOW IT WORKS

From a starting color to your app.

Four steps from a starting color to a system you can use. You choose the colors and keep control of every mapping.

  1. 01

    Choose your colors

    Extract from a website, enter a color, or sample your canvas.

  2. 02

    Create your palettes

    Lock your starting colors. Generate and refine the scale.

  3. 03

    Map and check

    Assign light and dark roles. Preview components and check contrast.

  4. 04

    Export and apply

    Copy CSS, download tokens, or hand off to your coding assistant.

INSTALLATION

Run Rampkit on your machine.

Install Node.js and Git first. Download Rampkit once, then start it from its folder. No account or API key is needed.

Terminal — setup
01 — Download and install

Open a terminal in the folder where you want to download Rampkit. Run these lines in order; stop if a command fails.

git clone https://github.com/ragipdiler/rampkit.gitcd rampkitnpm cinpx playwright install chromium
Terminal — rampkit
02 — Start from the rampkit folder

Continue in the same terminal after setup. For later sessions, open a terminal in the downloaded rampkit folder first.

npm run dev
Open the Local URL printed in your terminal. The default is http://127.0.0.1:3000. Keep the terminal running.
Already installed, or having trouble?

Already downloaded?

Do not clone into an existing rampkit folder again. Open that folder in your terminal. Stop the server with Ctrl+C before updating.

git pull --ff-only
npm ci
npx playwright install chromium
npm run dev

Port 3000 is busy?

The terminal may show a different port. Open that exact URL, or choose an unused port explicitly:

npm run dev -- --port 3001

Command not found?

Install Node.js and Git using the links below, then restart your terminal. Check node --version, npm --version and git --version.

npm cannot find package.json?

Your terminal is in the wrong folder. Open it in the downloaded Rampkit repository, where package.json is located, then run the start command.

YOU WILL NEED

Node.js 22.13 or newer
npm (included with Node.js) · Git
macOS, Windows, or Linux

On Linux, use npx playwright install --with-deps chromium if Chromium needs system libraries. Complete this before analyzing websites. Manual color work does not require Chromium.

Read the setup guide
A FEW USEFUL DETAILS

Before you start.

Is there an online version of the studio?+

This website introduces Rampkit. The studio runs locally, including its Chromium-based website analysis. Follow the installation steps above to use the full app.

Does Rampkit save my workspace?+

The color-system workspace stays in memory. Export before reloading or closing the tab. Paintings and color studies have separate save and open controls for local files.

Will the generated colors always meet WCAG?+

No. Rampkit reports contrast ratios and failures for the pairs you check. Review your mappings and application usage; a passing color pair does not establish full application accessibility.

Can I use it in a commercial project?+

Yes. Rampkit is MIT licensed. You can use and modify the source under the license terms. Dependencies and brand assets keep their own licenses, documented in the repository.

What makes OKLCH useful here?+

OKLCH separates perceived lightness, chroma, and hue. That gives Rampkit a consistent way to shape a scale around your anchors, while retaining their normalized values.

OPEN SOURCE. LOCAL FIRST.

Use it. Learn from it. Make it your own.

Built for designers and developers who want more control over their colors.

Install Rampkit