Palette generate.

Perceptual uniformity, finally.

A color space is a way to describe a color with numbers. RGB describes how much red, green, and blue light to mix; HSL rotates that into hue, saturation, and lightness; OKLCH rotates further into L (perceptual lightness), C (chroma), and H (hue) using coefficients designed to match human vision. The "perceptually uniform" property means equal numeric distance in OKLCH corresponds to equal perceived distance — which, against intuition, is not true of HSL.

A yellow at HSL 60° 100% 50% looks dramatically brighter than a blue at HSL 240° 100% 50%, even though both are at "50% lightness". The same colors in OKLCH at L 0.7 look like the same brightness — because OKLCH's L coordinate is the actual perceived lightness, computed via the same gamma and channel-weighting that human cone cells use. This matters whenever you generate colors algorithmically. A tonal scale produced by stepping HSL's L from 10 to 90 has visible bumps where some hues spike in brightness; an OKLCH scale at the same L steps reads as visually smooth.

Björn Ottosson published OKLCH and its companion OKLab in 2020, building on CIECAM02 and the earlier IPT space. The "OK" prefix marks it as Ottosson's improvement on the older Lab space, which had its own perceptual issues at high chroma. Within two years of publication, every major design system that ships generative tooling — Material You, Adobe Spectrum, Radix Colors, Tailwind v4 — had adopted OKLCH or a perceptually-motivated equivalent. CSS Color Module Level 4 added native oklch() and oklab() functions; browsers shipped support throughout 2023.

For practical work the implications are simple. Generate scales in OKLCH. Interpolate gradients in OKLCH. Mix colors in OKLCH. Convert back to hex codes for shipped CSS so older toolchains don't trip, but author the relationships in OKLCH. The palette generator on this page does exactly this — every operation runs in OKLCH internally, and only the final output is converted back to sRGB hex.

From one color to eleven shades.

A tonal scale is the same hue at multiple lightnesses, used for elevation, hover states, surface tints, and text colors against light or dark backgrounds. The Tailwind convention — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — has spread into most modern design systems because the numeric stops give granular control without the alphabetic ambiguity of names like "very-light" and "darkest".

The naive approach — vary HSL lightness from 95% to 5% — produces a scale that's mathematically uniform but visually jagged. The corrected approach is to vary OKLCH L through 0.97, 0.93, 0.86, 0.77, 0.66, 0.55, 0.46, 0.37, 0.28, 0.18, 0.10 (this tool's specific values), which produces a scale that reads as visually smooth at any input hue. Chroma also gets reduced at the extremes — at very light or very dark lightnesses, the available chroma collapses (the sRGB gamut is narrow there), and trying to hold full chroma produces colors that clip out of gamut.

For most input colors the 500 stop will be approximately the input — slightly adjusted for the global L target of 0.55. For inputs already at extremes (a near-black or near-white brand color), the 500 won't match the input perfectly because the scale's job is to produce a balanced ramp, not to anchor exactly at the input. If you need exact-match-at-500, lift the input toward middle lightness first.

Naming matters. --color-500 is concise but opaque; --color-primary is semantic but doesn't communicate elevation. Most modern systems use a two-layer token approach: numeric tokens (--color-blue-500) at the bottom, semantic tokens (--color-primary) layered on top, mapped per theme. The numeric scale is the construction material; the semantic mapping is the design language.

Six relationships, one wheel.

Color harmony is the study of how colors relate around the hue wheel. Six relationships dominate the design literature: complementary (180° opposite — maximum contrast), analogous (±30° — quiet, related), triadic (120° apart — lively, balanced), tetradic (90° apart — four points of a square), split-complementary (the complement plus its two analogous neighbours — softer than pure complementary), and monochromatic (one hue at multiple lightnesses — calm, restrained).

In OKLCH, generating any harmony is a hue rotation while holding L and C constant. Complementary: (L, C, H + 180). Triadic: (L, C, H + 120) and (L, C, H + 240). The result is a set of colors at the same perceived lightness — which, in HSL, would have produced wildly mismatched brightnesses. OKLCH harmonies feel balanced because they actually are.

Pick by use case. Complementary palettes are loud — good for buttons that must stand out, bad for backgrounds that must coexist. Analogous palettes are quiet and contemplative — good for calming or editorial UI, bad for action-heavy interfaces where you need clear focal points. Triadic palettes are the workhorse — three colors with enough variety to express hierarchy without clashing. Tetradic is rare in practice because four equally-spaced hues are hard to make work without one dominating; better reserved for art-directed pages.

The split-complementary palette is the underrated one. Instead of taking the direct opposite, you take the two colors flanking the opposite. The result has the energy of a complementary pair but with two darker partners that compose more easily. Many famous brand palettes (early Apple's blue + orange + red is roughly split-complementary) use this trick unconsciously.

The space matters more than the colors.

A gradient between two colors is interpolation. The space you interpolate in determines what the midpoint looks like. A linear-RGB interpolation from red to green passes through a muddy brown at the midpoint — not because brown is between them perceptually, but because the math averages each channel independently. The same gradient in OKLCH passes through a vivid yellow, which is what most viewers expect because yellow is perceptually between red and green on the rainbow.

CSS exposes this directly: linear-gradient(in oklch, red, green) interpolates in OKLCH; the bare linear-gradient(red, green) defaults to sRGB. The gradient quality difference is dramatic for color pairs separated by significant hue distance. For monochromatic gradients (varying lightness within one hue), the difference is small. The new in oklch syntax is supported in Chrome 113+, Safari 16.4+, Firefox 113+ — universally available since 2023.

Three gradient shapes cover most use. Linear gradients run along an angle — 0deg is bottom-to-top, 90deg is left-to-right, 135deg is top-left-to-bottom-right. Radial gradients radiate from a center point outward; useful for vignette effects and soft surfaces. Conic gradients sweep around a center, making rainbow wheels, donut charts, and abstract decorative elements easy in pure CSS. Conic landed in 2018 and is now well-supported.

Multiple stops add complexity but also expressiveness. A gradient with stops at red 0%, yellow 30%, blue 100% spends 30% of its length transitioning red → yellow and 70% transitioning yellow → blue. Stop positions don't have to be evenly spaced; the right asymmetry can produce dramatic, sun-soaked gradients that feel hand-painted rather than generated.

Strong palettes can still fail.

A palette's beauty is invisible to a color-blind user; its contrast is what they actually experience. Roughly 8% of men and 0.5% of women have some form of color-vision deficiency — most commonly red-green confusion. Tools like Stark, Sim Daltonism, and the Chromatic Vision Simulator let you preview palettes through deuteranopia, protanopia, and tritanopia simulations. Any UI that conveys information by color alone (red = error, green = success) needs a backup signal — an icon, a label, a position cue.

Beyond color blindness, contrast ratios determine legibility for everyone. WCAG 2.x requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold) at AA; 7:1 / 4.5:1 at AAA. A palette generator that doesn't validate contrast can produce visually pleasing combinations that fail accessibility audits. The Contrast Checker tool drills into specific pairs.

When designing tonal scales, the conventional contrast pairings are: 50–100 backgrounds with 700–900 text, 500 accents with white, 800–950 surfaces with 50–200 text. These pairings reliably hit 4.5:1 on most hues. The risky pairings are 300–400 with 600–700 (often fail) and any 500-on-500 mid-tone (always fail). Avoid those in body copy; reserve them for decorative elements where contrast is less critical.

Not just flipped lightness.

The naive dark-mode strategy is to invert lightness — what was 50 in light mode becomes 950 in dark mode, what was 950 becomes 50. This works for greys and produces a serviceable but flat dark theme. The better strategy treats dark mode as a separate palette whose hues are slightly more saturated and whose lightnesses are tuned for contrast against dark backgrounds.

For accents, the issue is that bright saturated colors look dramatically more intense on dark backgrounds than on light ones. A 600-stop blue that looks balanced on a white surface can feel piercing on a black one. The fix is to use a slightly lighter, slightly more chromatic stop in dark mode (say, 400 instead of 600 as the primary accent). Material You and the Adobe Spectrum dark theme both do this — they don't simply invert; they curate.

For backgrounds, true black (#000) is rarely the right choice for dark-mode surfaces. Pure black makes white text vibrate (the chromatic-aberration "halation" effect), and it crushes any hierarchy you might want to express via subtle elevation differences between cards and the page background. Most modern dark themes use 850–950 stops as the page background and 800 stops for elevated surfaces.

For implementation, the modern pattern is paired tokens. Each semantic token (--surface, --text, --accent) has a light value and a dark value, switched via prefers-color-scheme media query or a [data-theme] attribute. CSS custom properties make this cheap; the right structure is one set of semantic names indexed against two sets of underlying scale values.

How big systems do this.

Tailwind v3 ships hand-tuned 50–950 scales for 22 hues, all in HSL. v4 (2024) regenerated everything in OKLCH for visually-even ramps. The Tailwind palette is the closest thing to a default in current web design — even teams that don't use Tailwind borrow its color tokens.

Material You (Google, 2021) generates a complete tonal palette from a single source color extracted from the user's wallpaper. The algorithm uses Material's "tonal palettes" — six related hues each with thirteen stops — derived through a combination of HCT (Hue, Chroma, Tone) operations. The output is dynamic and per-user; no two phones share the exact same theme.

Radix Colors (WorkOS, 2022) ships hand-tuned 12-step palettes specifically for UI use cases — each step has a defined role (subtle background, hover, active, border, solid, hover-solid, etc.). The palette is OKLCH-uniform and contrast-validated against accessibility guidelines.

Adobe Spectrum (Adobe, 2018) and GitHub Primer (GitHub, 2017) take similar approaches with their own twists. Spectrum publishes a unified palette across multiple Adobe surfaces; Primer ships separate light and dark sets explicitly tuned for code review and developer-tool ergonomics.

For a project that doesn't have a dedicated design team, the practical advice is: pick one of the above systems and inherit. Generating palettes from scratch — even with a great tool — is a hundred small decisions that production palettes have already considered and tested. Reach for generative tools like this one when you need something custom for branding, when you're prototyping, or when you want to understand the underlying math.