Color Picker — Get HEX, RGB & HSL Codes
Part of Media tools: See all Media tools.
What is Color Picker?
This free online color picker gives you the HEX, RGB and HSL codes for any color you choose. Click the color swatch to open your browser's color dialog, or click Eyedropper (shown in browsers that support it, such as Chrome and Edge on desktop) and click any pixel on your screen. Each code has a Copy button. It all runs in your browser.
How to use Color Picker
- Click the color swatch at the top of the tool to open your browser's color chooser, and pick a color.
- Or click Eyedropper, then click anywhere on your screen (a logo, a photo or another web page) to sample that exact pixel. The button only appears in browsers that support it.
- Read the HEX, RGB and HSL fields, which update straight away.
- Click Copy next to the format you need and paste it into your CSS, design tool or document.
Why use this tool?
Designers, developers and anyone editing a slide deck need exact color values, not “that teal from the logo”. A picker that shows HEX, RGB and HSL side by side, with one-click copy, saves you converting codes by hand. The eyedropper lets you match a color you can see on screen without installing a browser extension.
What you get from this color picker
The tool has three outputs and two ways to choose a color. The outputs are a lowercase six-digit HEX code (#6366f1), an RGB value (rgb(99, 102, 241)) and an HSL value (hsl(239, 84%, 67%)). You can paste all three straight into CSS. To choose a color, use the swatch, which opens your browser's built-in color chooser, or the Eyedropper button, which samples any pixel on your screen in browsers that support it. Every field has a Copy button.
Here are a few values the tool returns, so you know what to expect:
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Teal | #0d9488 | rgb(13, 148, 136) | hsl(175, 84%, 32%) |
| Pure red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Indigo (starting color) | #6366f1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) |
HEX, RGB and HSL explained
RGB is how a screen makes color. Each pixel mixes red, green and blue light, and each channel runs from 0 (off) to 255 (full). rgb(13, 148, 136) is a little red, a lot of green and a lot of blue, which gives a teal.
HEX is RGB written in base 16. Split #0d9488 into pairs: 0d = 13, 94 = 148, 88 = 136. To convert a pair by hand, multiply the first digit by 16 and add the second, where a=10, b=11 and so on up to f=15. For example, 9 × 16 + 4 = 148. HEX is compact, which is why style guides and design tools use it.
HSL stands for hue, saturation and lightness. Hue is the angle on a color wheel: 0 is red, 120 green and 240 blue. Saturation runs from grey (0%) to fully vivid (100%), and lightness from black (0%) to white (100%). HSL is the easiest format to adjust by hand. To make a lighter tint of a brand color, keep the hue and saturation and raise the lightness. To make a muted version, lower the saturation. The tool rounds HSL to whole numbers, so converting HSL back to HEX can be off by one step in a channel. Copy the HEX code when you need an exact match.
Using the eyedropper to match a color
The Eyedropper button uses the browser's EyeDropper feature, available in Chrome and Edge on desktop. Click it and the pointer becomes a magnifier. Click any pixel on your screen, in this tab, in another window or in another app, and the swatch and all three codes switch to that color. Press Escape to cancel. Some practical uses:
- Match a logo color. Open the logo file at 100% zoom and sample a flat area of solid color, not an edge. Edges are blended with the background, so they give an in-between color.
- Copy a color from a website. Open the page in another tab, zoom in if the element is small, and click it.
- Check a photo. Photos contain noise, so neighbouring pixels can differ by a few values. Sample a couple of spots and pick the one that looks right.
The eyedropper reads the color as your screen shows it. If the source image uses a wide-gamut color profile or your display is color-managed, the sampled value can differ slightly from the number stored in the original design file. If you have the brand guidelines, use the official values.
Choosing readable color combinations
This tool does not calculate contrast, but it is worth knowing the rule. The Web Content Accessibility Guidelines (WCAG 2.x) ask for a contrast ratio of at least 4.5:1 between normal body text and its background, and at least 3:1 for large text (about 24 px, or 18.66 px bold). Pale grey text on white, or a mid-tone brand color behind white text, often fails. Copy your two HEX codes from this picker into a contrast checker before you publish. Do not rely on color alone to carry meaning, such as red for an error and green for success. Add a label or an icon too.
Using the codes in CSS and design tools
All three outputs are valid CSS: color: #0d9488;, color: rgb(13, 148, 136); and color: hsl(175, 84%, 32%); look the same. Most design tools, slide editors and office apps accept a HEX code in their color dialog. Three-digit HEX shorthand such as #abc means #aabbcc, and eight-digit HEX adds transparency. This tool always gives the six-digit form, without transparency.
Limits and privacy
The picker works in the sRGB color space that browsers use. It does not give CMYK or Pantone values, so for print work, ask your printer for a proof. There is no palette history, so copy the codes you need before you leave the page. Every conversion runs in your browser, and no color you pick is sent to our server.
If you are preparing images for a site in your new colors, the Image Resizer and Image Compressor are useful next steps. To put a link on a printed flyer, try the QR Code Generator.
Frequently asked questions
- How do I get the color code from an image?
- Open the image on your screen, in another tab or in any app. Then click Eyedropper here and click the pixel you want. The HEX, RGB and HSL fields fill in with that color. The Eyedropper button is only shown in browsers that support it, currently Chrome and Edge on desktop.
- What is the difference between HEX, RGB and HSL?
- They describe the same screen color in different ways. RGB gives red, green and blue amounts from 0 to 255. HEX writes those same three numbers in hexadecimal, for example #0d9488. HSL describes hue (0–360 degrees), saturation and lightness, which is easier for making a color lighter or darker.
- Can I type in a HEX code to convert it?
- The HEX, RGB and HSL fields here are read-only. Instead, type the value in the color dialog that opens from the swatch. In Chrome and Edge on Windows it has HEX and RGB fields, and on a Mac the system color panel's sliders view accepts a hex value. The tool then shows all three formats.
- Why is there no Eyedropper button?
- The button uses the browser EyeDropper feature, which Firefox and Safari do not offer at the moment. In those browsers, use the color swatch instead. Some operating system color dialogs also have their own eyedropper.
- Does it check color contrast or give CMYK values?
- No. This tool shows HEX, RGB and HSL only. It does not calculate contrast ratios, CMYK print values or palettes.
- Is anything uploaded?
- No. The conversion is done by JavaScript in your browser, and the colors you pick are not sent to our server.
Step-by-step guides
Also try
Related tools that work well with this one: