How to Convert HEX, RGB, and HSL Color Codes
As a developer, I live in a world of color codes. Whether I'm styling a website, designing a UI, or just trying to match a specific brand color, I'm constantly switching between different color formats. I built this converter to be the fast, simple tool I always need—a quick way to translate between the three most common formats on the web: HEX, RGB, and HSL.
HEX, RGB, and HSL: What Is the Difference?
HEX (Hexadecimal)
This is the most common format you'll see in web design and CSS. It's a six-digit code preceded by a hash symbol. The code represents the intensity of Red, Green, and Blue, with each pair of characters corresponding to one color.
#RRGGBB
For example, #3F51B5 is a dark blue where '3F' is the red value, '51' is green, and 'B5' is blue. It's compact and universally supported.
RGB (Red, Green, Blue)
This is the additive color model that computers and screens use to produce colors. It's defined by three values, each ranging from 0 to 255, representing the intensity of red, green, and blue. An optional fourth value, 'alpha' (rgba), can be used to control transparency.
rgb(red, green, blue)
For example, our same dark blue is rgb(63, 81, 181). This format is very intuitive for understanding the makeup of a color.
HSL (Hue, Saturation, Lightness)
HSL is often considered the most human-readable color format. It was designed to align more closely with how we perceive color.
- Hue: The type of color, represented as an angle on the color wheel (0 to 360 degrees). 0 is red, 120 is green, and 240 is blue.
- Saturation: The intensity of the color, from 0% (gray) to 100% (full color).
- Lightness: The brightness of the color, from 0% (black) to 100% (white). 50% is the "normal" lightness.
For example, our dark blue is hsl(231, 48%, 48%). HSL is incredibly useful for creating color variations. For instance, to create a lighter shade of a color for a button's hover state, you can simply increase the lightness value.