This site works best with JavaScript enabled. Some interactive features may not be available.

🚀 Enterprise platform live — five infrastructure layers, one operating modelLearn more →

Features

Everything you need for production-ready colour

A complete toolkit for colour systems — from palette generation to accessibility checking, with tokens and framework plugins built in.

Palette Generation

🎨

Perceptual Uniformity

Generate colour scales in OKLab/OKLCH that look evenly spaced to the human eye, not just mathematically even.

✨

AI Harmony Suggestions

Get complementary, split-complementary, and analogous palette suggestions powered by colour theory models.

🌈

Wide Gamut Support

Author palettes in P3 and Rec.2020 colour spaces for modern displays, with sRGB fallbacks built in.

Design Tokens

🏷️

Semantic Naming

Define tokens like `color.surface.primary` that map to raw values — swap themes without touching components.

📦

Multi-Format Export

Export to CSS custom properties, Tailwind config, Style Dictionary, JSON, or Swift/Kotlin for native apps.

🔗

Token Inheritance

Create base token sets with brand-specific overrides for white-label and multi-brand products.

Accessibility

👁️

Contrast Checker

Validate WCAG 2.1 AA/AAA and APCA contrast ratios for every colour pair in real time.

🔍

Colour Blindness Simulation

Preview palettes through protanopia, deuteranopia, and tritanopia filters before shipping.

🛠️

Auto-Fix Suggestions

When contrast fails, get the nearest passing colour that preserves your brand identity.

Theming & Integration

🌗

Theme Builder

Generate light, dark, and high-contrast themes from a single seed palette automatically.

💨

Tailwind Plugin

Keep your Tailwind colour config in sync with design tokens — changes propagate on save.

🔄

Figma Sync

Bidirectional sync between your Figma colour styles and ColoursUI tokens.

Interactive Demo

See it in action

Explore how each layer works with real code examples.

palette.ts

// Generate a perceptually uniform palette
const palette = await coloursui.palette.generate({
  seed: "#6366f1",
  steps: 10,
  colorSpace: "oklch",
  harmony: "analogous",
});

// Export to multiple formats
const tokens = palette.export({
  formats: ["css", "tailwind", "figma"],
  naming: "semantic",
});

console.log(tokens.css);

Output

✓ Palette generated (10 steps, OKLCh)
✓ Harmony: analogous (3 hues)
✓ Exported to CSS custom properties
✓ Exported to tailwind.config.ts
✓ Synced to Figma "Brand Colours"
→ All steps pass WCAG AA contrast

Add colour in minutes, not days

A few lines of code is all you need to generate a full palette.

palette.ts

import { ColoursUI } from "@coloursui/sdk";

const client = new ColoursUI({ apiKey: process.env.COLOURS_API_KEY });

// Generate a perceptually uniform palette
const palette = await client.palette.generate({
  seed: "#6366f1",
  steps: 10,
  colorSpace: "oklch",
});

// Check accessibility
const report = await client.contrast.check({
  foreground: palette.shade(900),
  background: palette.shade(50),
  standard: "AA",
});

console.log(report.passes); // true
}

Real results from real teams

Palette Creation

2 hours30 sec

240x faster

Contrast Failures

23%0%

100% passing

Token Formats

1 (manual)6 (auto)

All platforms

Theme Variants

Light only3 modes

Auto-generated

Comparison

See how we compare

Built for colour systems, accessibility, and developer happiness.

Feature	ColoursUI	Competitor A	Competitor B
Perceptual palette generation
OKLCh / OKLab colour spaces
WCAG + APCA contrast checking
Auto-fix failing contrast
Multi-format token export
Tailwind plugin

Deep dives

See how ColoursUI handles the hardest colour problems.

Colour Science

Perceptually uniform interpolation

Gradients and scales are interpolated in OKLab so every step looks equally spaced to the human eye — no muddy midpoints or unexpected hue shifts.

✦

Accessibility

Contrast that passes every audit

Real-time WCAG 2.1 and APCA validation with auto-suggested fixes that stay as close to your brand colours as possible.

✦

Developer Experience

Tokens that stay in sync

Change a colour once and it propagates to CSS, Tailwind, Figma, and native platforms automatically — no manual copy-paste.

✦

See the difference

Drag the slider to compare code complexity before and after ColoursUI.

// 4 lines — ColoursUI handles the rest

import { palette } from '@coloursui/sdk';

const brand = palette('#6366f1')

.steps(10) // 50-950 scale

.contrast('AA') // auto-validates

.darkMode() // generates dark theme

.export('tailwind', 'css', 'figma');

// Perceptual, accessible, synced everywhere

// Manual colour management

const primary = '#6366f1';

const primary50 = '#eef2ff'; // guessed

const primary100 = '#e0e7ff'; // eyeballed

const primary900 = '#312e81'; // close enough?

// Does this pass AA contrast?

// Who knows... check manually

// Dark mode? Copy-paste and tweak...

// Tailwind config? Update by hand...

// Figma? Ask the designer...

Without ColoursUI

With ColoursUI

Ready to get started?

Join thousands of teams shipping better colour systems with ColoursUI.

Get Started Free Read the Docs

Features

Everything you need for production-ready colour

A complete toolkit for colour systems — from palette generation to accessibility checking, with tokens and framework plugins built in.

Palette Generation

🎨

Perceptual Uniformity

Generate colour scales in OKLab/OKLCH that look evenly spaced to the human eye, not just mathematically even.

✨

AI Harmony Suggestions

Get complementary, split-complementary, and analogous palette suggestions powered by colour theory models.

🌈

Wide Gamut Support

Author palettes in P3 and Rec.2020 colour spaces for modern displays, with sRGB fallbacks built in.

Design Tokens

🏷️

Semantic Naming

Define tokens like `color.surface.primary` that map to raw values — swap themes without touching components.

📦

Multi-Format Export

Export to CSS custom properties, Tailwind config, Style Dictionary, JSON, or Swift/Kotlin for native apps.

🔗

Token Inheritance

Create base token sets with brand-specific overrides for white-label and multi-brand products.

Accessibility

👁️

Contrast Checker

Validate WCAG 2.1 AA/AAA and APCA contrast ratios for every colour pair in real time.

🔍

Colour Blindness Simulation

Preview palettes through protanopia, deuteranopia, and tritanopia filters before shipping.

🛠️

Auto-Fix Suggestions

When contrast fails, get the nearest passing colour that preserves your brand identity.

Theming & Integration

🌗

Theme Builder

Generate light, dark, and high-contrast themes from a single seed palette automatically.

💨

Tailwind Plugin

Keep your Tailwind colour config in sync with design tokens — changes propagate on save.

🔄

Figma Sync

Bidirectional sync between your Figma colour styles and ColoursUI tokens.

Interactive Demo

See it in action

Explore how each layer works with real code examples.

palette.ts

// Generate a perceptually uniform palette
const palette = await coloursui.palette.generate({
  seed: "#6366f1",
  steps: 10,
  colorSpace: "oklch",
  harmony: "analogous",
});

// Export to multiple formats
const tokens = palette.export({
  formats: ["css", "tailwind", "figma"],
  naming: "semantic",
});

console.log(tokens.css);

Output

✓ Palette generated (10 steps, OKLCh)
✓ Harmony: analogous (3 hues)
✓ Exported to CSS custom properties
✓ Exported to tailwind.config.ts
✓ Synced to Figma "Brand Colours"
→ All steps pass WCAG AA contrast

Add colour in minutes, not days

A few lines of code is all you need to generate a full palette.

palette.ts

import { ColoursUI } from "@coloursui/sdk";

const client = new ColoursUI({ apiKey: process.env.COLOURS_API_KEY });

// Generate a perceptually uniform palette
const palette = await client.palette.generate({
  seed: "#6366f1",
  steps: 10,
  colorSpace: "oklch",
});

// Check accessibility
const report = await client.contrast.check({
  foreground: palette.shade(900),
  background: palette.shade(50),
  standard: "AA",
});

console.log(report.passes); // true
}

Real results from real teams

Palette Creation

2 hours30 sec

240x faster

Contrast Failures

23%0%

100% passing

Token Formats

1 (manual)6 (auto)

All platforms

Theme Variants

Light only3 modes

Auto-generated

Comparison

See how we compare

Built for colour systems, accessibility, and developer happiness.

Feature	ColoursUI	Competitor A	Competitor B
Perceptual palette generation
OKLCh / OKLab colour spaces
WCAG + APCA contrast checking
Auto-fix failing contrast
Multi-format token export
Tailwind plugin

Deep dives

See how ColoursUI handles the hardest colour problems.

Colour Science

Perceptually uniform interpolation

Gradients and scales are interpolated in OKLab so every step looks equally spaced to the human eye — no muddy midpoints or unexpected hue shifts.

✦

Accessibility

Contrast that passes every audit

Real-time WCAG 2.1 and APCA validation with auto-suggested fixes that stay as close to your brand colours as possible.

✦

Developer Experience

Tokens that stay in sync

Change a colour once and it propagates to CSS, Tailwind, Figma, and native platforms automatically — no manual copy-paste.

✦

See the difference

Drag the slider to compare code complexity before and after ColoursUI.

// 4 lines — ColoursUI handles the rest

import { palette } from '@coloursui/sdk';

const brand = palette('#6366f1')

.steps(10) // 50-950 scale

.contrast('AA') // auto-validates

.darkMode() // generates dark theme

.export('tailwind', 'css', 'figma');

// Perceptual, accessible, synced everywhere

// Manual colour management

const primary = '#6366f1';

const primary50 = '#eef2ff'; // guessed

const primary100 = '#e0e7ff'; // eyeballed

const primary900 = '#312e81'; // close enough?

// Does this pass AA contrast?

// Who knows... check manually

// Dark mode? Copy-paste and tweak...

// Tailwind config? Update by hand...

// Figma? Ask the designer...

Without ColoursUI

With ColoursUI

Ready to get started?

Join thousands of teams shipping better colour systems with ColoursUI.

Get Started Free Read the Docs