Color Picker
Drag on the canvas and sliders, or type into any code field — every format, shade and harmony updates instantly.
Everything runs locally in your browser — colors are never uploaded.
How it works
- Drag the marker on the large canvas to set saturation and brightness, then move the hue and alpha sliders below it.
- Read or edit the color in any format — HEX, RGB, HSL, HSV or CMYK — and click Copy next to the one you need.
- Click a shade, tint or harmony swatch to jump to that color; your recent picks stay in the history row for this session.
Frequently asked questions
- How do I pick a color from anywhere on my screen?
- Click the Pick from screen button and your cursor becomes an eyedropper that can sample any pixel — from other browser tabs, images or even other applications. The button uses the EyeDropper API, which is currently available in Chromium browsers such as Chrome and Edge; on Safari and Firefox the button is hidden and you can still pick colors with the canvas and sliders.
- What is the difference between HSL and HSV?
- Both describe a color by hue plus two other axes, but they scale differently. In HSV (also called HSB), value is the brightness of the color itself, so pure red is v = 100. In HSL, lightness runs from black through the pure color to white, so pure red sits at l = 50. Design tools like Photoshop typically use HSV pickers, while CSS uses HSL, which is why this tool shows both.
- How accurate is the CMYK value?
- The CMYK shown is a standard mathematical conversion from RGB, which is what most design software displays by default. Real print output additionally depends on the ICC profile, paper and press, so treat the value as a close starting point and let your print shop or a color-managed application do the final profile conversion.
- What do the shades and tints strips do?
- Shades mix your current color with black in ten even steps, and tints mix it with white. This is a quick way to build hover states, borders and backgrounds that stay in the same hue family instead of drifting toward gray. Click any step to make it the active color, then copy its code from the fields above.
- Is anything I pick sent to a server?
- No. The canvas, sliders, conversions and history all run as plain JavaScript on your device, and the page makes no network requests while you work. Colors sampled with the screen eyedropper are also processed locally, and the session history disappears when you close the tab.
About this tool
This color picker is built around the same control layout used in professional design tools: a large two-dimensional canvas where horizontal position sets saturation and vertical position sets brightness, with a hue slider and an alpha slider underneath. As you drag, the output panel rewrites the color in five notations at once — HEX with optional alpha, RGB(A), HSL(A), HSV and CMYK — and every one of those fields is editable, so you can just as easily paste rgb(34, 139, 230) or a shorthand hex code and watch the canvas jump to it.
Everything happens locally in your browser. The canvas gradients are drawn with the HTML5 canvas API, conversions between color models are plain arithmetic, and no color you pick or type is ever transmitted anywhere. In Chromium-based browsers a Pick from screen button appears, powered by the EyeDropper API, which lets you sample a pixel from anywhere on your display — handy for grabbing a color out of a screenshot, a competitor’s site or a video frame without taking a screenshot first.
Below the main controls the tool generates ten-step shades and tints of the current color, plus its complementary and triadic harmonies, all clickable. This turns the page into a small palette workbench: pick a brand color, click through its tints to find a background, check the complementary for an accent, and copy each code as you go. Every color you settle on is added to a session history row so you can flip between candidates without retyping anything.
A practical tip for interface work: choose your base color on the canvas, then take text and border colors from the shades strip rather than darkening the hex by eye. Steps from the same strip share an exact hue, which keeps a UI looking deliberate — and because the fields sync both ways, you can fine-tune any candidate numerically before copying it out.