Color Palette Generator

About the Color Palette Generator

This color palette generator builds harmonious color schemes from a single base color using the OKLCH color space — a perceptually uniform model where equal numeric steps produce equal visual differences. Pick a hue and chroma on the interactive color wheel, choose a harmony rule, and the tool generates a complete palette with every color in five formats: OKLCH, HSL, RGB, HEX, and Display P3.

All processing runs in your browser. No color data leaves your device, and the WebGL-powered wheel renders at 60 fps on your GPU.

What is Color Theory?

The OKLCH Color Space

OKLCH stands for OK Lightness, Chroma, Hue. Unlike HSL, equal numeric steps in OKLCH produce equal perceived color differences. A 30-degree hue shift near yellow looks the same as one near blue. This perceptual uniformity makes OKLCH ideal for generating palettes, because harmony rules based on fixed angle offsets produce visually balanced results.

• Lightness (L): Perceived brightness, from 0 (black) to 100 (white).
• Chroma (C): Color intensity, from 0 (gray) to approximately 0.4 (maximum saturation).
• Hue (H): The color angle on the wheel, from 0 to 360 degrees.

Color Harmony Rules

Each harmony rule defines a geometric pattern on the color wheel. The generator places your base color at one point and calculates companion colors at specific angular offsets. These relationships produce palettes that naturally look good together.

Color Output Formats

One OKLCH source color converts to five output formats for maximum compatibility. Click the info button on any palette swatch to view all formats at once.

WCAG Contrast Accessibility

When building a color palette, contrast accessibility is essential. WCAG 2.1 defines minimum contrast ratios between foreground and background colors to ensure readability for all users. Use the HEX values from the color info dialog with a dedicated contrast checker to verify your palette meets the following thresholds:

How Does the WebGL Color Wheel Work?

The color wheel uses a GPU fragment shader to render over 400,000 OKLCH-to-RGB conversions per frame. Each pixel maps its polar position to an OKLCH value, converts through OKLab to linear RGB, applies gamut mapping, and encodes with the sRGB gamma transfer function. On displays that support Display P3, the shader maps to the wider gamut instead.

attribute vec4 aVertexPosition;
varying highp vec2 vTextureCoord;
void main() {
  gl_Position = aVertexPosition;
  vTextureCoord = (aVertexPosition.xy + 1.0) / 2.0;
}

// Per-pixel: position → OKLCH → display color
float hue = degrees(atan(coord.y, coord.x));
float chroma = (dist / 0.5) * uMaxChroma;
vec3 linearRgb = oklabToLinearSrgb(vec3(L, a, b));

if (uIsP3 == 1)
  outputLinear = linearSrgbToLinearP3(linearRgb);

gl_FragColor = vec4(srgbGamma(out.rgb), 1.0);

How to Use the Color Palette Generator

1. Click or drag on the color wheel to set your base hue and chroma. The angle determines the hue; the distance from center determines color intensity.
2. Adjust the lightness slider to control how bright or dark the palette appears.
3. Select a harmony rule from the dropdown (e.g., analogous, triadic, or complementary).
4. View the generated palette below the wheel. Each swatch shows its OKLCH value.
5. Hover over a swatch and click the copy button to copy the color value, or click the info button to view the color in all five formats.

Best Practices for Building Color Palettes

• Start with purpose: Choose your base color based on the emotion or brand identity you want to convey, then let the harmony rule do the heavy lifting.
• Control lightness first: The lightness slider has the strongest visual impact. Set it before fine-tuning hue and chroma.
• Test contrast: Use the color info dialog to check HEX values, then verify contrast ratios against WCAG standards. A minimum 4.5:1 ratio is required for normal body text.
• Limit your palette: Most designs work best with 3 to 5 colors. Use monochromatic or shades variants as neutral extensions.
• Use Display P3 for digital screens: If your audience uses modern Apple or wide-gamut displays, the P3 output delivers colors that sRGB cannot reproduce.

Common Use Cases

• Web and UI design: Generate a consistent color system for buttons, backgrounds, and text that meets accessibility standards.
• Brand identity: Explore complementary or triadic harmonies to find color pairings that reinforce a brand’s visual language.
• Data visualization: Tetradic and heptadic rules produce enough distinct hues to differentiate chart series without clashing.
• Illustration and art: Analogous palettes create mood and atmosphere; complementary palettes add focal contrast.
• CSS development: Copy OKLCH values directly into modern CSS. The format is supported in all major browsers.

Key Takeaways

Frequently Asked Questions

Is my color data safe when using this tool?

All color calculations happen in your browser using WebGL and JavaScript. No data is sent to any server. You can use this tool offline after the page loads.

What is the difference between OKLCH and HSL?

OKLCH is perceptually uniform: a 10-unit change in any axis looks the same regardless of the starting color. HSL is not — a 30-degree hue shift near yellow looks very different from one near blue. OKLCH produces more predictable and visually balanced palettes.

How do I check if my palette meets WCAG contrast requirements?

Click the info button on any swatch to view its HEX value, then use a contrast checker to compare foreground and background colors. WCAG 2.1 requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components.

What is Display P3 and do I need it?

Display P3 is a wide color gamut that covers about 25% more colors than sRGB. Modern Apple devices and many newer monitors support it. If your audience uses these screens, P3 colors appear more vivid. The tool detects P3 support automatically.

Which harmony rule should I start with?

Analogous is the safest starting point — it produces naturally cohesive palettes. Complementary works well for designs that need strong contrast. Triadic suits bold, vibrant projects. Experiment with all eight rules to find the best fit for your design.

Related Tools

Use the Color Picker to extract colors from uploaded images, then refine them here as a base color. For photo editing, the Filters for Photos tool applies color adjustments directly to images. You can also convert images between formats or compress them for web use.