Color Picker & Converter
Pick a color with a full saturation panel and hue slider — or your system's native picker — and get its HEX, RGB, HSL, and CMYK values instantly. Edit any format directly and every other field, plus the preview swatch, updates in real time. No uploads, no accounts, just color math in your browser.
HEX
RGB
HSL
CMYK
Edit any field and the others update instantly. Values are clamped to valid ranges. Everything runs in your browser.
How to Use Color Picker & Converter
Pick a color
Drag across the saturation panel and hue slider to dial in a color visually, or click the System swatch to use your OS picker and eyedropper.
Or type a value
Paste a HEX, RGB, HSL, or CMYK value into its field — the other three formats and the preview swatch update instantly.
Copy the format you need
Click the Copy button next to any format to grab a ready-to-paste value for your CSS, code, or design tool.
About Color Picker & Converter
The four formats and when to use them
HEX is the compact six-digit form CSS made ubiquitous — #3B82F6 — ideal for stylesheets and design handoffs. RGB expresses the same color as red, green, and blue components from 0-255, which is what screens actually display and what JavaScript canvas APIs consume. HSL describes color the way humans think — hue around a wheel, saturation, lightness — making it the best format for programmatically generating variations. CMYK is subtractive ink coverage for print: essential when your color is headed to a business card or brochure rather than a screen.
How the conversions work
HEX, RGB, and HSL describe identical colors in the same sRGB space, so converting between them is exact, lossless math — this tool computes it live as you drag the picker or edit a field. CMYK is different: it models ink on paper, a smaller gamut than a backlit screen, so the conversion is a standard mathematical approximation. Vivid screen colors, especially saturated blues and greens, will print duller than they appear. For color-critical print work, treat the CMYK values as a starting point and confirm against a physical proof.
A picker built for real workflows
The two-dimensional saturation panel and hue slider mirror the pickers in Figma and Photoshop, so finding an exact shade feels familiar — and the native system picker is one click away, including its eyedropper on supported browsers for sampling colors from your screen. Each format has its own copy button that grabs a ready-to-paste CSS-compatible string. Pasted values are validated and clamped to legal ranges, so a typo like rgb(300, 0, 0) corrects to the nearest valid color instead of failing. Everything computes locally in your browser.
Common uses for Color Picker & Converter
- Convert a designer's HEX values to RGB or HSL for use in code
- Get CMYK approximations of brand colors for print materials
- Fine-tune a shade visually, then copy the exact CSS value
- Sample colors from your screen with the native eyedropper and convert them
- Build lighter and darker variants of a color by adjusting HSL lightness
Frequently Asked Questions
Why do my CMYK values look different in other tools?
CMYK conversion depends on the assumed printing conditions — there's no single correct answer the way there is for HEX to RGB. This tool uses the standard formula without a color profile, which matches most online converters. Professional print workflows apply ICC profiles for specific paper and press combinations, which shifts values. Always confirm critical colors with your printer.
What formats can I type into the fields?
The parsers are forgiving. HEX accepts three or six digits, with or without the # prefix. RGB, HSL, and CMYK accept full function syntax like rgb(59, 130, 246) or just the bare numbers separated by commas or spaces. Out-of-range values are clamped to legal bounds, and an invalid field is outlined in red until it parses.
When should I use HSL instead of HEX?
Use HSL when you need to reason about or systematically modify colors: making a hover state 10% darker means reducing lightness, and building a palette means holding hue constant while varying saturation and lightness. HEX values give no such handle — the relationship between #3B82F6 and its darker variant is opaque. For static one-off values, HEX stays the convenient default.
Can I pick a color from something on my screen?
Click the System swatch to open your operating system's native color picker — on Chrome and Edge it includes an eyedropper that samples any pixel on screen, ideal for grabbing colors from screenshots or existing sites. The sampled color immediately populates all four format fields, ready to copy into your stylesheet.
Are the picker and converter fully offline?
Yes — every conversion is pure math executed in your browser, with no server involved and nothing about your color choices transmitted or logged. Once the page loads, the tool works without a connection. That makes it dependable inside locked-down corporate networks and on flaky Wi-Fi alike.