All Color Tools

Every ChromaKit tool in one place: generate palettes from words, images or a single color, convert and inspect any value, check accessibility, and export production-ready code — free, with no account.

Generate & explore

Start from nothing, a word or a color you already love — these tools build palettes and help you dig into them.

AI Color Palette Generator

Describe colors in words — “ocean blue”, “luxury gold” — and get a matching five-color palette in seconds, interpreted entirely on your device.

Open the generator

Color harmony engine

Random, Monochromatic, Analogous, Complementary, Split Complementary, Triadic or Tetradic — real hue math sits behind every mode.

Explore the harmony modes

Shade generator

Turn any color into a 50–950 ramp with eleven steps — click any shade to copy its HEX value straight to your clipboard.

Build a shade ramp

Image color extractor

Drop in a JPG, PNG or WebP and pull out the dominant colors — processed locally with Canvas, never uploaded anywhere.

Extract colors from an image

Convert & create

Inspect a single value in every format, then combine colors into gradients you can paste straight into CSS.

Color picker

Start from any color with the native picker, fine-tune it as HEX, RGB or HSL, and lock it while the rest of the palette regenerates.

Pick a starting color

Color converter (HEX/RGB/HSL)

Type a HEX, RGB or HSL value and watch every equivalent update live, ready to copy in whichever format your project needs.

Convert a color value

Gradient generator

Blend two or three colors into a linear or radial gradient, tune the angle, and copy the live CSS output into your stylesheet.

Create a gradient

Check & ship

Validate accessibility, see the palette in context, and move it into your codebase with one click.

Contrast checker

Test any two colors against WCAG AA and AAA thresholds for normal text, large text and UI elements, with the exact ratio shown.

Check color contrast

Live design preview

See the palette applied to a mock website — nav, hero, buttons, cards and footer — before you commit it to a real project.

Preview the design

Export & design tokens

Copy HEX, RGB, HSL or CSS variables, download PNG, SVG, JSON and CSS, or generate design tokens from Primary to Error.

Export a palette

Saved palettes

Keep favorite palettes in your browser’s localStorage, reopen them anytime, and share them with a colors-in-the-URL link.

Open saved palettes

Everything on this page is free, runs entirely in your browser and needs no account — see how each tool works under the hood.