# Color Picker

> Pick colors on an HSV, HSL or painter's RYB wheel, get ready made color harmonies and convert HEX, RGB, HSL, OKLCH and CMYK. Nearest Tailwind token included.

URL: https://acrafto.com/en/color-picker-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://en.wikipedia.org/wiki/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](https://acrafto.com/en/convert-images-to-grayscale-online/).

## 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](https://tailwindcss.com/docs/colors)), 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](https://bottosson.github.io/posts/oklab/). Syntax and browser support are summarized on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch). How the print model works is described in the [CMYK color model](https://en.wikipedia.org/wiki/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](https://acrafto.com/en/online-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 an `oklch()` 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 support `oklch()`, 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.

### Why do the harmonies change when I switch to the RYB wheel?

Because what counts as "opposite" depends on how hues are spread around the circle. The RYB wheel spaces the pigment primaries evenly, so complementary pairs match what painters know: red and green, blue and orange, yellow and purple. The HSV and HSL wheels space hues by how light mixes, so they pair red with cyan. Neither is wrong: RYB follows traditional art teaching, HSV and HSL follow what screens do.

### Can I trust the CMYK values for print?

Treat them as a guide. A real print conversion depends on the [ICC profile](https://en.wikipedia.org/wiki/ICC_profile) of the printer, the paper and the ink. The same RGB color comes out differently on coated and uncoated paper. The values here use the standard formula, which gets you close, but the final proof belongs to your print shop.

### Where is the eyedropper button in Firefox or Safari?

It is hidden on purpose. The [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) the button relies on is currently available only in Chromium based browsers (Chrome, Edge, Opera). Every other feature of the tool works everywhere; only picking from the screen is missing. If you need a color from an image, the [image color picker](https://acrafto.com/en/online-image-color-picker/) works in every browser.

### Is my color history private?

Yes. The history lives in your browser's localStorage on your device. Nothing you pick, paste or copy is sent anywhere. The whole tool runs as JavaScript in your browser, which you can confirm in the Network tab of your developer tools.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))