Color Picker
Pick a color on the wheel, fine tune it on the saturation and brightness square, and read it back in every format your project uses, from #RRGGBB to oklch(). The tool also covers what other color pickers leave out: three wheel layouts including the traditional painter’s RYB wheel, harmony rules that build a palette for you, an alpha channel, and one click export of the whole palette as CSS variables, SCSS or JSON. Everything is calculated in your browser.
RYB or RGB? Three color wheels instead of one
The Wheel mode switch changes how hues are laid out on the wheel:
- HSV and HSL are digital wheels. Hues sit where light mixes them on a screen. They differ in the square: in HSV the brightest corner is the pure hue, while HSL puts pure hues at medium lightness with white above them.
- RYB (painter’s) arranges hues the way painters learn them: red, yellow and blue as primaries, with orange, green and purple in between (see the RYB color model). You notice the difference mostly in harmonies. On the RYB wheel the complement of red is green and the complement of blue is orange, the classic pigment pairs. A digital wheel pairs red with cyan. If a “complementary” palette from a regular color picker ever looked off to you, this is why.
Color harmonies that build the palette for you
Choose a rule under Color harmony. The wheel marks the companion colors and a ready palette appears below it:
- Complementary: one opposite color. The strongest contrast, good for a single accent next to your main brand color.
- Split complementary: the two neighbors of the complement. Almost as much contrast, much easier to balance.
- Triadic: three hues evenly spaced. Lively yet stable when one dominates and the other two are used sparingly.
- Tetradic (square): four hues. Rich schemes for illustration and charts, hard to balance in an app interface.
- Analogous: the closest neighbors. A calm mix for backgrounds and gradients.
- Monochromatic: one hue at several lightness levels. The safest choice for button states (hover, active, disabled).
Copy the whole palette in one click in the format you need: plain HEX, RGB, HSL, OKLCH, paste ready CSS custom properties (--color-1: …), SCSS variables or JSON for code. To check whether the palette still holds contrast for people who struggle to tell hues apart, take a screenshot and convert it to grayscale.
Convert HEX, RGB, HSL, OKLCH and CMYK: paste anything, read everything
The input fields accept almost any color notation: #f80, #ff8800, eight digit hex with alpha, rgb() and rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 and named CSS colors like rebeccapurple. Whatever you enter, you get seven synced outputs: HEX, RGB, HSL, HSV, LCH, OKLCH and CMYK, each with its own copy button.
The Opacity (alpha) slider below the preview switches the outputs to their transparent forms #RRGGBBAA, rgba() and hsla(). The preview is drawn over a checkerboard, so you can judge the transparency at a glance.
Find the nearest Tailwind CSS color token
Two labels under the preview name the color for you: the nearest named CSS color (handy for quick prototypes) and the nearest Tailwind token, for example orange-500. That keeps you inside your design system instead of inventing one off values. Click a label to copy it.
It answers the question that comes up in every design handoff: the designer sent a hex code, which Tailwind class is closest? The match is computed against the default Tailwind CSS 4 palette (see the Tailwind color docs), so you can drop the token straight into a class name.
Which color format should you use?
| Format | Full name | When to use it |
|---|---|---|
| HEX | Hexadecimal | The web default. Short, supported everywhere, easy to copy. Eight digits add alpha. |
| RGB | Red, Green, Blue | How screens think. Three light channels from 0 to 255. What most APIs and canvas code expect. |
| HSL | Hue, Saturation, Lightness | For tweaking by eye. “A bit lighter” or “less saturated” means changing one number. |
| HSV | Hue, Saturation, Value | Design software. The model behind the color pickers in Photoshop and GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptually uniform. Equal steps in numbers look like equal steps to the eye, which HSL only pretends to do. |
| OKLCH | OK Lightness, Chroma, Hue | The modern CSS choice. Fixes the hue shifts in blues that affect LCH. Supported by all current browsers and ideal for design tokens. |
| CMYK | Cyan, Magenta, Yellow, Key | A guide for print. An approximate conversion to talk to your print shop. The final values depend on its color profile. |
Why OKLCH is more perceptually uniform than older models is explained by Björn Ottosson, who designed the Oklab space, in his original article. Syntax and browser support are summarized on MDN. How the print model works is described in the CMYK color model article.
Small things that save time
- History keeps itself. The last 24 colors survive a page refresh. They stay in your browser’s storage and are never uploaded.
- 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. Need the color from a photo or a logo file instead? Use the image color picker.
- Keyboard control. The wheel and the saturation square respond to arrow keys, so you can adjust a color in small steps.
- Presets cover the common base colors when you just need a quick starting point.
Frequently asked questions
How do I convert OKLCH to HEX?
Paste anoklch() value into the OKLCH field and all other outputs, HEX included, update right away. It works the other way too: enter a HEX code and read the matching oklch(). One caveat: OKLCH can describe colors outside the sRGB range, and those are clipped to what sRGB can show. A very saturated oklch() will therefore not look the same as its HEX version 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 a popular notation for design tokens (Tailwind CSS 4 defines its whole palette in it). For very old browsers, put a HEX fallback on the line before it. This tool gives you both values.