If you have ever worked with colors online, you have probably seen codes like #6C5CE7, rgb(108, 92, 231), or hsl(247, 72%, 63%). They all describe the same color — but in very different languages.
This guide explains what each format means, in plain terms, so you can use them with confidence.
HEX: The web color shorthand
HEX (short for hexadecimal) is the most common format for colors on the web. It looks like this:
HEX is compact and easy to copy. It is the default format most design tools show when you select a color. The # symbol simply tells the browser it is a HEX color.
RGB: The color of light
RGB stands for Red, Green, Blue. It describes a color by telling exactly how much red, green, and blue light to mix together.
RGB comes from the world of screens and light. If you have ever mixed paint, think of it differently: adding more of each color makes the result brighter, not darker. Pure white is rgb(255, 255, 255) — all lights at full. Pure black is rgb(0, 0, 0) — all lights off.
HSL: The color of the human eye
HSL stands for Hue, Saturation, Lightness. This format was designed to match how humans naturally think about color.
HSL is the easiest format to adjust by hand. Want a lighter version of a color? Increase the last number. Want a more muted tone? Decrease the middle number. It maps directly to the words designers and artists use every day.
When to use which format
- HEX — Copy and paste into design tools, CSS, or anywhere you need a quick, compact color value. This is the most common format on the web.
- RGB — Useful when you are working programmatically, for example when building CSS with JavaScript, or setting colors in image processing.
- HSL — The best choice when you need to adjust or animate colors. Changing the lightness or saturation in HSL is much more intuitive than in RGB.
They are all the same color
Here is the same purple shown in all three formats:
Quick conversion tools
PhotoColor provides free tools to convert between all three formats instantly. No math required — just enter a color value and get the equivalent in the other formats.