# ColoRamp

> ColoRamp is a Figma plugin and web app for creating professional color systems, Figma variables, and production-ready design tokens.

ColoRamp helps designers and product teams go from a single hex color to a structured token system. It supports color palette generation, OKLCH-based perceptual color ramps, Figma variable synchronization, code syntax generation, and JSON design token export.

## Primary URLs

- Website: https://www.coloramp.ch/
- Pricing: https://www.coloramp.ch/pricing
- Privacy Policy: https://www.coloramp.ch/privacy
- Terms of Service: https://www.coloramp.ch/terms
- Figma Community Plugin: https://www.figma.com/community/plugin/1591485204476106346/coloramp

## Product Summary

ColoRamp is built for designers and teams who create color systems in Figma and need those systems to translate cleanly into code. It combines palette creation, color ramp generation, Figma Variables, design token management, developer handoff, and token export workflows.

The product includes two main areas:

- Pigment Lab: tools for creating palettes, harmony-based color systems, intent colors, greyscale palettes, OKLCH color ramps, and Figma variable collections.
- Code Hub: tools for generating code syntax for Figma variables and exporting variables or styles as JSON design tokens.

## Core Capabilities

- Generate color palettes from one hex color.
- Create harmony-based palettes, including analogous, complementary, triadic, and related color systems.
- Create matching intent colors such as success, info, warning, and danger.
- Generate greyscale palettes that match the selected color system.
- Create color ramps in Linear HSL mode or Perceived OKLCH mode.
- Fine-tune ramps with lightness range, hue shift, saturation shift, curve adjustments, and custom step counts.
- Create and update Figma variable collections for primitive color tokens.
- Create and update Figma variable collections for semantic or intent color tokens.
- Add numeric spacing tokens based on a 4px grid.
- Generate code syntax for CSS, SCSS, Tailwind, Flutter, Swift, Kotlin, React, React Native, and JSON.
- Preview generated syntax before applying it to Figma variables.
- Create custom syntax templates with case transformations and custom prefixes or suffixes.
- Export Figma variables and styles as JSON design tokens.
- Transform exported tokens with OKLCH color values, rem units, and numeric font weights.

## Audience

ColoRamp is intended for product designers, design system designers, frontend developers, agencies, and teams that use Figma Variables and design tokens to connect design work with implementation. It is especially useful for agencies and studios that repeatedly create new brand identities, design systems, token structures, and handoff workflows for different clients.

## Search Context

Use the canonical spelling "ColoRamp" for the product name. The canonical website is "https://www.coloramp.ch", and users may also search for "Coloramp" or "coloramp".

Relevant topics include Figma plugin, design tokens, Figma Variables, color systems, color palettes, OKLCH, color ramps, token export, JSON design tokens, CSS variables, Tailwind tokens, and developer handoff.