Perceptual Color Engine for Creators

Build better color palettes with OKLCH

Create balanced palettes for pixel art, games and interfaces. Preview every color, inspect perceptual lightness and export a polished palette card.

OKLCH 7-Color Ramp ShowcasesRGB Guarded
SHADOW#1e1b4b
DARK#311b92
BASE#5b21b6
MID#7c3aed
HIGHLIGHT#a855f7
LIGHT#c084fc
ACCENT#f43f5e
Split Complementary Harmony Delta E ≥ 0.025

Features

Everything you need to design perceptually uniform color schemes for digital media.

2–9 color palettes

Generate custom color ramps from 2 to 9 slots with automatic lightness scale balancing.

Perceptual OKLCH controls

Harness uniform lightness perception to create predictable color relationships and smooth ramps.

Pixel art previews

Instantly test color palettes on classic game sprites (potion, gem, shield, hero) and full mosaic grids.

Lightness analysis

Inspect perceptual lightness distribution on an interactive ladder graph sorted from dark to light.

sRGB gamut protection

Guard against out-of-bounds screen colors using automated gamut fitting and Delta E deduplication.

Polished PNG & Artist export

Export crisp PNG palette cards and palette files for GIMP, Krita, Aseprite, JASC, HEX, TXT, and JSON.

How it works

Three simple steps to craft balanced color palettes.

Step 1

Choose a base color

Pick any starting HEX color seed using the visual color picker or manual text input.

Step 2

Select a harmony and size

Choose complementary, split-complementary, or analogous rules with 2 to 9 color slots.

Step 3

Preview, inspect and export

Verify lightness steps on the ladder chart, test pixel art scenes, and download your PNG card.

Why OKLCH?

Perceptually uniform color theory for modern digital design

Perceptual Lightness vs. RGB/HSL

Traditional RGB and HSL color models do not reflect how human eyes perceive brightness. In HSL, yellow and blue at 50% lightness appear completely different in brightness.

When you modify hue in OKLCH, perceived brightness remains predictable. This allows game artists and UI designers to build harmonious color ramps without unintended contrast drops.

Lightness Ladder & Gamut Protection

The Lightness Ladder analyzes palette entries along a single lightness scale from 0 (darkest) to 1 (lightest). It reveals colors that are too close in value before you start drawing.

Because OKLCH can represent colors beyond standard monitor capabilities, our sRGB gamut protection algorithm automatically fits out-of-bounds values into sRGB display limits while preserving pairwise distinction.

Built for creators

Pixel artists

Craft cohesive retro ramps and sprite palettes with uniform lightness steps.

Game developers

Design distinct character, environment, and item color schemes for 2D/3D games.

UI designers

Create accessible interface color systems with calibrated contrast levels.

Frontend developers

Export clear HEX strings and OKLCH color parameters directly to CSS.

Frequently Asked Questions

Learn more about OKLCH color theory and usage.

What is OKLCH?
OKLCH is a perceptually uniform color space designed to align color values with human visual perception. Unlike HSL or RGB, equal changes in lightness values result in equal changes in perceived brightness.
Is the palette generator free?
Yes, the OKLCH Pixel Palette Studio is 100% free to use directly in your browser without registration, subscriptions, or hidden limits.
Can I use the palettes commercially?
Absolutely. All generated color palettes and exported PNG cards can be freely used in personal, open-source, and commercial games, artwork, or web projects.
Why does the tool protect the sRGB gamut?
Monitors display colors within standard sRGB boundaries. Gamut protection automatically clamps out-of-bounds OKLCH values so exported colors match what you see on screen without clipping artifacts.

Ready to craft your pixel palette?

Launch the studio editor to build, test, and export your OKLCH color schemes.