Find the tool for your job

A set of colors that belong together, in the format your project wants.

Spin up harmonious color sets, lock the ones you love, and export them as ready-to-paste code.

1. 1Press space (or Generate) to roll new colors
2. 2Lock the keepers and re-roll the rest
3. 3Export to CSS, Tailwind, SCSS or JSON

A gradient with a clean middle, plus the CSS or an exported image.

Build smooth CSS gradients that blend in OKLCH — from scratch, a URL, or an image's colors. Plain CSS grays out the middle of a two-color blend; blending in OKLCH doesn't.

1. 1Start from Random, a link, or Image
2. 2Tune stops, angle and blend space
3. 3Copy CSS/Tailwind or export PNG/SVG

The colors from a photo you like, as hex codes you can use.

Upload an image and drag sample points to capture exactly the colors you want from it.

1. 1Drop in an image
2. 2Drag the handles onto the colors you want
3. 3Copy the hexes or open in the generator

One color you can use for text or a button without checking it afterwards.

A picker on a perceptually-even plane, with a line drawn around the region that is legible on your background. Everything inside the line passes; everything outside it doesn't.

1. 1Set the background you'll place the color on
2. 2Drag inside the safe zone — the shaded region is the failing half
3. 3Copy the hex, or send it to the generator

A list of real problems in plain words, and a fixed palette that keeps your brand hues.

Paste colors you already have and get the problems back in plain English — text nobody can read, a button that disappears, two colors that are secretly the same. One click repairs all of it without changing your hues.

1. 1Paste a CSS block, brand guide or list of hexes
2. 2Read the findings in plain words, numbers optional
3. 3Fix everything at once, or one finding at a time

A pass/fail answer for one pair, and a fix suggested when it fails.

Check any text-and-background pair against WCAG, and preview it through color-blind vision.

1. 1Enter your text and background colors
2. 2Read the AA / AAA verdict instantly
3. 3Toggle color-blind simulations

Someone else's color and type decisions, written down where you can compare them to yours.

Paste any URL and get its colors, gradients, type scale and downloadable assets — read out of the site's own stylesheets, not guessed from a screenshot.

1. 1Paste the address of a live site
2. 2Read its colors, gradients and real heading sizes
3. 3Download the assets, or send the colors onward

A file-and-line list of colors you can delete, and a number to track over time.

Paste or upload stylesheets and see which colors are the same color in practice — duplicates to merge, near-misses to watch, and a debt ratio for the whole codebase. Nothing leaves your browser.

1. 1Paste or drop in your CSS files
2. 2Read the duplicates and near-duplicates, with line numbers
3. 3Merge them, and re-run it in CI to keep them gone

One color, in every format, with its neighbours a click away.

A reference for individual colors — values, conversions and nearby shades.

1. 1Search or open a color
2. 2Copy HEX, RGB, HSL or CMYK
3. 3Jump to related shades

Your palette on five finished-looking screens, so you can judge it as a design.

Preview your colors mapped onto real designs before you commit to them. Five swatches in a row tell you almost nothing about how they behave as a page.

1. 1Bring in a palette
2. 2See it across five real scenes
3. 3Shuffle role assignments to compare

A light version and a dark version of the same palette, side by side.

See which way your palette naturally reads — light or dark — and preview both, built from the same role logic the Palette Doctor uses. Dark themes break the assumptions most color tools quietly make.

1. 1Bring in the palette you're testing
2. 2See which theme it's really built for
3. 3Compare the light and dark builds

A ready-made palette to start from instead of a blank page.

Browse a curated gallery and filter by mood or theme when you need a starting point in seconds.

1. 1Filter by tag — pastel, nature, bold…
2. 2Preview palettes at a glance
3. 3Open one in the generator to refine

A drop-in Tailwind theme block, v4 or v3, built from your own colors.

Every color becomes a full 50–950 scale, shaped by Tailwind's own lightness and chroma curve. Your color keeps its exact hue and sits untouched on one slot — the ring marks it — and clicking any shade rebuilds the scale around that shade instead.

1. 1Bring in your palette, or swap a color from the swatch picker
2. 2Click a shade to move the scale onto it
3. 3Copy the v4 @theme block or v3 config

The same illustration in your colors, downloadable.

Recolor any SVG with a modern, soft palette while keeping its original light and shadow.

1. 1Open an SVG illustration
2. 2Shuffle, browse palettes, or edit per region
3. 3Download as PNG (or SVG on Pro)

An edited image, exported, without installing anything.

Make fast edits to an image without opening heavy design software.

1. 1Open your image
2. 2Crop, filter or annotate
3. 3Export the result

The same images in the format you needed, converted on your own machine.

Batch-convert to PNG, JPG, WEBP or ICO right in your browser, with adjustable quality.

1. 1Drop in one or many images
2. 2Choose a format and quality
3. 3Convert and download

One image showing the photo and the colors it gave you — ready to post.

Turn a photo and its picked colors into a clean, shareable collage.

1. 1Upload a photo
2. 2Auto-pick its palette
3. 3Arrange and export the collage