Understanding Color Formats: HEX, RGB, and HSL

When designing a website or building an app, you've likely had to define colors. You might have seen #FF5733, rgb(255, 87, 51), or hsl(10, 100%, 60%).

These all represent the exact same color (a vibrant red-orange), but they do it in very different ways.

🔴 RGB (Red, Green, Blue)

This is how screens actually work. Every pixel on your monitor has a tiny red, green, and blue light. By mixing these lights at different intensities (from 0 to 255), you get millions of colors.

• rgb(255, 255, 255) is pure white (all lights on full blast).
• rgb(0, 0, 0) is pure black (all lights off).

🔢 HEX (Hexadecimal)

A HEX code is literally just an RGB value written in Base16 (hexadecimal) math instead of Base10 (decimal).

• FF in hex = 255 in decimal (Red)
• 57 in hex = 87 in decimal (Green)
• 33 in hex = 51 in decimal (Blue)

HEX is the most common format on the web because it's short and easy to copy-paste.

🌈 HSL (Hue, Saturation, Lightness)

While RGB and HEX are great for computers, they are terrible for humans. If you have a blue HEX code and want to make it slightly darker, you have to do complex math.

HSL was designed for humans:

• Hue (0-360): The color on the color wheel (0 is red, 120 is green, 240 is blue).
• Saturation (0-100%): How vibrant the color is.
• Lightness (0-100%): How bright the color is (50% is normal, 100% is white, 0% is black).

To make an HSL color darker, you literally just lower the Lightness percentage!

Need to convert between these formats? Try our instant color converter below.