About Color Picker
Pick any color and get hex, RGB, HSL, and CMYK values instantly. Free online color picker with a visual wheel, direct input, and one-click copy for CSS and design work.
How to use
- Click on the color wheel or saturation/value square to pick visually. The outer ring sets hue (0-360 degrees, the position on the color wheel). The inner square sets saturation horizontally (0% on the left edge = gray, 100% on the right = fully saturated) and value/brightness vertically (0% at the bottom = black, 100% at the top = pure color). This is the standard HSV model used by Photoshop and Figma.
- Or type a value directly into any input field. The tool accepts
#3b82f6, 3b82f6, rgb(59 130 246), hsl(217 91% 60%), named colors like cornflowerblue, and the new CSS Color Module 4 syntax including oklch() and color(display-p3 ...). Editing one input updates all others in real time.
- Read all format conversions side by side. The tool simultaneously shows hex (most common in CSS), RGB (Figma/Sketch/image pipelines), HSL (CSS and design tokens), and CMYK (print). Hex and RGB are equivalent representations of the same sRGB value; HSL is a different mental model for the same color; CMYK is a separate gamut and the conversion is approximate.
- For accessibility work, lock in your background color first, then sample foreground colors against it. WCAG 2.1 AA requires a 4.5:1 contrast ratio for body text and 3:1 for large text (18pt+ regular or 14pt+ bold); AAA tightens these to 7:1 and 4.5:1. The most common failures are mid-gray on white and light-colored brand colors used directly for text — when in doubt, increase the lightness delta between the two colors.
- When you need a wider gamut for modern displays, use the OKLCH or P3 outputs.
oklch() is perceptually uniform, meaning equal numeric changes in lightness or chroma look equally different to the eye — unlike HSL, where 50% lightness yellow and 50% lightness blue have very different perceived brightness. For HDR/P3 monitors, color(display-p3 ...) unlocks reds and greens that sRGB cannot represent.
- Click any value to copy. For CSS custom property workflows, paste hex into the token (
--primary: #3b82f6) or use HSL with channels split for programmatic shade scales: --primary-h: 217; --primary-s: 91%;, then derive lightness levels with hsl(var(--primary-h) var(--primary-s) 95%) down through 20%.
- To build a full harmony from your selected base color (complementary, analogous, triadic), open it in the Color Palette Generator — that tool rotates the hue mathematically and gives you 5-7 paired swatches without manual color theory work.
Frequently asked questions
What is the difference between hex, RGB, and HSL?
Hex is a six-character hexadecimal code prefixed with # (e.g., #FF5733) and is the most common color format in CSS. RGB defines color by three channels — red, green, and blue — each ranging from 0 to 255 (e.g., rgb(255, 87, 51)). HSL represents color as hue (0-360 degrees on the color wheel), saturation (0-100%), and lightness (0-100%), which makes it much more intuitive for creating darker, lighter, or more muted variations of a base color. All three formats can represent the same colors — they are just different ways of expressing the same information.
When should I use CMYK?
Use CMYK (Cyan, Magenta, Yellow, Key/Black) for anything destined for physical printing — business cards, posters, brochures, packaging, and merchandise. Printers mix these four ink colors to reproduce images on paper, and the CMYK color gamut is narrower than RGB. A color that looks vibrant on screen (like bright neon green) may appear duller in print because CMYK cannot reproduce it exactly. Always convert your colors to CMYK before sending designs to a print shop to avoid unexpected color shifts.
How do I find a color from a website?
Open your browser's Developer Tools by pressing F12 (or right-click any element and select 'Inspect'). In the Styles panel, you will see CSS color values for the selected element. Click on any color swatch in DevTools to open the browser's built-in color picker, or copy the hex code directly. Then paste that value into this tool to convert it to RGB, HSL, or CMYK. For finding colors in images rather than CSS, you can also use the browser's built-in eyedropper tool (available in Chrome and Firefox DevTools).
Is this color picker free?
Yes, completely free with no account or signup required. The tool runs entirely in your browser — no color data is transmitted to any server. You can use it for unlimited color conversions across all your projects, whether personal or commercial.
What is the HSV color model and how is it different from HSL?
HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness) both use a hue angle, but they define brightness differently. In HSV, value=100% means the purest form of the color, while in HSL, lightness=50% is the purest form and 100% is always white. Most color pickers (including Photoshop and this tool) use HSV internally because it maps more intuitively to how we perceive 'adding white' or 'adding black' to a color. CSS uses HSL syntax, so this tool converts between both models automatically.
How do I find colors that meet WCAG accessibility contrast requirements?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18px+ bold or 24px+ regular). Start by selecting your background color in this picker, then test foreground colors against it using an accessibility checker. As a rule of thumb, dark text on light backgrounds (or vice versa) almost always passes. Mid-range colors (like medium gray on white) are the most common accessibility failures. When in doubt, increase the lightness difference between foreground and background.
Can I use this picker for CSS custom properties and design tokens?
Absolutely. Copy any color value from this tool and assign it to a CSS custom property (e.g., --primary: #3B82F6;). HSL format is particularly useful for design token systems because you can create an entire shade scale by holding hue and saturation constant and varying only the lightness value — for example, --primary-50: hsl(217, 91%, 95%) through --primary-900: hsl(217, 91%, 20%).
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.