RGB, HSL and HEX: Color Models Explained

HEX, RGB and HSL are three ways to write the same color; they differ in how easy they make it to read and adjust. #4F46E5, rgb(79, 70, 229) and hsl(245, 76%, 59%) are all the same purple.

The three models

• HEX — compact six-digit code, common in CSS and design tools
• RGB — red, green and blue channels from 0 to 255; matches how screens emit light
• HSL — hue, saturation and lightness; matches how people think about color

Why HSL is handy

HSL makes intuitive edits easy: change hue to shift the color around the wheel, raise lightness for a tint, lower it for a shade, or drop saturation toward grey. Doing the same in RGB means juggling three numbers at once.

Adding transparency

RGB and HSL gain an alpha channel as rgba() and hsla(), and HEX can add two digits (#RRGGBBAA) for opacity.

Convert now

Switch any color between HEX, RGB and HSL with the color converter. Building a scheme? See How to create a color palette.