Skip to content

Free browser tools · no account

Color tools built like a small product studio

Every utility below has its own URL, stable layout, and enough on-page context that you can paste the link in Jira or Notion without writing a paragraph of caveats. Dark mode, keyboard search, and copy chips behave the same from the picker to the Tailwind snippet — on purpose, so your team stops re-learning navigation every Tuesday.

20
Interactive tools
0
Sign-up walls
OKLCH
Modern CSS formats

All 20 interactive color tools

Section 1 from the ChromaXP development guide — each tool has its own URL.

🎨

Color picker

HEX · RGB · OKLCH

Open 🌈

Palette generator

Harmonies

Open 🖼

Image extractor

Dominant colors

Open 🎡

Color wheel

Interactive wheel

Open 🌅

Gradient generator

CSS gradients

Open ♿

Contrast checker

WCAG

Open ⇄

Color converter

All formats

Open ◐

Tint & shade

10 steps

Open ⚗

Color mixer

Blend

Open 🎲

Random color

Random HEX

Open 🏷

Color name finder

HEX → name

Open 👁

Color blindness

8 types

Open ▮

Monochromatic

Mono ramp

Open 🌡

Color temperature

Warm / cool

Open 🫧

Mesh gradient

Mesh CSS

Open 🌑

CSS shadow

box-shadow

Open ▦

Pattern generator

CSS patterns

Open ◇

Color harmony

Tetradic

Open 🔗

Palette from URL

Extract

Open ✓

Accessible colors

Safe pairs

Open

Explore, mix, and translate color

Start from a wheel or a HEX code, then move into ramps and gradients when the first happy accident is not enough. These tools favor handoff-ready strings (CSS, OKLCH, RGB) over mystery meat sliders that only export a PNG.

Color picker

Native color input, sliders, and locked numeric fields so HEX, RGB, HSL, HSV, CMYK, and OKLCH stay in sync. Built for the moment someone drops #RRGGBB in chat and you still need a sane OKLCH readout for tokens.

Core
Open color picker

Color converter

One anchor color in; synchronized HEX, RGB, HSL, and OKLCH out. Use it when design references HEX but your CSS pipeline prefers oklch() for theme math.

Open converter

Color mixer

Linear RGB blend between two swatches — fast midpoints for gradients, hover states, and “somewhere between these two brand purples” debates.

Open mixer

Gradient generator

Linear, radial, and conic CSS with draggable stops. Tune angles until banding disappears on a matte laptop screen, then copy a single declaration.

Build gradient

Palette generator

Five-stop harmonies from one base: complementary, triadic, analogous, split, and more — plus a CSS variables block you can paste into a prototype.

Generate palette

Tint & shade generator

Stepwise mixes toward white and black for consistent hover and disabled rails when your Figma file only shipped one brand hue.

Open tints & shades

Image color extractor

Upload a reference still; sample dominant swatches for moodboards. The default path keeps processing in the browser so screenshots do not bounce through a server by accident.

Extract from image

Readable UI: WCAG contrast you can defend

Pair saturated picks with evidence before you ship. The checker focuses on WCAG-style contrast for normal and large text, with a live preview so gray-on-tint arguments end faster.

Contrast checker

AA and AAA thresholds for body and headline sizes, with copy-ready ratio readouts. Keep it open beside the picker when you tune primary buttons on tinted cards.

A11yWCAG
Run contrast check

Why contrast lives next to pickers

Most “pretty” palettes fail in production because text contrast was checked once on white, not on the real surface colors. ChromaXP keeps the checker one click away from the same header as the picker so teams build the habit: pick → check → export.

For deeper reading, see our article on WCAG contrast without the spreadsheet and the OKLCH-focused UI systems primer.

Design tokens: CSS, Tailwind, Android

Generate ramps and named steps your engineers can paste into :root, Tailwind theme.extend, or Android colors.xml without re-typing HEX rows by hand.

CSS variables generator

50–950 ramps with optional OKLCH-aware generation and comment-friendly export for handoff. Built for teams who want one source of truth before Tailwind or Android variants diverge.

Tokens
Build CSS variables

Tailwind config snippet

The same ramp engine shaped as a module.exports stub for Tailwind v3-style configs — extend colors without inventing new spacing scales at midnight.

Copy Tailwind snippet

Android colors.xml

Opaque HEX resources with predictable snake_case names so mobile tokens stay aligned with the web ramp instead of drifting a shade every release.

Generate Android XML

How ChromaXP tools fit next to palettes and brand pages

ChromaXP is not only a widget warehouse. The static pages are written so search engines and humans both see the same story: what the tool optimizes for, where it is intentionally blunt (for example, RGB mixing is not perceptually uniform — we say so), and which reference hubs to open next when you need named scales from Material, Tailwind, or HTML keywords.

If you are comparing us to giant color encyclopedias, they will beat us on raw breadth of named shades. We bias toward export and accessibility tied to the same numbers your engineer pastes into CSS. That is the editorial line, and it is why the directory groups pickers, WCAG checks, and token export separately instead of hiding half the product behind a hamburger menu.

Related hubs on this site

How this directory is supposed to feel

Older color sites sometimes split every micro-tool onto a different subdomain with a different font stack. ChromaXP keeps navigation boring on purpose: if you learned the header once, you already know how to jump from “shades of navy” to “contrast check” without re-learning muscle memory.

If you are comparing against large reference properties (the ones that rank for single-word color names): they win on breadth. We win on tying export and accessibility to the same numbers your engineer will paste into CSS — that is the editorial bias.

Archetypes at a glance

  • Table-first sites — best when you already know the name you want. Use our palette and brand reference hubs for that; use tools when you are still exploring.
  • Single-widget landings — fast, but often thin on context. Each ChromaXP tool URL carries workflow notes, limitations, and related links so the page earns the bookmark.
  • Workstation-style — what we are aiming for: shared chrome, dark mode everywhere, copy buttons that behave, and export snippets that line up across CSS, Tailwind, and Android.

Where to go next

  • Need named scales? Start at Tailwind or Material.
  • Need opinionated writing? The blog covers OKLCH, contrast habits, and token workflows.
  • Need to complain about a wrong swatch? Contact — we fix tables when someone sends a source.

Frequently asked questions

Are these color tools free to use?

Yes. Each tool runs in your browser with no paywall and no account requirement. You can bookmark individual URLs such as the color picker or contrast checker and share them with your team.

Do ChromaXP tools work offline?

After the first load your browser may cache scripts and styles; many utilities continue to work in common offline scenarios. Always verify your exact browser profile before relying on offline access for a live demo.

Why does every tool have its own page instead of one long dashboard?

Separate URLs make support conversations clearer, analytics more honest, and bookmarks more predictable. When someone says “the gradient tool broke,” we know they mean gradient-generator, not a mystery tab inside a mega-panel.

Which tool should I use first for UI work?

Most product teams start with the picker or converter, then validate text pairs in the WCAG contrast checker, then export ramps with the CSS variables generator or Tailwind snippet.

Is there a public API for these utilities?

Not at the moment. The site is intentionally static HTML and client-side JavaScript so it can be hosted on a CDN without a standing server bill. If you need automation, export snippets from each tool and wire them into your build until an API exists.

How do I report a wrong default or a bug?

Use the contact page with the exact URL and, if possible, a screenshot. We prioritize fixes that break accessibility checks or export formats readers rely on.