Color Palette Generator

Q: What is OKLCH and why is it better for palette generation?

OKLCH is a perceptually uniform color space where equal numerical changes in lightness, chroma, or hue produce equal perceived visual changes. Traditional color spaces like HSL distort perceived brightness across hues, making yellow appear brighter than blue at the same lightness value. OKLCH eliminates this distortion, so palettes generated in OKLCH look naturally balanced without manual adjustment.

Q: What are the different color harmony modes?

This tool offers six harmony modes based on color wheel relationships. Complementary uses two colors 180 degrees apart for maximum contrast. Analogous uses five colors within 30 degrees for cohesive warmth. Triadic uses three colors 120 degrees apart for vibrant balance. Split-Complementary uses three colors for contrast with less tension. Tetradic uses four colors 90 degrees apart for rich variety. Monochromatic varies lightness and chroma within a single hue.

Q: How is the WCAG contrast ratio calculated?

The contrast matrix uses the WCAG 2.1 relative luminance formula. Each color is converted from sRGB to linear RGB, then weighted as 0.2126R + 0.7152G + 0.0722B to compute relative luminance. The ratio between any two colors is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. A ratio of 4.5:1 or higher passes AA for normal text.

Q: Can I export the palette for use in CSS or Tailwind?

Yes. The export section offers three formats. CSS Custom Properties generates a :root block with named variables. Tailwind Config generates a colors object ready to paste into tailwind.config.js. JSON exports a structured array with HEX, RGB, HSL, and OKLCH values for each color in the palette.

Q: Is my data sent to a server?

No. All color math, palette generation, and contrast calculations run entirely in your browser using JavaScript. No network requests are made and no data leaves your device. The OKLCH conversion pipeline is implemented from first principles without external libraries.

Generate harmonious color palettes using OKLCH color theory. Six harmony modes with contrast matrix, CSS/Tailwind/JSON export, and perceptually uniform controls.

Base Color

Lightness50%

Chroma237

Hue302°

Harmony Mode

Base Color Preview

Generated Palette (5 colors)

Contrast Matrix (WCAG 2.1)

	1	2	3	4	5	W	B
#0063DA	—	1.21	1.26	1.22	1.13	5.53	3.8
#3C44E5	1.21	—	1.05	1.02	1.07	6.67	3.15
#7E22CE	1.26	1.05	—	1.03	1.12	6.98	3.01
#A6009C	1.22	1.02	1.03	—	1.08	6.77	3.1
#BF0058	1.13	1.07	1.12	1.08	—	6.26	3.36

AAA (7+)AA (4.5+)AA Large (3+)Fail (<3)

Export

:root {
  --palette-1: #0063DA;
  --palette-2: #3C44E5;
  --palette-3: #7E22CE;
  --palette-4: #A6009C;
  --palette-5: #BF0058;
}

Was this tool helpful?

How to Use

Create harmonious, accessible color palettes in seconds using the perceptually uniform OKLCH color space. Every palette is generated client-side with pure math — no server processing, no external dependencies.

Step-by-Step Guide

Set a base color: Enter a HEX value in the text input, use the native color picker, or click Randomize to generate a cryptographically random starting point.
Choose a harmony mode: Select from six color wheel relationships — Complementary, Analogous, Triadic, Split-Complementary, Tetradic, or Monochromatic. Each mode generates a different number of palette colors based on geometric hue relationships.
Fine-tune with OKLCH sliders: Adjust Lightness (perceived brightness), Chroma (color intensity), and Hue (color angle) using the perceptually uniform sliders. Changes are reflected instantly in the palette.
Check the contrast matrix: The table shows WCAG 2.1 contrast ratios between every pair of palette colors, plus white and black backgrounds. Green badges indicate AA/AAA compliance; red indicates insufficient contrast for text use.
Copy individual colors: Click any swatch to copy its HEX value to your clipboard. The clipboard icon morphs to a checkmark to confirm the copy.
Export the palette: Switch between CSS Custom Properties, Tailwind Config, or JSON formats. Click the copy button to grab the complete code block.

Harmony Mode Descriptions

Complementary (2 colors): Colors opposite on the wheel (180° apart). Maximum visual contrast, ideal for call-to-action buttons against backgrounds.
Analogous (5 colors): Neighboring colors within a 120° arc (30° spacing). Creates a cohesive, low-contrast palette found in nature.
Triadic (3 colors): Three colors evenly spaced at 120° intervals. Balanced vibrancy without the tension of complementary pairs.
Split-Complementary (3 colors): Base color plus two colors adjacent to its complement (150° and 210°). Contrast with reduced visual tension.
Tetradic (4 colors): Four colors at 90° intervals forming a square on the wheel. Rich variety for complex interfaces.
Monochromatic (5 colors): Same hue with varied lightness and chroma. Elegant, guaranteed-harmonious, ideal for UI component states.

About This Tool

OKLCH: The Perceptually Uniform Color Space

Traditional color models like HSL and HSV have a fundamental flaw: their lightness axis does not correspond to human perception. In HSL, a yellow at 50% lightness appears dramatically brighter than a blue at the same 50% lightness, because HSL treats all hues as having equal luminance. This makes palette generation unreliable — colors that should feel balanced look uneven.

OKLCH (Oklab Lightness, Chroma, Hue) solves this by using a perceptually uniform model published by Bjorn Ottosson in 2020. The "OK" prefix stands for "improved" over previous attempts like CIELAB. In OKLCH, equal numerical changes in lightness produce equal perceived changes in brightness, regardless of hue. A yellow and a blue at the same L value genuinely look the same brightness to a human observer. This property, called perceptual uniformity, is what makes OKLCH the ideal space for algorithmic palette generation.

The OKLCH to sRGB Conversion Pipeline

This tool implements the complete OKLCH-to-display conversion pipeline in pure JavaScript with no external libraries. The pipeline has four stages: (1) OKLCH cylindrical coordinates are converted to OKLab Cartesian coordinates using trigonometry — the chroma and hue become the a and b axes via cosine and sine. (2) OKLab values pass through a 3x3 matrix multiplication to reach the LMS cone response space, where values are cubed to reverse the perceptual nonlinearity. (3) A second 3x3 matrix converts LMS to linear sRGB. (4) The sRGB transfer function (gamma encoding) is applied to each channel, and values are clamped to the 0-255 range for display.

The reverse pipeline (HEX to OKLCH) runs these stages in reverse: gamma decoding, linear sRGB to LMS, cube root, LMS to OKLab, then polar conversion to get lightness, chroma, and hue. Both directions use the matrices published by Bjorn Ottosson with full floating-point precision to minimize rounding errors across conversions.

Color Harmony Theory

Color harmony rules originate from Johannes Itten's 1961 color wheel theory and have been refined by designers for decades. The six harmony modes in this tool represent the most widely used geometric relationships on the color wheel. Complementary colors (180° apart) create maximum contrast and visual energy. Analogous colors (within 30°) mimic patterns found in nature — autumn leaves, ocean sunsets — and feel inherently pleasing. Triadic and tetradic arrangements distribute visual weight evenly around the wheel, producing palettes that feel balanced without being monotonous.

What makes these rules work in OKLCH rather than traditional color wheels is perceptual accuracy. On a traditional RYB or HSL wheel, complementary colors can produce wildly different perceived brightness. In OKLCH, harmony relationships are calculated in perceptual space, so the resulting palettes look balanced to the human eye without manual lightness compensation.

WCAG Contrast Ratios

The contrast matrix uses the WCAG 2.1 relative luminance formula (IEC 61966-2-1). Each sRGB color is linearized using the sRGB transfer function, then weighted with the ITU-R BT.709 coefficients (0.2126 red, 0.7152 green, 0.0722 blue) to compute relative luminance. The contrast ratio between two luminance values L1 and L2 is (L1 + 0.05) / (L2 + 0.05), where L1 is always the lighter. A ratio of 4.5:1 or higher passes WCAG AA for normal text (under 18pt). A ratio of 3:1 passes AA for large text (18pt or 14pt bold). A ratio of 7:1 passes the stricter AAA level.

Related Tools

Color Picker — Select precise colors across HEX, RGB, HSL, and OKLCH formats with visual canvas controls.
Contrast Checker — Verify specific foreground/background pairs against WCAG 2.1 and APCA standards.
CSS Gradient Generator — Create linear, radial, and conic gradients using OKLCH interpolation for vibrant transitions.
Favicon Generator — Generate favicon assets using colors from your palette for consistent brand identity.
SVG to CSS Converter — Convert SVG icons to CSS data URIs alongside your palette code.

Why Use This Tool

Perceptually Accurate Results

Most palette generators operate in HSL, which distorts perceived brightness across hues. This tool generates palettes in OKLCH, where lightness values are perceptually calibrated. The result: palettes that look naturally balanced without manual per-color adjustments. A yellow and a blue at the same OKLCH lightness genuinely appear equally bright.

Built-In Accessibility Checking

The contrast matrix instantly shows whether any two colors in your palette meet WCAG 2.1 AA or AAA requirements. This eliminates the need to switch to a separate contrast checker tool. Color-coded badges make it easy to identify which color pairs work for text, which work for large text only, and which should be avoided.

Three Export Formats

Export your palette as CSS Custom Properties for any web project, as a Tailwind CSS colors config for utility-first workflows, or as structured JSON for design tokens and programmatic use. Each format is copy-ready and uses clean naming conventions.

Completely Private

All color math runs entirely in your browser. The OKLCH conversion pipeline, palette generation algorithms, and contrast calculations are implemented as pure JavaScript functions with zero external dependencies. No data is sent to any server, no third-party libraries are loaded, and no network requests are made during operation.

FAQ

What is OKLCH and why is it better for palette generation?

OKLCH is a perceptually uniform color space where equal numerical changes in lightness, chroma, or hue produce equal perceived visual changes. Traditional color spaces like HSL distort perceived brightness across hues, making yellow appear brighter than blue at the same lightness value. OKLCH eliminates this distortion, so palettes generated in OKLCH look naturally balanced without manual adjustment.

What are the different color harmony modes?

This tool offers six harmony modes based on color wheel relationships. Complementary uses two colors 180 degrees apart for maximum contrast. Analogous uses five colors within 30 degrees for cohesive warmth. Triadic uses three colors 120 degrees apart for vibrant balance. Split-Complementary uses three colors for contrast with less tension. Tetradic uses four colors 90 degrees apart for rich variety. Monochromatic varies lightness and chroma within a single hue.

How is the WCAG contrast ratio calculated?

The contrast matrix uses the WCAG 2.1 relative luminance formula. Each color is converted from sRGB to linear RGB, then weighted as 0.2126R + 0.7152G + 0.0722B to compute relative luminance. The ratio between any two colors is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. A ratio of 4.5:1 or higher passes AA for normal text.

Can I export the palette for use in CSS or Tailwind?

Yes. The export section offers three formats. CSS Custom Properties generates a :root block with named variables. Tailwind Config generates a colors object ready to paste into tailwind.config.js. JSON exports a structured array with HEX, RGB, HSL, and OKLCH values for each color in the palette.

Is my data sent to a server?

No. All color math, palette generation, and contrast calculations run entirely in your browser using JavaScript. No network requests are made and no data leaves your device. The OKLCH conversion pipeline is implemented from first principles without external libraries.