Color Format Explorer

Understand how colors are represented in different formats. Explore HEX, RGB, and HSL color models with interactive visualization.

Color Preview

HEXHexadecimal
RGBRed, Green, Blue
HSLHue, Saturation, Lightness

RGB Sliders

Red99
Green102
Blue241

Channel Breakdown

99
Red Channel
39%
102
Green Channel
40%
241
Blue Channel
95%

Color Formats Explained

HEX (Hexadecimal)

A 6-digit code where each pair represents Red, Green, Blue (00-FF). Compact and widely used in web design.

#FF5733 = R:255, G:87, B:51

RGB (Red, Green, Blue)

Three values 0-255 representing light intensity. Matches how monitors create colors by mixing light.

rgb(255, 87, 51)

HSL (Hue, Sat, Light)

H: color wheel position (0-360°), S: color intensity (0-100%), L: brightness (0-100%). Most intuitive for humans.

hsl(11, 100%, 60%)

Try These Colors

How to Read the Results

When you change the color through any input method, all other formats will update automatically. The visualizations help you understand how colors are composed of different channels.

  • HEX format: 6-digit code representing RGB values in hexadecimal
  • RGB format: Three values for Red, Green, and Blue channels (0-255)
  • HSL format: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)

Limitations & Considerations

Color spaces. Colors may appear differently on various screens and devices.

Web compatibility. Some older browsers may not support all color formats.

Color depth. Not all color formats support the same range of colors.