Free online color picker
This color picker lets you choose any colour and instantly get its codes in every common format: HEX, RGB, HSL and CMYK. Use the colour wheel, type a code you already have, or upload a photo and click it – the color picker from image reads the exact pixel. Every field stays in sync, so changing the HEX code updates RGB, HSL and CMYK at the same moment, and each value has a copy button.
Below the swatch you also get tints and shades, complementary, analogous and triadic palettes, and a WCAG contrast check against white and black text. It is a free color picker tool for web designers, developers, students and anyone matching a brand colour, a paint shade or a colour seen on a website.
How to use the color picker
- Choose a colour with the colour box. On most devices it opens your system colour wheel or palette.
- Or type a value in any field – for example
#ff8800,rgb(255, 136, 0),hsl(32, 100%, 50%)orcmyk(0%, 47%, 100%, 0%). Invalid input shows a short hint and nothing else changes. - Or pick from an image: upload a JPG, PNG or screenshot, then click the pixel you want. You can also focus the image and use the arrow keys, pressing Enter to pick. The image stays on your device; nothing is uploaded to a server.
- In Chrome and Edge an extra eyedropper button appears, so you can use the color picker from screen – any pixel on your display, including another website.
- Press Copy next to the code you need, or click a palette swatch to make it the active colour.
What is a color picker tool?
A color picker is a tool that lets you select a colour visually and tells you the numbers that describe it. Design programs such as Photoshop, Illustrator, Canva, PowerPoint, Word and MS Paint all include one, usually as a colour wheel or square plus an eyedropper for sampling colours from a picture. An online color picker like this one does the same in your browser with no download, and adds conversions and accessibility checks that many built-in pickers leave out.
Colour codes explained: HEX, RGB, HSL and CMYK
HEX color codes
A HEX code is how colours are written in HTML and CSS: a hash sign followed by six hexadecimal digits, two each for red, green and blue. Each pair runs from 00 (0) to ff (255). So #ff0000 is pure red, #ffffff white and #000000 black. A three-digit short form doubles each digit: #f80 equals #ff8800. This colour picker with hex code support accepts both forms.
RGB colour
RGB describes a colour as amounts of red, green and blue light, each from 0 to 255 – the way screens actually create colour. rgb(59, 51, 230) has a little red and green and a lot of blue, giving a strong indigo. Web designers use RGBA to add an alpha (opacity) value from 0 to 1, as in rgba(59, 51, 230, 0.5) for 50% transparency.
HSL and HSV
HSL stands for hue, saturation and lightness, and is the easiest model for people to adjust by hand. Hue is the position on the colour wheel in degrees (0° red, 120° green, 240° blue), saturation is how vivid it is, and lightness runs from black (0%) to white (100%). HSV (or HSB), used by the Photoshop color picker, swaps lightness for “value” or brightness; it describes the same colours with different numbers.
CMYK for print
CMYK – cyan, magenta, yellow and key (black) – is the ink model printers use. The formula this tool uses is the standard device-independent one:
K = 1 − max(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K) · M = (1 − G′ − K) ÷ (1 − K) · Y = (1 − B′ − K) ÷ (1 − K)
where R′, G′ and B′ are the RGB values divided by 255. Real printing uses colour profiles, so ask your printer for exact values on important brand work.
Worked example
Take the HEX code #3b33e6. Splitting it gives 3b = 59, 33 = 51 and e6 = 230, so RGB is (59, 51, 230). The largest channel is 230 ÷ 255 = 0.902, so K = 9.8%, C = (1 − 0.231 − 0.098) ÷ 0.902 ≈ 74%, M ≈ 78% and Y = 0%. In HSL the hue is about 243°, saturation 78% and lightness 55%. Enter the code in the color picker above and you will see exactly these values.
| Colour | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Yellow | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% |
| Brown | #8B4513 | 139, 69, 19 | 25°, 76%, 31% |
| Green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| Navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
| Grey | #808080 | 128, 128, 128 | 0°, 0%, 50% |
Colour theory: building a palette
The palette rows turn one colour into a small scheme, working like a simple colour formula generator based on the colour wheel:
- Tints and shades mix the colour with white or black in 16% steps – handy for hover states, backgrounds and borders in UI design.
- Complementary colours sit opposite each other (hue + 180°) and give the strongest contrast, good for a call-to-action button.
- Analogous colours are neighbours (±30°) and feel calm and harmonious.
- Triadic colours are spaced 120° apart and give a balanced, lively palette.
For a CSS linear gradient, take two analogous colours and write background: linear-gradient(90deg, #3b33e6, #8f33e6);.
Contrast and accessibility (WCAG)
A colour that looks good can still be hard to read. The Web Content Accessibility Guidelines (WCAG 2) measure the contrast ratio between text and background from 1:1 (identical) to 21:1 (black on white). Level AA needs at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold); level AAA needs 7:1 for normal text and 4.5:1 for large text. The contrast table above tests your colour against white and black text and tells you which passes, so you can pick a readable combination before you ship a button or banner.
Colour pickers in other apps
How to find the color picker in Canva, Word and PowerPoint
In Canva, select an element, click the colour tile in the toolbar and choose “+” to open the picker, where you can paste a HEX code or use the eyedropper. In Word and PowerPoint, open Font Color or Shape Fill, then More Colors to enter RGB or HEX values; PowerPoint also has an Eyedropper option. In Photoshop, click the foreground colour swatch to open the color picker, or press I for the eyedropper.
Color picker shortcut on Windows and Mac
On Windows, Microsoft PowerToys includes a system-wide color picker opened with Win + Shift + C. On a Mac, the built-in Digital Color Meter app shows the colour under the pointer. In Chrome DevTools, click any colour value in the Styles panel to get a picker with an eyedropper.
Color picker in HTML and JavaScript
To add a color picker to your own website, HTML has one built in: <input type="color" value="#3b33e6">. Read its value in JS – it is always a lowercase six-digit HEX string – and convert it with the formulas on this page.
Color picker chrome extension or a web page?
A color picker chrome extension such as ColorZilla adds an eyedropper to the browser toolbar, which is handy if you grab colours from websites every day. If you only need a code now and then, this page does the same job without installing anything: take a screenshot, upload it here and pick the colour straight from the image. ColorZilla also exists for Firefox, and Chrome itself has a color picker in DevTools.
Color picker eyedropper extension vs the built-in EyeDropper
Many a color picker eyedropper extension is now optional, because Chrome and Edge ship an EyeDropper API that lets web pages sample any pixel on your screen after you click. Whether you use an extension or a screenshot, the result is the same HEX value, so paste it into the HEX field above to see RGB, HSL, CMYK, shades and contrast.
Color picker example: one colour, every format
Here is a color picker example using the default colour on this page:
| Format | Value |
|---|---|
| HEX | #3b33e6 |
| RGB | rgb(59, 51, 230) |
| RGBA at 50% opacity | rgba(59, 51, 230, 0.5) |
| 8-digit HEX at 50% opacity | #3b33e680 |
Color picker with opacity (RGBA)
This tool gives solid colours, but adding transparency is simple. A color picker rgba value is just the RGB numbers plus an alpha from 0 (invisible) to 1 (solid), so rgb(59, 51, 230) becomes rgba(59, 51, 230, 0.5) at half opacity. In HEX, append two more digits: alpha 0.5 × 255 ≈ 128 = 80 in hex, giving #3b33e680. Any color picker with opacity in design apps is doing exactly this.
Color picker with name: finding a colour's name
This picker shows codes rather than names, so a color picker with name lookup needs one extra step: CSS defines 140 named colours (like royalblue #4169e1 or goldenrod #daa520), and a colour is usually described by the nearest one. To get a color picker name from image, pick the pixel here first, then compare the HEX with a named-colour list and choose the closest match by hue and lightness.
Popular colours: brown and yellow codes
Color picker brown shades
Browns are dark, low-saturation oranges. Useful starting points for a color picker brown search are #8b4513 (saddle brown), #a0522d (sienna), #d2691e (chocolate) and #5c4033 (dark brown). Type any of them in the HEX field and use the shades row to go darker.
Color picker yellow shades
Yellow sits at a hue of about 50–60°. Common color picker yellow values are #ffff00 (pure yellow), #ffd700 (gold), #ffe04a (a warm sunflower) and #fff8c4 (pale cream yellow). Yellow is very light, so check the contrast table: black text passes on yellow, white text almost never does.
Color picker app and desktop tools
You do not need a separate color picker app on a phone or PC: this page runs in any browser, including mobile, and the image upload works with photos from your gallery. If you prefer a desktop tool, these are built in or free:
- Color picker vscode: in Visual Studio Code, hover over any CSS colour value and a colour swatch opens a picker where you can switch between HEX, RGB and HSL.
- Color picker krita: in Krita, hold Ctrl and click the canvas to sample a colour, or use the Advanced Color Selector docker.
- Color picker linux: on Linux, GIMP's colour picker tool (key O) or a small app like Gpick samples colours anywhere on screen; this also works on an XFCE color picker setup, since Xfce has no eyedropper of its own.
Color picker UI: how pickers are designed
A typical color picker UI combines a hue slider, a saturation–brightness square, a HEX field and an eyedropper. The browser's native control used above follows the same pattern. If you build your own, keep text inputs for HEX and RGB so people can paste exact values, and show a large swatch so the chosen colour is obvious.
Color picker js snippet
A minimal color picker js example: const el = document.querySelector('input[type=color]'); el.addEventListener('input', () => console.log(el.value)); logs the HEX string every time the user drags the picker. Convert it to RGB with parseInt(hex.slice(1, 3), 16) for red, and the same for green and blue.
Color picker game and quiz ideas
You can turn this page into a color picker game: one person picks a colour and reads out its HEX code, and the others guess which colour it is before the swatch is revealed. For a color picker quiz, show a swatch and ask for the closest RGB values; scoring by the difference in each channel shows how well you judge colour.
Frequently asked questions
How do I pick a colour from an image?
Upload the image with the “Pick a colour from an image” field, then click the pixel you want. The HEX, RGB, HSL and CMYK codes appear immediately. The image is processed in your browser and is not uploaded anywhere.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal to decimal. For #3b33e6, 3b = 59, 33 = 51 and e6 = 230, so the RGB value is rgb(59, 51, 230).
What is the difference between RGB and CMYK?
RGB mixes red, green and blue light and is used for screens. CMYK mixes cyan, magenta, yellow and black ink and is used for printing. Some bright RGB colours cannot be printed exactly in CMYK.
What is a good contrast ratio for text?
WCAG level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 for normal text. The contrast table in this tool shows the ratio for white and black text on your colour.
Can I pick a colour from my screen or another website?
Yes, in Chrome and Edge. An eyedropper button appears that lets you pick any pixel on your screen. In other browsers, take a screenshot and use the pick-from-image option.
What is HSL and HSV in a color picker?
Both describe colour by hue on the colour wheel plus two other values. HSL uses saturation and lightness; HSV (or HSB) uses saturation and value (brightness). They describe the same colours with different numbers.
Is this color picker free?
Yes. The color picker is free, needs no download or extension, and works on phones and computers.
Is there a color picker chrome extension I need to install?
No. This page works without an extension: pick a colour directly or upload a screenshot to sample any pixel. Extensions like ColorZilla are only useful if you sample colours from web pages constantly.
How do I add opacity to a colour from the color picker?
Use rgba(): take the RGB values and add an alpha between 0 and 1, for example rgba(59, 51, 230, 0.5). In HEX, add two digits for alpha, such as #3b33e680 for 50% opacity.
Can the color picker tell me the name of a colour?
It shows HEX, RGB, HSL and CMYK codes. To name a colour, compare its HEX with the 140 CSS named colours and pick the nearest one.
Last updated 2026-09-18