HEX, RGB, and HSL Explained: Choosing the Right Color Format for the Job

By Elena Marsh · September 24, 2026 · Design

Three formats describe the same color in three different ways, and each one makes a different task easy. Picking the right format saves time when adjusting, matching or generating colors.

Every screen color is ultimately a mix of red, green and blue light, but the formats we use to write that mix down differ, and they are not interchangeable in convenience. A hex code is compact and familiar from design tools. An RGB triplet is explicit and easy to manipulate in code. An HSL triplet describes color the way a person thinks about it, in terms of hue, saturation and lightness. Choosing the right one for the task is a small decision that pays off every time you adjust a palette.

In this article:

• How each format represents color
• What each format makes easy
• Worked examples converting between formats
• Common mistakes
• FAQ: color format edge cases
• Wrapping up

How each format represents color

HEX

A hex color is a hash followed by six hexadecimal digits, grouped in pairs for red, green and blue. Each pair ranges from "00" to "ff", representing zero to two hundred and fifty five. The color "#ff8800" is full red, mid green and no blue, which renders as a vivid orange. Hex is compact, copies cleanly between tools, and is the default in CSS and design software.

RGB

RGB writes the same three channels as decimal numbers, typically in the form "rgb(255, 136, 0)". It is the most direct representation of what the screen actually displays, and it makes channel arithmetic obvious: to halve the red, you change two hundred and fifty five to one hundred and twenty seven.

HSL

HSL describes color as hue, saturation and lightness. Hue is an angle from zero to three hundred and sixty around the color wheel, saturation is how intense the color is from zero to one hundred percent, and lightness is how dark or light from zero to one hundred percent. The same orange is "hsl(32, 100%, 50%)". HSL matches how people reason about color: to make a color darker you reduce lightness, to make it less vivid you reduce saturation, and to shift it along the wheel you change hue.

What each format makes easy

Hex is best for copying a precise color between tools and for compact storage in stylesheets. RGB is best when you need to manipulate channels directly, such as mixing two colors by averaging their red, green and blue values. HSL is best when you need to generate a family of related colors, such as a set of tints and shades of a brand color, because the relationships are expressed as simple percentage changes.

A common workflow is to pick a color in hex, convert it to HSL to derive a palette of lighter and darker variants, then convert those back to hex for use in the stylesheet. The format you store is not the format you think in.

Worked examples converting between formats

Example one: hex to RGB

Take "#3a7bd5". Split into pairs "3a", "7b", "d5" and convert each from hexadecimal to decimal: three a is fifty eight, seven b is one hundred and twenty three, d five is two hundred and thirteen. The RGB form is "rgb(58, 123, 213)", a medium blue. Each pair maps directly to one channel.

Example two: RGB to HSL

For "rgb(58, 123, 213)", first normalise each channel to a zero to one range: red is about zero point two three, green about zero point four eight, blue about zero point eight four. The maximum is blue and the minimum is red. Lightness is the average of max and min, about zero point five three, or fifty three percent. Saturation is the difference between max and min divided by one minus the absolute value of twice lightness minus one, which works out to about sixty four percent. Hue is the angle to the max channel, here blue at two hundred and forty degrees, adjusted by the relative positions of the other channels, giving about two hundred and seventeen degrees. The HSL is "hsl(217, 64%, 53%)", confirming the medium blue.

Example three: deriving a palette in HSL

From "hsl(217, 64%, 53%)", a lighter tint for backgrounds is "hsl(217, 64%, 95%)", a darker shade for text is "hsl(217, 64%, 25%)", and a muted variant for borders is "hsl(217, 30%, 53%)". Only one value changed in each, which is the whole advantage of HSL for palette generation. Converting those back to hex gives the final stylesheet values.

Common mistakes

• Confusing lightness in HSL with brightness in HSB. They look similar but produce different colors at the extremes; HSL at one hundred percent lightness is white, while HSB at one hundred percent brightness is the full color.
• Forgetting the hash in hex codes when pasting into CSS, which some browsers silently ignore and others reject.
• Assuming saturation and lightness percentages are interchangeable between HSL and HSB. They are not.
• Trying to generate tints by adding to RGB values, which clips at two hundred and fifty five and produces uneven steps. Use HSL instead.
• Storing colors as RGB floats without rounding, which produces long decimals that are hard to read and compare.
• Ignoring that opacity is a separate channel. Hex with eight digits includes alpha, and RGB has an rgba variant; mixing them up changes transparency.

FAQ: color format edge cases

Which format is most widely supported?

Hex and RGB are supported everywhere, including very old browsers. HSL is supported in all modern browsers but occasionally absent in older tooling. For maximum portability, store as hex.

Is there a color format that represents how printers work?

Print uses CMYK, which is a subtractive model based on cyan, magenta, yellow and key black. Screen formats like HEX, RGB and HSL are additive and do not map to CMYK one to one, which is why printed colors differ from what you see on screen.

How do I pick a readable text color for a given background?

Convert the background to HSL and check lightness. Below about fifty five percent, white text is usually readable; above it, black text is. Then verify with a contrast ratio check, which is the reliable test for accessibility.

Wrapping up

HEX, RGB and HSL describe the same colors through different lenses. Use hex for storage and copying, RGB for channel arithmetic, and HSL for building palettes and reasoning about color relationships. Convert freely between them and pick the format that makes your current task obvious.

Convert colors between HEX, RGB and HSL and build your palette.

Try the Image Converter tool.

SwiftMultiTool — free online tools for everyone. Home · Blog · About · FAQ · Contact