Color Picker
This free color picker lets you choose any color visually and instantly copy it as HEX, RGB, HSL, CMYK, or OKLCH. Drag the picker, fine-tune the sliders, and grab the exact value you need with one click — perfect for web design, branding, illustration, and print work.
Everything runs entirely in your browser. There is no signup, no watermark, and nothing is uploaded to a server — the colors you pick never leave your device.
CMYK values are a mathematical approximation for quick reference — not profile-accurate for print. True print color depends on ICC profiles, paper stock, and press conditions.
How to use the color picker
Start by dragging the marker across the saturation and lightness field to set the look you want, then use the hue slider to move around the spectrum. As you adjust, every format updates live. When you land on the right color, click the format you need — HEX, RGB, HSL, CMYK, or OKLCH — to copy it straight to your clipboard, then paste it into your CSS, design app, or style guide.
You can also type or paste an existing value to load a known color and convert it into the other formats. This makes the picker a fast two-way converter as well as a visual chooser.
Color formats explained: when to use HEX, RGB, HSL, and OKLCH
Each format describes the same color in a different way, and each is suited to a different job. HEX and RGB are the most common on the web and map directly to how screens emit red, green, and blue light. HSL is friendlier for humans because it separates hue, saturation, and lightness, so nudging a color lighter or more muted is intuitive. OKLCH is a modern, perceptually uniform space — equal numeric steps look like equal visual steps — which makes it excellent for building consistent palettes and accessible contrast.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS, sharing a single token quickly |
| RGB | rgb(59, 130, 246) | Screens, code, adding alpha transparency |
| HSL | hsl(217, 91%, 60%) | Tweaking lightness or saturation by hand |
| CMYK | 76, 47, 0, 4 | Print and physical media |
| OKLCH | oklch(62% 0.19 256) | Perceptually even palettes and modern CSS |
Where a color picker fits in your workflow
Designers use a picker to define brand colors, match a shade from a reference image, or audit an existing palette before handing it to developers. Front-end developers reach for one to convert a designer’s HEX into RGB with alpha, or into HSL so they can derive hover and focus states programmatically. Because the values copy cleanly, the same color stays consistent across Figma, your CSS variables, and your print proofs.
How HEX color codes work
A HEX code is just an RGB color written in base-16 (hexadecimal). The format is #RRGGBB, where each pair of characters sets one channel: red, then green, then blue. Each pair runs from 00 (none of that channel) to FF (the maximum), which equals 0 to 255 in decimal. Because each channel has 256 possible levels, a HEX code can describe 256 × 256 × 256 = 16,777,216 distinct colors.
When all three pairs repeat a character, you can use the three-digit shorthand: #FFF expands to #FFFFFF (white) and #1A2 expands to #11AA22. This is why some codes look shorter — they are not a different format, just a compressed way of writing the same six-digit value.
Common color codes reference
The colors below are standard CSS named colors with their exact equivalents in HEX, RGB, and HSL. They are handy reference points when you need a pure primary, a neutral, or a starting value to nudge in the picker.
| Name | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Green (Lime) | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Cyan (Aqua) | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Magenta (Fuchsia) | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
Frequently asked questions
How do I copy a HEX code from this color picker?
Pick or load your color, then click the HEX value shown beneath the picker. It copies to your clipboard instantly, ready to paste into CSS, a design tool, or a style guide. Every other format — RGB, HSL, CMYK, and OKLCH — copies the same one-click way.
What is the difference between HEX and RGB?
They describe the same color. HEX is a compact six-digit code like #3B82F6, while RGB lists the red, green, and blue channels as numbers, like rgb(59, 130, 246). RGB is handy when you need an alpha channel for transparency; HEX is shorter and the common default for sharing web colors.
When should I use OKLCH instead of HEX?
Use OKLCH when you want colors that scale evenly to the human eye, which is ideal for generating tints, shades, and accessible contrast ratios. Equal steps in lightness or chroma produce equal visual change, something HEX and RGB cannot guarantee. Modern browsers support OKLCH directly in CSS.
Is this color picker really free and private?
Yes. The tool is completely free with no account required, and it runs entirely in your browser. The colors you choose are processed locally on your device and never uploaded, so you can use it for confidential client or brand work without concern.
How many colors can a HEX code represent?
A standard six-digit HEX code carries three channels of 256 levels each, so it can express 256 × 256 × 256 = 16,777,216 colors — often rounded to “16.7 million.” That covers the full 24-bit RGB range used by web browsers and screens, which is why HEX is the default way to write colors in CSS and HTML.
What are named (web) colors?
Named colors are keywords like red, tomato, or rebeccapurple that browsers map to fixed HEX values. CSS recognizes about 140 of them. They are convenient and readable, but the set is limited, so for precise brand colors you will usually copy a HEX, RGB, or HSL value from the picker instead.
What is the difference between HSL and HSV/HSB?
Both describe color by hue and saturation, but they differ on the third value. HSL uses lightness, where 50% is the most vivid version of a hue and 100% is always white. HSV (also called HSB, for brightness) tops out at 100% as the pure, fully lit hue, with white reached only when saturation also drops to zero. Design tools often show HSB; CSS uses HSL.
Why do some HEX codes have only three digits?
Three-digit codes are shorthand. Each digit is doubled to make the full six-digit value, so #0AF means #00AAFF. This only works when both characters in every channel are identical, which is why you cannot shorten a code like #3B82F6. The shorthand is purely a convenience and renders identically to its expanded form.