From one color drop to aproduction-ready token system.

ColoRamp is the go to platform for design token management. Explore new themes or brand identities and create Figma variables with one click. Define code syntax your developers understand and export Figma design tokens to any platform or framework - frontend dev's will love you :)

Get the plugin Start free

Color Palettes

Create palettes based on color harmonies in an intuitive workflow. Add matching intent colors to your palette and fine-tune the vibe with color controls.

Ramps

Generate from your palette colors or add custom ramps. Change steps, hue shift, modes and more.

Roles

Give your colors meaning by assigning predefined roles.

Figma Variables

Define how group names and references link to your Figma collections. Add group or token prefixes to keep things organized.

Size Variables

Add 4px grid numeric tokens to your collections.

Syntax Presets

Set code syntax for your variables. Select from presets for CSS, Tailwind, Swift and more.

If the presets are not enough, you can go further.
With custom syntax you can create any formatting you need to match your syntax with your codebase.

preview.tsx

fancy-green-500

fancy-yellow-500

fancy-orange-500

preview.css

var(--fancy-green-500)

var(--fancy-yellow-500)

var(--fancy-orange-500)

Token Export

Export your collections and styles as JSON for the handover. Your favorite dev can transform them into usable design tokens for the platform of your choice. Yay! Scripting is fun!

Transform output

Control how your tokens are exported: dimensions as px or rem, font weights as keywords like regular or numbers like 400.

Export for Web

Deliver OKLCH for web development.

{
  "dodgerBlue": {
    "50": {
      "value": "oklch(98.0% 0.023 253.0)",
      "type": "color"
    },
    "75": {
      "value": "oklch(93.0% 0.043 253.0)",
      "type": "color"
    },
    "100": {
      "value": "oklch(87.9% 0.062 253.0)",
      "type": "color"
    },
    "150": {
      "value": "oklch(82.9% 0.081 253.0)",
      "type": "color"
    }

Stop wasting time setting up variables for your design projects. Create color systems in minutes.

Ready to build your color system?

Start for free and see how fast you can go from a single color to a production-ready token system. Join designers around the globe building cleaner palettes, smarter variables, and handoffs that don't require a 47-message Slack thread.

Start free Get the plugin