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.
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.
Harmonies 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.
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.
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.
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.
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)
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.