Color Picker: RGB, Hex, CMYK, HSV Converter

What is a color picker?

A color picker is a tool for choosing a color and reading out its value in different color formats. This one shows a color in RGB (red, green, blue), hex, CMYK (cyan, magenta, yellow, black), and HSV (hue, saturation, value) at the same time. Changing any one format updates the others instantly.

How to use the color picker

There are three ways to choose a color.

Click anywhere on the spectrum box to pick a hue and saturation. The horizontal position sets the hue (which color family, such as red or blue). The vertical position sets the saturation (how vivid or washed out the color looks). A slider below the spectrum controls brightness, from black on the left to full brightness on the right.

Typing exact values also works. The hex field accepts codes such as #2ECC71, with or without the #. The RGB fields each accept a whole number from 0 to 255. The CMYK fields each accept a whole number from 0 to 100. A value typed above the allowed range is capped at the maximum.

Each color format has a copy button next to it. Clicking it copies that value to the clipboard and shows a short "Copied!" message.

Color models explained

RGB

RGB describes a color as a mix of red, green, and blue light, the same three colors a screen uses to create every pixel. Each channel ranges from 0 to 255. RGB(255, 0, 0) is pure red, and RGB(0, 0, 0) is black. Browsers, apps, and video software all use RGB, because it matches how screens work.

Hex

A hex code writes an RGB color in base 16 instead of base 10. #2ECC71 has three pairs of characters: 2E for red, CC for green, and 71 for blue. Each pair runs from 00 to FF. Hex codes are common in web design, because CSS accepts them directly and they are shorter to type than rgb(). A three-character shorthand exists too: #0F0 means the same as #00FF00.

CMYK

CMYK is used for printing. A printer builds color by layering cyan, magenta, yellow, and black ink on white paper, so it works by subtracting light rather than adding it. Each channel is a percentage from 0 to 100. CMYK(0, 0, 0, 0) is no ink at all, which leaves the white paper showing. CMYK cannot reproduce every color a screen can show; some bright screen colors, especially certain blues and greens, look duller once printed.

HSV

HSV describes hue, saturation, and value separately. Hue is the color family, given in degrees from 0° to 360°, where 0° is red, 120° is green, and 240° is blue. Saturation is how vivid the color is, from 0% (gray) to 100% (fully colored). Value is how bright it is, from 0% (black) to 100% (full brightness). HSV is close to how people naturally describe color, which is why the spectrum and brightness slider in this tool are built around it.

RGB to hex formula

Each RGB channel, a number from 0 to 255, is converted to a two-digit hexadecimal number, then the three pairs are joined with a # in front.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

RGB to CMYK formula

First each RGB channel is scaled to a fraction between 0 and 1. Black (K) is set from whichever channel is largest. Cyan, magenta, and yellow are then calculated from the remaining channels and K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

When K equals 1 (the color is pure black), C, M, and Y are all set to 0 to avoid dividing by zero.

RGB to HSV formula

RGB is first scaled to fractions between 0 and 1. Let $C_{max}$ be the largest of the three, $C_{min}$ the smallest, and $\Delta$ the difference between them.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ otherwise } \frac{\Delta}{C_{max}}\times 100\%$

Hue depends on which channel is largest:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Worked example Start with RGB(46, 204, 113), a shade of green. **Hex:** 46 in hex is `2E`, 204 is `CC`, and 113 is `71`, giving `#2ECC71`. **CMYK:** Scaled, R′ = 0.180, G′ = 0.800, B′ = 0.443. The largest is G′, so K = 1 − 0.800 = 0.20, meaning 20% black. Then C = (1 − 0.180 − 0.20) / 0.800 × 100 ≈ 77%, M = (1 − 0.800 − 0.20) / 0.800 × 100 = 0%, and Y = (1 − 0.443 − 0.20) / 0.800 × 100 ≈ 45%. The result is CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0.800 (green), $C_{min}$ = 0.180, so Δ = 0.620. Value = 80%. Saturation = 0.620 / 0.800 × 100 ≈ 77%. Since green is largest, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0.443 − 0.180) / 0.620 + 2) ≈ 145°. The result is HSV(145°, 77%, 80%). ## Making color choices accessible Roughly 1 in 12 men and about 1 in 200 women have some form of color vision deficiency, most commonly reduced ability to tell red from green. A design that relies on color alone to carry meaning, such as a red error message with no icon or label, will not work for these users. Adding a text label, an icon, or a pattern alongside the color fixes this. Text also needs enough contrast against its background. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A dedicated contrast checker is needed to measure this, since this tool does not calculate contrast ratios itself. ## Frequently asked questions **What is the difference between RGB and CMYK?** RGB is for screens and builds color by adding red, green, and blue light. CMYK is for printing and builds color by layering ink on paper, which subtracts light instead. RGB can produce brighter colors than CMYK because ink cannot match the range of colors a screen can emit. **Why do printed colors look different from the screen?** A screen emits light directly; a printed page only reflects the light that hits it. CMYK ink also covers a smaller range of colors than RGB light, so some bright screen colors cannot be matched exactly on paper. **What does the # symbol mean in a hex code?** It marks the following characters as a hexadecimal color code, a convention from early HTML and CSS. Without it, a browser will not recognize the value as a color. **Why do some hex codes have only three characters?** A three-character code is shorthand for a six-character one where each pair repeats the same digit. `#0F0` expands to `#00FF00`. **Are the conversions between formats exact?** RGB to hex is exact, since it is the same numbers written in a different base. RGB to CMYK is an approximation, because it converts between light and ink, which are different physical processes with different color ranges. **Can this tool pick a color directly from an image or webpage?** No. A browser extension or the operating system's built-in color picker (such as Digital Color Meter on macOS) can read a color from the screen; the resulting value can then be typed into this tool to convert it.