HEX, RGB, HSL: A Complete Guide to Color Formats
Understand the differences between HEX, RGB, and HSL color formats, how to convert between them, and when to use each in your projects.
How Computers Represent Color
Every color you see on a screen is produced by mixing red, green, and blue light at varying intensities. A display pixel has three sub-pixels — one red, one green, one blue — and by controlling the brightness of each, it can produce millions of distinct colors. The different color formats (HEX, RGB, HSL) are simply different notations for describing the same underlying color values.
HEX Colors
HEX (hexadecimal) is the most common color format in web development. A HEX color is a six-character string preceded by a hash sign: #FF5733.
The six characters are three pairs of hexadecimal digits. The first pair represents red, the second green, and the third blue. Each pair ranges from 00 (0 in decimal, no intensity) to FF (255 in decimal, full intensity).
Examples
#FF0000— Pure red (R=255, G=0, B=0)#00FF00— Pure green#0000FF— Pure blue#FFFFFF— White (all channels at maximum)#000000— Black (all channels at zero)
Shorthand Notation
When each pair consists of doubled characters, you can use a three-character shorthand: #F00 is equivalent to #FF0000, and #39F expands to #3399FF.
HEX with Alpha
The eight-character form #FF573380 adds a two-digit alpha channel (transparency) at the end. 80 in hex is 128 in decimal, so this represents roughly 50% opacity.
RGB and RGBA
The RGB format expresses the same red-green-blue values in decimal notation: rgb(255, 87, 51). Each value ranges from 0 to 255.
RGBA adds an alpha channel as a decimal between 0 (fully transparent) and 1 (fully opaque): rgba(255, 87, 51, 0.5).
When to Use RGB
RGB is intuitive when you are thinking in terms of light mixing. It maps directly to how monitors produce color. It is also the format returned by most JavaScript color APIs like getComputedStyle and canvas.getContext('2d').getImageData.
HSL and HSLA
HSL stands for Hue, Saturation, Lightness. It describes color in terms that are more intuitive to humans: hsl(14, 100%, 60%).
Hue
Hue is the color angle on the color wheel, from 0 to 360 degrees. 0 (and 360) is red, 120 is green, and 240 is blue. The values between are the intermediate colors: 60 is yellow, 180 is cyan, 300 is magenta.
Saturation
Saturation is the intensity of the color, from 0% (gray) to 100% (fully vivid). Reducing saturation moves the color toward gray.
Lightness
Lightness controls how light or dark the color is. 0% is always black, 100% is always white, and 50% is the pure color at full saturation.
Why HSL Is Powerful
HSL makes it easy to create color variations programmatically. To lighten a color, increase the lightness. To desaturate it, decrease the saturation. To create a complementary color, add 180 to the hue. These operations are trivial in HSL but require complex math in RGB or HEX.
Creating a color palette is straightforward: keep the hue constant and vary saturation and lightness to produce different shades and tints of the same color.
Converting Between Formats
HEX to RGB
Conversion is direct: parse each two-character hex pair into a decimal number. #FF5733 becomes rgb(255, 87, 51).
RGB to HSL
This conversion involves more math. First, normalize the RGB values to a 0-1 range. Find the maximum and minimum channel values. The lightness is the average of the max and min. Saturation depends on lightness and the difference between max and min. Hue is derived from which channel is dominant and the differences between channels.
The formulas are well-defined but tedious to compute by hand. Our Color Converter handles all these conversions instantly, and the HEX to RGB Converter provides a focused tool for that specific conversion.
Modern CSS Color Functions
CSS has expanded beyond the classic formats. The oklch() function uses the OKLCH color space, which provides perceptually uniform lightness — meaning a 10% lightness increase looks equally bright across all hues. This is increasingly popular in design systems.
The color-mix() function lets you blend two colors in CSS without JavaScript: color-mix(in srgb, #FF0000 50%, #0000FF) produces purple.
Choosing the Right Format
| Scenario | Best Format | Reason |
|---|---|---|
| CSS custom properties (theming) | HSL or OKLCH | Easy to create variants |
| Quick inline styles | HEX | Compact, widely recognized |
| JavaScript canvas / image processing | RGB | Direct pixel manipulation |
| Design system palettes | HSL | Systematic shade generation |
| Transparency needed | RGBA or HSLA | Built-in alpha support |
Try the Conversions
Use our Color Converter to translate between any color format instantly. Paste a HEX code and get RGB, HSL, and more — everything runs in your browser with a live preview of the color.
Summary
HEX, RGB, and HSL are three ways to describe the same colors. HEX is compact and traditional. RGB matches how screens work. HSL matches how humans think about color. Understanding all three — and being able to convert between them — gives you full control over color in your projects.