Palette Forge: an OKLCH palette generator, gradient builder and WCAG contrast checker
Palette Forge is a free color tool that runs entirely in your browser. Pick a base color and it generates five harmony rules — complementary, analogous, triadic, split-complementary and tetradic — plus an eleven-step shade ramp from 50 to 950 computed in OKLCH, so the lightness gap between neighboring steps stays even instead of collapsing in the midtones the way an HSL ramp does. A gradient builder handles linear, radial and conic gradients with draggable stops and an sRGB/OKLCH interpolation switch that removes the gray dead zone. Every pair of colors in the palette is scored against all four WCAG 2.1 thresholds. Keyboard: press 1, 2 and 3 to switch modes, R for a random base, C to copy the share link. A first load is 118 KB in total (34 KB gzipped), requires no account, and keeps working offline after the first load.
oklch(51.1% 0.253 276.9)
Harmony colors
Lock a swatch with its padlock or the Space key to keep it while you change the base color. Select a swatch to copy its hex value.
Shade ramp 50 → 950, OKLCH
Stops
Drag a handle to move a stop, or focus it and use ← → (Shift for 10%). Select the track to add a stop, Delete to remove one.
How to use Palette Forge
- Set a base color. Use the color picker, type a hex value into the field next to it, or press R for a random base. The OKLCH readout under the field shows the lightness, chroma and hue the rest of the tool is working from.
- Choose a harmony. Complementary, analogous, triadic, split-complementary and tetradic each rotate the base hue around the OKLCH circle. Chroma is re-fitted for every hue, because the sRGB gamut is not a cylinder and the same chroma is not reachable at every angle.
- Lock what you like. Select a swatch's padlock, or focus the swatch and press Space. Locked colors survive a change of base color or harmony, so you can build a palette one decision at a time.
- Read the ramp. The eleven steps from 50 to 950 sit at fixed Oklab lightness values. Your base color keeps its exact value at whichever step it is closest to, and the step is marked so you know where it landed.
- Build a gradient. Switch to mode 2, pick linear, radial or conic, drag the angle dial, then drag stops along the track. Toggle between sRGB and OKLCH interpolation to see the gray dead zone appear and disappear.
- Check the contrast. Mode 3 scores every ordered pair in the palette. Select any cell for the four WCAG verdicts and a live text preview of that foreground on that background.
- Simulate color blindness. The color-vision selector applies a protanopia, deuteranopia or tritanopia transform to everything on screen. Exports keep the original colors.
- Take it with you. Copy the palette as CSS custom properties, a Tailwind config fragment, SCSS variables, JSON or SVG swatches, or copy the share link, which carries the entire palette in the URL hash.
Features
- OKLCH shade ramp, 50 to 950. Eleven steps placed at fixed Oklab lightness, gamut-mapped by reducing chroma rather than clipping RGB channels, so hue does not drift as shades darken.
- Five harmony rules. Complementary, analogous, triadic, split-complementary and tetradic, each computed as a hue rotation at constant lightness.
- Per-swatch locking. Freeze any color and regenerate the rest around it.
- Multi-stop gradient builder. Linear, radial and conic types, an angle dial that is fully keyboard operable, unlimited draggable stops, and an sRGB/OKLCH interpolation switch.
- WCAG 2.1 contrast matrix. Every ordered pair scored against 3:1, 4.5:1 and 7:1 for both normal and large text.
- Color-blindness simulation. Protanopia, deuteranopia and tritanopia, using the Viénot-Brettel-Mollon dichromat projection in LMS space.
- Image to palette. Drop, paste or browse for an image and k-means clustering over a downsampled canvas returns its dominant colors, clustered in Oklab rather than sRGB.
- Five export formats. CSS custom properties, a Tailwind
theme.extendfragment, SCSS variables, JSON, and an SVG swatch sheet, each copyable or downloadable in one action. - Shareable URL. The base color, harmony, locks and full gradient definition are encoded in the location hash, so a link is the whole document.
- Live UI recoloring. The interface itself is repainted by the current palette, with a contrast guard that keeps every piece of interface text at or above 4.5:1.
- Local persistence only. The last twelve palettes are kept in
localStorage; there is no backend, no account and no analytics cookie.
Frequently asked questions
Is Palette Forge free, and do I need an account?
Palette Forge is free and there is no account, no sign-in and no paywall. It is a single static page: once it has loaded, every calculation runs in your browser, so it keeps working with the network switched off. Nothing you do is sent to a server, because there is no application server to send it to.
What makes an OKLCH shade ramp different from an HSL one?
HSL lightness is a channel average, not a perceptual quantity, so an HSL ramp bunches its steps together in the midtones and washes them out at the ends. Palette Forge places each of the eleven steps at a fixed lightness in Oklab, where equal numeric distance is close to equal perceived distance, then reduces chroma until the color fits inside sRGB instead of clipping the channels. The result is a ramp whose neighboring steps stay evenly separated from 50 all the way to 950, and whose hue does not drift as the color darkens.
Why do my gradients turn gray in the middle, and how does the OKLCH switch fix it?
Blending two saturated colors in sRGB moves along a straight line through the RGB cube. If the two colors sit on opposite sides of the cube, that line passes near the achromatic axis, so the middle of the gradient loses saturation and reads as gray or mud. Interpolating in OKLCH instead travels around the hue circle at a controlled chroma, so the midpoint keeps its saturation. Flip the interpolation switch in the gradient builder to see the same two stops rendered both ways.
How does the WCAG contrast matrix decide AA and AAA?
Every cell is the WCAG 2.1 contrast ratio between a foreground and a background color, computed from relative luminance as (lighter + 0.05) divided by (darker + 0.05). A pair passes AA for normal text at 4.5:1, AA for large text at 3:1, AAA for normal text at 7:1 and AAA for large text at 4.5:1. Large text means at least 18.66px bold or 24px regular. Select any cell to see all four verdicts and a live preview of that combination.
Where are my palettes stored, and does anything get uploaded?
The current palette lives in the URL hash, so copying the address bar is enough to share it or bookmark it. Your last twelve palettes are kept in your browser's localStorage under the key pf.recent, and your display preferences under pf.prefs. Images you drop on the extractor are read into a canvas in the page and never leave your device. Palette Forge collects no personal data and uploads no files.
How was this game made?
Palette Forge was generated from a single prompt on Quodara, an AI agent platform that turns a written brief into a deployed web app, and the write-up of that build is published at https://quodara-ai.com/showcase/palette-forge/. The prompt described the three modes, the OKLCH color math, the export formats and the accessibility targets; Quodara wrote the color engine, the interface and the deployment configuration, then shipped it to this address.
About this build
Palette Forge was generated from a single prompt on Quodara on 2026-08-24, with no hand-written starter template and no manual edits afterward. A first load pulls 118 KB uncompressed, or 34 KB over the wire once gzip is applied; 64 KB of that is JavaScript, which compresses to 20 KB. It ships with no framework, no build step and no third-party runtime dependency. The full write-up of how it was specified and built lives at https://quodara-ai.com/showcase/palette-forge/.