Color Picker Online
Pick a color on the wheel, fine-tune it on the saturation canvas, and read it back in every format your project speaks — from #RRGGBB to oklch(). This picker also does the parts other tools skip: three wheel geometries including the painter’s RYB wheel, harmony overlays that build a palette for you, an alpha channel, and one-click export of the whole palette as CSS variables, SCSS or JSON. All of it computed locally in your browser.
RYB vs RGB: three wheels, not one
The Wheel mode selector changes the geometry of the wheel itself:
- HSV and HSL are the digital wheels — hues spaced the way RGB screens mix light. They differ in how the square canvas behaves: HSV’s brightest corner is the pure hue, HSL places pure hues at 50 % lightness with white above.
- RYB (painter’s) arranges hues the way artists learned them: red, yellow and blue as primaries, with orange, green and purple between. Its practical value shows in harmonies — on the RYB wheel, the complement of red is green and the complement of blue is orange, the classic pigment pairs, while a digital wheel pairs red with cyan. If a “complementary” palette from a normal picker has ever looked wrong to your eye, this is why.
Color harmony rules that build the palette for you
Choose a rule under Color harmony and the wheel marks the companion colors, which appear as a ready palette:
- Complementary — one opposite color. The strongest contrast; use it for a single accent against a dominant brand color.
- Split-complementary — the two neighbors of the complement. Almost as much contrast, much easier to balance.
- Triadic — three evenly spaced hues. Lively but stable; let one dominate and use the other two sparingly.
- Tetradic (square) — four hues. Rich schemes for illustrations and data visualization; hard to balance in UI work.
- Analogous — the immediate neighbors. Low tension, good for backgrounds and gradients.
- Monochromatic — one hue in stepped lightness. The safest choice for interface states (hover, active, disabled).
The palette panel copies the whole set in one click, in the format you pick: plain HEX, RGB, HSL, OKLCH, ready-to-paste CSS custom properties (--color-1: …), SCSS variables or JSON for handing to code.
Convert HEX, RGB, HSL, OKLCH and CMYK: paste anything, read everything
The input fields accept practically any color notation you throw at them: #f80, #ff8800, 8-digit hex with alpha, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, or CSS color names like rebeccapurple. Whatever comes in, seven synchronized outputs come back: HEX, RGB, HSL, HSV, LCH, OKLCH and CMYK, each with its own copy button.
Drag the alpha slider below the preview and the outputs switch to their transparent forms — #RRGGBBAA, rgba(), hsla() — with the preview shown over a checkerboard so you can judge the transparency.
Find the nearest Tailwind CSS color token
Two helper chips under the preview name the color for you: the nearest CSS named color (useful for quick prototypes and for talking about colors) and the nearest Tailwind token (e.g. orange-500), so you can stay inside your design system instead of inventing one-off values. Click either chip to copy it.
This answers the question that comes up in every design handoff: a designer sent me a hex code — which Tailwind class is closest? The match is computed against Tailwind CSS 4’s own default palette, so the token you get back is one you can paste straight into a class name.
Which format should you use?
| Format | Full Name | When to use it? |
|---|---|---|
| HEX | Hexadecimal | The web default. Compact, universally supported, easy to copy. 8 digits add alpha. |
| RGB | Red, Green, Blue | How screens think. Three light channels, 0–255. The format most APIs and canvas code expect. |
| HSL | Hue, Saturation, Lightness | For humans editing by hand. “A bit lighter” or “less saturated” is a single number change. |
| HSV | Hue, Saturation, Value | Graphics software. The model behind the pickers in Photoshop and GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptually uniform. Equal numeric steps look like equal visual steps — what HSL pretends to be. |
| OKLCH | OK Lightness, Chroma, Hue | The modern CSS choice. Fixes LCH’s hue shifts in blues; supported in all current browsers and ideal for design-token systems. |
| CMYK | Cyan, Magenta, Yellow, Key | Print orientation. An approximate conversion for talking to print designers — final values always come from the printer’s color profile. |
Small things that save time
- History keeps itself. The last 24 colors you worked with survive a page refresh — stored in your browser’s local storage only, never uploaded anywhere.
- Eyedropper. In browsers with the EyeDropper API (Chrome and Edge) you can pick a color from anywhere on your screen, even outside the browser window.
- Keyboard control. The wheel and the saturation canvas respond to arrow keys for pixel-precise adjustments.
- Presets cover the common base colors when you just need a quick starting point.
Frequently Asked Questions (FAQ)
How do I convert OKLCH to HEX?
Paste theoklch() value into the OKLCH field and every other output updates instantly, HEX included. It works the other way round too — type a HEX code and read back the oklch() equivalent. One caveat: OKLCH can describe colors outside the sRGB gamut, and those get clipped channel by channel to what sRGB can show, so a very high-chroma oklch() and its HEX form will not look identical on a wide-gamut display.
Is oklch() safe to use in production CSS?
Yes. All current versions of Chrome, Edge, Firefox and Safari supportoklch(), and it has become the preferred notation for design tokens (Tailwind CSS 4 defines its entire palette in it). For very old browsers, serve a HEX fallback on the previous line — this tool gives you both values.