An online color picker with every code you need
The Color Picker is a precise colour selector that runs in your browser. Drag across the saturation–brightness square, slide the hue and opacity bars, or type any CSS colour, and every common code updates instantly: HEX, RGB(A), HSL(A), HSV, CMYK, OKLCH and a ready-to-paste CSS variable.
It is made for web designers, front-end developers, students and anyone matching a brand colour. Each value has its own copy button, the nearest CSS colour name is shown, and two contrast readings tell you straight away whether the colour is readable on a white or a black background.
It works with a mouse, pen, finger or keyboard, and in Chrome and Edge on desktop you can sample any pixel on screen with the eyedropper. Nothing is uploaded.
How to use the Color Picker
- Drag the ring inside the large square: left to right sets saturation, top to bottom sets brightness. On a phone, drag with your finger; with a keyboard, focus the square and use the arrow keys.
- Move the Hue slider to change the base colour and the Opacity slider to add transparency.
- Or type into “Type or paste a colour” — for example
#1E90FF,rgb(30 144 255),hsl(210 100% 56%)ordodgerblue. The small square beside it opens your system picker, and “Pick from screen” samples a pixel anywhere on your display. - Press the copy button next to the format you need: HEX, RGB, HSL, HSV, CMYK, OKLCH, the CSS variable or the colour name.
- Check the two contrast readings, and tap any swatch under “Recent colours” to go back to an earlier pick.
Color Picker features
A picker that works on any device
The saturation/brightness area uses pointer events, so mouse, pen and touch all drag smoothly. Arrow keys nudge by 1% and Shift + arrow by 10%.
Seven formats, one tap each
HEX (8-digit when the colour is transparent), RGB/RGBA, HSL/HSLA, HSV, CMYK, OKLCH and a CSS custom property — all derived from the same 8-bit colour, so they always agree.
Screen eyedropper
Where the browser supports the EyeDropper API, “Pick from screen” lets you sample any pixel, even outside the browser window.
Nearest colour name
Every colour is matched against the 148 CSS named colours using perceptual OKLab distance, so you can see that #FF6347 is exactly “tomato”.
Instant readability check
The WCAG 2 contrast ratio against white and against black is shown with a plain-word verdict, not just a colour.
Recent colours on your device
Your last 16 colours are kept in local storage only; clear them with one click.
Colour formats explained
Every format below describes the same sRGB colour — here, CSS “tomato”. Pick the one your software or code expects.
| Format | Example | Typical use |
|---|---|---|
| HEX | #FF6347 | CSS, design tools, brand guidelines |
| HEX with alpha | #FF634780 | CSS in all modern browsers (last two digits = opacity) |
| RGB / RGBA | rgb(255, 99, 71) | CSS and code that works with 0–255 channels |
| HSL / HSLA | hsl(9, 100%, 64%) | Making lighter or darker variants by hand |
| HSV / HSB | hsv(9, 72%, 100%) | Pickers in Photoshop, Figma and painting apps |
| CMYK | cmyk(0%, 61%, 72%, 0%) | A rough first guess for print |
| OKLCH | oklch(69.62% 0.1955 32.32) | Modern CSS and perceptually even palettes |
Why the picker square uses HSV
The big square is an HSV (hue, saturation, value) plane, the model used by most design apps. Inside it, the horizontal position is saturation and the vertical position is value, also called brightness: the top-right corner is the pure hue, the top-left corner is white and the whole bottom edge is black.
HSL describes the same colours differently. Its lightness of 100% is always white and 50% is the most vivid version of the hue, which makes HSL handy for writing CSS by hand. Neither model is perceptually even, though: yellow at HSL lightness 50% looks far brighter than blue at 50%. OKLCH, based on Björn Ottosson’s OKLab model, fixes that, so two colours with the same OKLCH lightness really do look about equally light.
Tips for choosing colours that work
- Check readability early. Normal body text needs a contrast ratio of at least 4.5:1 with its background under WCAG 2 level AA. Test any pair of colours in the Contrast Checker.
- Build a complete scale from one brand colour with the Color Shades Generator rather than guessing lighter and darker versions.
- Turn a single colour into a scheme — complementary, triadic, analogous and more — with the Color Palette Generator.
- Need the exact colour of a logo or a photo? Drop the image into the Color Picker from Image.
- Treat CMYK values as a starting point only. Real print colour depends on ink, paper and the printer’s ICC profile.
Color Picker FAQ
How do I get a HEX code from this color picker?
Drag in the square and along the hue slider until you like the colour, then press the copy button next to HEX. You can also paste any colour into the text box to convert it. HEX codes are shown in capitals, such as #8C6BFF; CSS accepts upper or lower case.
Why don’t I see the “Pick from screen” button?
It uses the browser’s EyeDropper API, which Chromium-based desktop browsers such as Chrome and Edge support. Safari, Firefox and mobile browsers don’t offer it yet, so the button is hidden there. Use the system picker square, or upload a screenshot to the Color Picker from Image.
What is the difference between RGB and HEX?
There is no difference in the colour itself. Both store red, green and blue values from 0 to 255; HEX simply writes each value as two hexadecimal digits, so 255 becomes FF and rgb(255, 99, 71) becomes #FF6347.
What is OKLCH and should I use it?
OKLCH describes a colour by perceived lightness, chroma (colourfulness) and hue. It is part of CSS Color Level 4 and has worked in all major browsers since 2023. It is ideal for building palettes and hover states, because changing only the lightness keeps the colour looking like the same hue.
Why does the CMYK value differ from my printer software?
This tool uses the standard naive formula that converts screen RGB to cyan, magenta, yellow and black without any colour profile. Professional print software converts through an ICC profile for a specific press and paper, so its numbers will differ. Ask your printer which profile to use for final artwork.
Are my colours saved or uploaded?
No colour ever leaves your device. The “Recent colours” list is stored in your browser’s local storage so it survives a page reload, and the Clear button deletes it.