What Is a Color Picker?
A color picker lets you read a color off as a code — HEX, RGB, HSL, or CMYK — or build a color from those numbers. It's handy for setting colors in CSS or matching a color from a design comp. This tool runs entirely in your browser: none of the colors or images you work with are sent to a server.
How to Use It
Build a color from a HEX or RGB value
Type 4262FF into the HEX field and it instantly converts to RGB(66, 98, 255), HSL(231°, 100%, 63%), and CMYK(74%, 62%, 0%, 0%). Change any RGB, HSL, or CMYK number or slider and every other format updates in real time.
Pick a color visually with the swatch
Click the swatch in the top-left corner to open your browser's native color picker and choose a color with the mouse — no numbers required.
Pick a color from an image
Upload an image in the "Image Eyedropper" section and hover to preview the color under your cursor. Click to apply it — handy for matching an exact color from a logo or design comp.
HEX vs. RGB vs. HSL vs. CMYK
HEX (hexadecimal)
Writes red, green, and blue as two-digit hex values in the form #RRGGBB. The most common format in CSS and HTML.
RGB (red, green, blue)
Specifies red, green, and blue as numbers from 0-255, matching how a screen emits light — intuitive for digital work.
HSL (hue, saturation, lightness)
Hue (0-360°), saturation (0-100%), and lightness (0-100%). Useful when you want to keep the same hue and only adjust brightness.
CMYK (print inks)
Cyan, magenta, yellow, and key (black) as percentages, used for print. Converting from RGB is only an approximation — actual printed color depends on ink and paper.
Features
- Real-time two-way conversion between HEX, RGB, HSL, and CMYK — edit any format and the rest update instantly
- The picked color fills the whole page background live, so you can preview it in context
- Copy ready-to-use color: / background-color: CSS snippets with one click
- Upload an image and pick the exact color of any pixel with the eyedropper
- Save colors for one-click recall, and share a color-filled page instantly via the ?hex= URL
FAQ
Should I use HEX or RGB?
HEX is the shortest way to set a color in CSS or HTML. RGB is more useful when you need to do math in JavaScript or want to add transparency with rgba(). Editing either one in this tool updates both automatically.
When would I need CMYK?
CMYK is used for print. If you're designing something like a business card or poster, your printer may ask for CMYK values instead of the RGB used on screens. Keep in mind the RGB-to-CMYK conversion is only an approximation — actual printed color depends on ink and paper.
Can I set transparency (alpha)?
No — this tool only handles opaque colors and doesn't support alpha values like rgba() or hsla(). If you need transparency, add an alpha value to the RGB/HSL values yourself afterward.
How accurate is the eyedropper color extraction?
Uploaded images are resized to at most 560px in the browser before their pixel values are read directly. Compression artifacts (like JPEG noise) can make a picked color slightly different from the original, so zoom in or compare nearby pixels if you need an exact match.