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 anywhere on the color wheel or gradient area to select a color visually. The picker uses the HSV (Hue-Saturation-Value) model internally — the outer ring controls hue (the base color), while the inner square controls saturation (color intensity) and brightness. This is the same color model used by Photoshop, Figma, and most professional design tools.
- Alternatively, type a hex code (e.g., #3B82F6), RGB values (e.g., 59, 130, 246), or HSL values (e.g., 217, 91%, 60%) directly into the input fields. The tool accepts all standard CSS color formats and converts between them instantly. This is useful when you already have a specific color from a style guide or brand document.
- View all format conversions update in real time as you adjust the color. The tool simultaneously shows hex, RGB, HSL, and CMYK values so you can grab whichever format your project requires. Hex and RGB are standard for web development, HSL is preferred for programmatic color manipulation, and CMYK is essential for print design work.
- Click any color value to copy it directly to your clipboard, ready to paste into CSS, Figma, Sketch, or any design tool. The copied format matches exactly what you see — no reformatting needed. For building full color schemes from your selected color, try the Color Palette Generator.
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.