Interactive · client-side
Free online color picker
Tweak one channel without the others drifting: native wheel for speed, numeric fields when someone pastes
#RRGGBB from Slack, sliders when you are hunting a hue but do not know the name yet. OKLCH is there
for the days you care about lightness more than “percent saturation” in HSL.
HSV
Copy formats
One click copies the live value from each block below — same clipboard path as the rest of ChromaXP tools.
Why this picker exists
Devtools and Figma already pick colors. This page is for the handoff moment: one anchor swatch
needs to exist as HEX for legacy CSS, rgb() for an old PDF spec, CMYK as a rough print bridge, and
oklch() for a modern token file — without you maintaining four mental models in parallel.
How to use this page
- Set color with the native input for speed, or paste HEX and press Enter to normalize.
- Use RGB fields when a design file only exposes channels; sliders update every linked format automatically.
- Adjust HSL or HSV when you are exploring hue — watch OKLCH if you care about even lightness steps.
- Copy the format your pipeline needs; re-check text pairs in the contrast checker before shipping UI.
Use a different tool when…
You only need one-way conversion from a pasted string (e.g. hsl() to HEX) — the
color converter is faster. For ramps and token scales, use
CSS variables or Tailwind snippet.
Quick habits
- OKLCH is strongest when you lighten/darken without drifting hue the way HSL often does on yellows.
- CMYK here is indicative only — it cannot know your press profile.
- If copy fails, your browser may block clipboard from file:// URLs; try HTTPS or select the output manually.
FAQ
What is OKLCH, in one sentence?
A color space that keeps lightness adjustments closer to “what your eyes expect” than raw RGB or classic HSL — still not magic, but fewer muddy yellows when you lighten a step.
Why keep a dedicated picker instead of only the native color input?
The native control is great for coarse selection. This page adds synchronized numeric fields, CMYK and OKLCH readouts, and copy buttons so you can paste exact strings into tickets and stylesheets without opening devtools on every tweak.
Which string should I paste into production CSS in 2026?
If your browsers in scope support it, oklch() is increasingly practical for theme ramps. If you still
compile to wide HEX for older pipelines, copy HEX here and keep OKLCH in comments or design tokens until rollout matches reality.
Does this page work offline?
After assets cache, many browsers run the picker without a network round-trip. Do not plan a conference demo on airplane Wi-Fi without opening the tab once online first.
CMYK looks different from my print proof — why?
Screen RGB (and derived conversions) cannot know your paper, ink, or press profile. Treat CMYK here as a rough bridge to prepress folks, not a contract color proof.
How do I copy HEX the fastest?
Use the Copy HEX button, or triple-click the field on desktop. On mobile, long-press selects the whole token.
Does ChromaXP store the colors I pick?
No server round-trip for picking itself — values live in your page session. Analytics (if enabled) may log anonymous events; see the privacy policy for what that means in practice.
Where do gradients live?
On the gradient generator — this picker is intentionally focused on solid fills and handoff codes.