How does image extraction work?

The image is downscaled in the browser, its pixels converted to OKLab, clustered with k-means++ and snapped to real pixel colours, sorted by how much of the image they cover. Nothing is uploaded.

What do the W and B badges mean?

The WCAG 2.1 level of that swatch as text on white and on black: AAA (≥ 7:1), AA (≥ 4.5:1), AA+ for large text only (≥ 3:1) or ✕ for a fail.

Can I export as Tailwind or CSS variables?

Yes — paste-ready tailwind.config.js (module.exports) or tailwind.config.ts (export default), a Tailwind v4 @theme block with oklch() values, CSS custom properties, SCSS variables and W3C-style design-token JSON.

Color Palette Generator

Enter any CSS colour and generate complementary, split, analogous, triadic, tetradic, monochromatic, shade and tint palettes or a full Tailwind 50→950 scale, or extract the dominant colours from an uploaded image. Every swatch shows WCAG badges against white and black, an accessible-pairs matrix rates every combination, and a colour-blindness preview simulates protanopia, deuteranopia, tritanopia and achromatopsia. Lock swatches, nudge hue, saturation and lightness, save named palettes, share a link, and export as a HEX list, CSS variables, SCSS, Tailwind config (module.exports or export default), Tailwind v4 oklch() theme, design-token JSON, SVG or PNG.

Runs locally in your browser

Seed color

Size

hsl

Accessible pairs (WCAG ratio, text on background)

text ↓ / bg →						white	black
#63adf1	—	1.4	1.9	1.7	1.5	2.4	8.8
#6389f1	1.4	—	1.4	1.3	1.1	3.3	6.4
#6366f1	1.9	1.4	—	1.1	1.2	4.5	4.7
#8463f1	1.7	1.3	1.1	—	1.1	4.2	5.0
#a763f1	1.5	1.1	1.2	1.1	—	3.7	5.7

Swatches

Scheme

Analogous

Locked

AA on white

0/5

AA on black

5/5

#63adf1
#6389f1
#6366f1
#8463f1
#a763f1

Color Converter

Convert any CSS colour between HEX, RGB, HSL, HWB, LAB, LCH, OKLCH and P3, with contrast checks and ramps.

HEX to RGB

Convert HEX colour codes to RGB and back with sliders, a picker and Tailwind snippets.

CSS Gradient Generator

Design linear, radial and conic gradients with draggable stops, layers and Tailwind, CSS or SVG output.

Box Shadow Generator

Design box-shadow, text-shadow and drop-shadow() with layers, presets and a light/dark preview.

How to use Color Palette Generator

1Pick a seed colour (any CSS syntax) or upload an image to extract its colours.
2Choose a scheme and palette size; lock or nudge individual swatches.
3Check the contrast badges and the accessible-pairs matrix.
4Export as Tailwind, CSS, SCSS, tokens JSON, SVG or PNG, or save the palette.

About Color Palette Generator

Color Palette Generator is part of FizzKit — a collection of focused developer and ad-tech tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.

Frequently asked questions

Two colours opposite each other on the colour wheel (180° apart). Maximum contrast; often used for calls-to-action. Split-complementary uses the two colours either side of the complement for a softer version.

Related tools