Better color ramps, grounded in human perception.

🎨 Color Math

By default, this tool uses OKLCH, a modern percepually uniform color space that fixes hue-shifts found in other models.

You can toggle Use HCL to switch to the standard CIELab (Lch) model if you prefer standard industry perception over the new Oklab standard.

🛠️ How to Use

• Add Color: Click "Add Color" or press Shift+N.
• Edit: Use the color picker to change the base hue. The tool auto-generates a balanced ramp (50-950).
• Related Colors: Use the dropdown in the column header to add complementary or analogous colors.
• Export: Copy the CSS Variables from the bottom panel directly into your project.

🌊 Tailwind CSS v4

This tool is designed for Tailwind. The export format uses native CSS variables.

/* Copy to your CSS */
@theme {
  --color-primary-500: oklch(0.6 0.15 250);
}

Tailwind v4 will automatically pick these up as utility classes like bg-primary-500.