A color picker is a tool that lets you choose a color and read its value as HEX, RGB and HSL, the three formats computers use to describe color. The picker below reads the color you choose and shows its HEX code, its RGB numbers, and its HSL numbers at once, with a live swatch and a copy button, all computed in your browser.
What a Color Picker Does
A color picker takes a single color and reports it in the formats software can read. A screen builds every color from three lights, red, green, and blue, and a color picker measures how much of each light makes up your chosen color, then expresses that mix as a HEX code, as RGB numbers, and as HSL numbers. The problem it solves is simple: your eye sees a color, but a stylesheet or design file needs that color written as text. The picker does the translation so you can copy the exact value instead of guessing.
How to Use This Color Picker
- Pick a color with the color box, or type a hex value such as #9b59b6 into the text field.
- Read the three formats in the result list: HEX, RGB, and HSL, all describing the color you chose.
- Check the swatch to confirm the color is the one you wanted.
- Press Copy HEX to copy the hex code, then paste it into your stylesheet or design tool.
- Adjust and repeat. The color box and the hex field stay in sync as you change either one.
How HEX, RGB and HSL Relate
All three formats describe the same color, just in different language. RGB lists the three lights directly as numbers from 0 to 255: red, green, then blue. So rgb(155, 89, 182) means 155 of red, 89 of green, and 182 of blue. HEX packs those same three numbers into a six character code, two characters each, written in base 16, with a # in front. That is why #9b59b6 and rgb(155, 89, 182) are the same color: 9b is 155, 59 is 89, and b6 is 182. HSL takes a different route and describes the color by hue (its position on the color wheel from 0 to 360 degrees), saturation (how vivid it is, 0 to 100 percent), and lightness (how light or dark it is, 0 to 100 percent).
When to Use Each Format
Use HEX or RGB for the web. CSS, design apps, and almost every style guide accept both, and HEX is the most common form you will see in a stylesheet because it is short and easy to copy. Reach for HSL when you need to adjust a shade by hand: to make a color lighter you raise the lightness value, to make it more muted you lower the saturation, and to find a matching color you nudge the hue. Doing the same edits in RGB would mean recalculating all three channels at once, which is why designers often switch to HSL for tuning and then copy the HEX back out for the final code.
Related Tools
Build a set of colors that work together from a single base color.
Find the closest named color for any hex code.
Blend two or more colors into a CSS gradient you can copy.
Last Thoughts on Color Formats
Color on a screen is always the same three lights, red, green, and blue, mixed in different amounts. HEX, RGB, and HSL are three ways of writing that mix down: HEX and RGB store the raw amounts, while HSL reframes them so a person can adjust a shade without doing the math. Once you see that they all describe the same color, choosing a format becomes a matter of what you are doing rather than which one is correct.
Pick a color above, copy the format you need, and keep the picker handy for the next time a stylesheet asks for a hex code. For more on the software that uses these formats, see our guide on photo editing software, and explore the rest of our free online tools.
Key Takeaways:
- A color picker turns a chosen color into HEX, RGB, and HSL, the formats software reads.
- HEX and RGB describe the same color through its red, green, and blue amounts; HEX is just those numbers in base 16.
- HSL describes a color by hue, saturation, and lightness, which makes it easier to adjust by hand.
- Use HEX or RGB for web colors, and switch to HSL when you want to lighten, darken, or shift a shade.
- The # marks a hex color in CSS; #9b59b6 and 9b59b6 are the same color, but CSS expects the #.
- This tool runs entirely in your browser, so nothing you pick is uploaded.
Frequently Asked Questions (FAQs)
What is a color picker?
A color picker is a tool that lets you choose a color and read its value in the formats a computer understands. This one shows the same color as a HEX code, as RGB numbers, and as HSL numbers at the same time, so you can copy whichever your project needs.
What is the difference between HEX, RGB and HSL?
All three describe the same color in different ways. HEX is a six character code that packs the red, green, and blue amounts into one string. RGB lists those same three amounts as numbers from 0 to 255. HSL describes the color by hue, saturation, and lightness, which makes it easier to adjust a shade by hand.
How do I convert HEX to RGB?
Split the six character hex code into three pairs, one each for red, green, and blue, then read each pair as a base 16 number from 0 to 255. For example #9b59b6 becomes red 155, green 89, blue 182. This tool does that conversion for you the moment you pick or type a color.
Which color format should I use for the web?
Use HEX or RGB for web colors, since CSS and design tools accept both and HEX is the most common in stylesheets. Reach for HSL when you want to lighten, darken, or shift a color by hand, because changing the lightness or hue value is easier than recalculating three RGB channels.
Does this color picker upload anything?
No. The color you choose and every conversion are computed inside your browser, and nothing is sent to a server. You can use it offline once the page has loaded.
What does the # symbol mean in a color code?
The hash symbol marks the start of a hexadecimal color code in CSS and most design tools. The six characters after it are the color value itself, so #9b59b6 and 9b59b6 refer to the same color, but the # is required where CSS expects a hex color.
