Palette Generator

Create harmonies on the wheel, fine-tune in OKHSL, extract colors from photos, preview accessibility, and export to CSS, Tailwind, ASE, Figma, and more — free, no account.

#18181B
#52525B
#3B82F6
#22C55E
#F4F4F5
#71717A

OKLCH-native harmonies

Harmonies are computed in perceptual OKLCH space so steps in lightness and chroma stay even across hues — critical for UI systems and brand palettes that must not collapse when you move from blue to yellow.

Choose complementary, analogous, triadic, split-complementary, tetradic, or square schemes. Lock individual swatches, shuffle unlocked partners, and fine-tune in the Adjust tab without breaking the harmony geometry.

Image extraction and cinema roles

Upload a reference still or mood board to extract dominant colors. Drag sample points on the image to rebalance the palette before export.

For filmmakers, the generator assigns cinema roles — shadows, midtones, highlights, skin, and accent — with skin-tone guidance on the vectorscope line. Export Resolve CSV, on-set HTML reference cards, and NLE marker lists alongside CSS and Tailwind.

Accessibility and preview

Run a full-palette WCAG 2.2 matrix and color-vision simulation without leaving the generator. The accessibility panel flags failing pairs and suggests fixes before you ship tokens to engineering.

Open the palette visualizer to preview roles on web dashboards, mobile UI, brand heroes, cinema grades, and print layouts — then share a URL that encodes only the color values, never your private images.

Export and handoff

Export CSS custom properties, SCSS, Tailwind config, W3C design tokens, Tokens Studio JSON, Adobe ASE, Figma plugin links, SVG swatches, GIMP palettes, and clipboard-friendly hex lists.

Film workflows link directly to Coloristic Darkroom: open a cinema look on a still, download a .cube LUT, or copy a shareable grade URL. Start from the Color Script Builder when you need act-by-act documentation for crew.