A color picker is one of those tools you reach for constantly once you know it's there. Whether you're writing CSS, matching a brand color from a screenshot, tweaking a chart, or just curious what the exact code behind a shade is, this picker gives you every common format at once — HEX, RGB, HSL, HSV and CMYK — and lets you copy any of them with a single click. There's no account, no upload, and no waiting: the moment you move the picker, every value updates.
How to use the color picker
- Pick a color visually. Click the large color field and drag the pointer to choose any hue, then adjust brightness and saturation. The swatch and all values update live as you move.
- Or type a HEX code. If you already know the code, type it into the
#field (for example1A73E8). The picker jumps straight to that color. - Read every format. The panel on the right shows the same color as HEX, RGB, HSL, HSV and CMYK simultaneously — no switching modes.
- Copy what you need. Press Copy next to any value, or Copy all values to grab the full set. A confirmation appears so you know it worked.
- Explore nearby shades. The strip below the tool shows lighter-to-darker variations of your color — click any band to make it the new active color.
Understanding the color formats
Each format describes the same color in a different way, and each one is useful in a different place. Knowing what they mean makes it far easier to move a color between design tools, code, and print.
HEX
A HEX code is a six-digit hexadecimal string like #3B82F6. It's really just RGB written compactly: the first two characters are red, the next two green, and the last two blue, each ranging from 00 to FF (0–255 in decimal). HEX is the default format for web and CSS because it's short and unambiguous. A three-digit shorthand like #F0C also exists, where each digit is doubled to make #FF00CC.
RGB
RGB describes color as three channels — red, green and blue — each from 0 to 255. It maps directly to how screens emit light: mix full red, green and blue and you get white; set all three to zero and you get black. RGB is handy when you need to tweak a single channel, animate a value, or work with rgba() to add transparency.
HSL and HSV
HSL (hue, saturation, lightness) and HSV (hue, saturation, value) describe color the way people tend to think about it. Hue is the position on the color wheel from 0 to 360 degrees — red at 0, green at 120, blue at 240. Saturation is how vivid the color is. In HSL, lightness runs from black through the pure color to white; in HSV, value runs from black to the pure color. HSL is especially useful for generating tints and shades, because you can keep the hue fixed and only change lightness.
CMYK
CMYK (cyan, magenta, yellow, key/black) is the subtractive model used in printing. Because screens and printers reproduce color differently, an on-screen CMYK value is an approximation — always confirm with your print provider for exact results — but it's a useful starting point when preparing artwork for print.
The math behind the conversions
The picker converts between formats using standard, well-defined formulas. To go from HEX to RGB, each pair of hex digits is read as a base-16 number: 3B becomes 59, 82 becomes 130, and F6 becomes 246. To convert RGB to HSL, the channels are first divided by 255, then the maximum and minimum of the three are found. Lightness is the average of that max and min; saturation depends on how far apart they are; and hue is calculated from which channel is largest. CMYK is derived by computing K = 1 − max(R,G,B) and then finding how much cyan, magenta and yellow remain. These are the same conversions used across professional design software, so the values you copy here will match what you see elsewhere.
A worked example
Say you pick the blue #3B82F6. Splitting the HEX gives red 3B = 59, green 82 = 130, blue F6 = 246, so the RGB is rgb(59, 130, 246). Dividing by 255 gives 0.231, 0.510 and 0.965. The maximum is blue (0.965) and the minimum is red (0.231), so lightness is (0.965 + 0.231) / 2 = 0.598, or about 60%. Because blue is the largest channel, the hue lands at roughly 217°, and the saturation works out to about 91%. That's exactly the hsl(217, 91%, 60%) shown in the tool — the same blue expressed three different ways.
Common color reference
Here are a few widely used colors and their codes to sanity-check the picker or grab quickly.
| Color | HEX | RGB |
|---|---|---|
| White | #FFFFFF | 255, 255, 255 |
| Black | #000000 | 0, 0, 0 |
| Red | #FF0000 | 255, 0, 0 |
| Green | #00FF00 | 0, 255, 0 |
| Blue | #0000FF | 0, 0, 255 |
| ColrPick orange | #F0502E | 240, 80, 46 |
| Slate gray | #64748B | 100, 116, 139 |
Tip: Need transparency? Any RGB value works inside rgba() — just add a fourth number from 0 (invisible) to 1 (solid), like rgba(59, 130, 246, 0.5).
Frequently asked questions
Is this color picker free to use?
Yes, completely free with no limits, no account, and no watermark. Pick as many colors as you like.
Do my colors get uploaded anywhere?
No. Every calculation runs locally in your browser using JavaScript. Nothing you pick is sent to a server, which also means the tool works instantly and even offline once the page has loaded.
How do I copy a color code?
Click the Copy button next to any format, or use Copy all values to copy HEX, RGB and HSL together. You'll see a short confirmation each time.
Can I enter a HEX code manually?
Yes. Type the six characters into the # field and the picker will jump to that exact color and update every other format automatically.
Why is the CMYK value slightly different from my print shop's?
Screens use RGB light while printers use CMYK inks, so any screen-to-CMYK conversion is an approximation. Use the value as a starting point and confirm the final mix with your printer's color profile.
What's the difference between HSL and HSV?
Both start with hue and saturation. HSL's third value is lightness (0% is black, 100% is white). HSV's third value is "value" or brightness (0% is black, 100% is the pure, fully bright color). HSL is often easier for making tints and shades.
Can I use these colors directly in CSS?
Absolutely. Copy the HEX for something like color:#3B82F6;, or copy the rgb() and hsl() strings straight into your stylesheet — they're formatted ready to paste.
About this tool
This picker is built for speed and accuracy. It uses the standard color-conversion formulas, so the codes it produces match professional design and development tools. The one place to keep in mind is CMYK, which is an approximation of print output rather than an exact match. For everything on screen — websites, apps, UI, charts — the values here are reliable and ready to use.