HEX vs. RGB vs. HSL: which format should you use?

You have a color value in front of you, but it looks different from the format your design tool or web page expects. HEX, RGB, and HSL can all describe the same color. The best format depends on what you need to do with it.

Use the Color Picker to select a color on your screen and see its HEX, RGB, HSL, and other values together. It works best in Chrome or Edge on a computer. Other browsers may offer fewer features or none.

Pick a color and compare its formats

1. Open the Color Picker in Chrome or Edge on a computer.
2. Follow the browser's prompt to select the screen or window that contains the color you want to inspect.
3. Point to the color on screen. Choose a flat area, not a letter edge, shadow, or gradient, if you want a value that represents the main color.
4. Read the HEX, RGB, and HSL values shown for the selected color. Copy the format your project needs.

If the color picker is unavailable in your browser, try Chrome or Edge on a computer. A phone browser may not let a web page sample colors from across the screen.

What each format means

HEX is compact and common in web design

HEX represents color with six hexadecimal digits, usually written with a leading number sign. For example, #3A7BD5 describes a blue color. The first pair represents red, the second green, and the third blue. Each pair runs from 00 to FF, which corresponds to channel values from 0 to 255.

HEX is a good choice when you need a short value to paste into CSS, a website theme, or a design tool that asks for a hex color. It is compact and easy to share, but the digits are not especially readable as a description of the color. Looking at #3A7BD5 does not immediately tell most people how much red, green, or blue it contains.

RGB shows the red, green, and blue amounts

RGB stands for red, green, and blue. A value such as rgb(58, 123, 213) gives the amount of each channel on a scale from 0 to 255. A value of 0 means none of that channel, and 255 means its maximum. The example describes the same blue as #3A7BD5.

RGB is useful when software or code asks for separate red, green, and blue numbers. It can also help when you need to compare channel amounts or work with a device that uses RGB values. The numbers are more explicit than HEX, but it can take a little arithmetic to adjust the color predictably.

HSL is convenient for adjusting a color

HSL means hue, saturation, and lightness. Hue describes the basic color around a color wheel, measured in degrees from 0 to 360. Saturation describes how vivid or muted the color is, and lightness describes how dark or bright it is. Both saturation and lightness are percentages.

The example blue is approximately hsl(213, 65%, 53%). HSL can be easier to adjust by eye than RGB. To make a color paler, increase lightness. To make it less vivid, lower saturation. Change hue to move it toward another color, such as purple or green. HSL is useful for CSS and design work when you want to create related shades from one base color.

Which format should you use?

• Use HEX for a quick web color value. It is a practical default for CSS and many design apps. Pick it when a field asks for a hex code or when you want to send someone a compact color value.
• Use RGB when a tool asks for channel numbers. It makes the red, green, and blue components visible, and fits workflows that work with separate color channels.
• Use HSL when you want to adjust or build shades. Its hue, saturation, and lightness controls make it easier to keep a color family consistent while changing brightness or vividness.
• Use the format your destination requires. A print shop, design app, website editor, or code snippet may specify a particular format. If it does, use that format rather than converting by hand.

For example, if a website style guide gives you a brand blue in HEX, keep that value as the reference. If you need a lighter background shade for a card, use HSL to increase lightness, then check the result in your design. If a program asks for red, green, and blue numbers, use the RGB values instead.

These formats describe color in different ways, but they do not make it more or less accurate on their own. HEX and RGB are two ways to express the same red, green, and blue channel values. HSL is another representation of those color components, organized to make certain adjustments easier.

Why a sampled color may look different

A screen pixel can contain a blend of colors, especially near text, icons, and curved edges. A pointer placed on an anti-aliased edge may sample a mixed pixel rather than the design's original color. For a more representative value, pick a large, solid part of the object. On a gradient or photograph, the color can naturally change from one point to another.

Colors can also look different between screens because of brightness, display settings, and color profiles. A HEX or RGB value describes the color code, not exactly how every monitor or printer will show it. When matching a design, compare the value in the same app and on the same display where the final work will be viewed.

When you are unsure which value to copy, keep the original format and use HSL only when you need to adjust the color by lightness or saturation.