If you have ever copied a color from a design tool and pasted it into CSS, you have dealt with at least two color formats: a six-character HEX code from an eyedropper and an rgb() value from a design spec. Both represent the same color — they just encode it differently. Understanding how HEX and RGB relate to each other, and where HSL fits in, makes color decisions in code faster and more intentional.
What Is a HEX Color Code?
A HEX color code is a six-character string that represents a color in hexadecimal — the base-16 number system using digits 0–9 and letters A–F. The string is divided into three two-character pairs: the first pair represents the red channel, the second green, and the third blue. Each pair ranges from 00 (minimum intensity, decimal 0) to FF (maximum intensity, decimal 255).
#FF5733 breaks down as: FF for red (255), 57 for green (87), and 33 for blue (51) — a vivid orange-red. #000000 is pure black (all channels at zero), #FFFFFF is pure white (all channels at maximum), and #808080 is neutral gray (all channels at decimal 128, exactly half intensity).
HEX is the most common format in CSS and web design tools. It is compact, copy-paste friendly, and universally recognized across design applications, browser developer tools, and CSS preprocessors. The shorthand form uses three characters when each channel's two digits are identical: #FF0000 becomes #F00, #AABBCC becomes #ABC.
What Is RGB?
RGB specifies colors using three decimal numbers representing the intensity of red, green, and blue channels on a scale from 0 to 255. In CSS, this is written as rgb(255, 87, 51) — the same color as #FF5733. The decimal format is more immediately readable: rgb(0, 0, 0) is obviously black and rgb(255, 255, 255) is obviously white without any conversion step.
RGB is additive color — you are mixing light, not pigment. All channels at maximum (255, 255, 255) produces white because white light combines all visible wavelengths. All channels at zero produces black because no light is emitted. This is the opposite of subtractive color (CMYK) used in print, where mixing all inks produces black.
CSS also supports rgba() with a fourth parameter for opacity (alpha), from 0 (fully transparent) to 1 (fully opaque). rgba(255, 87, 51, 0.5) is the same orange-red at 50% transparency. HEX codes can encode opacity with an 8-character format — #FF573380 appends the alpha byte at the end — but browser support for this format is less consistent than rgba() and should be used with a fallback.
Converting HEX to RGB: The Arithmetic
To convert a HEX pair to decimal, multiply the first hex digit by 16 and add the second. For FF: F = 15, so (15 × 16) + 15 = 255. For 57: (5 × 16) + 7 = 87. For 33: (3 × 16) + 3 = 51. The result is rgb(255, 87, 51). For hex digits above 9, use the letter-to-number mapping: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
To convert from RGB to HEX, divide each decimal value by 16 and express the quotient and remainder as hex digits. For 255: 255 ÷ 16 = 15 remainder 15, so FF. For 87: 87 ÷ 16 = 5 remainder 7, so 57. For 51: 51 ÷ 16 = 3 remainder 3, so 33. The result is #FF5733. Most developers use a color tool or the browser's developer panel for these conversions rather than doing the arithmetic manually.
A practical difference in code: HEX is preferred for static design tokens because it is compact and produces clean version control diffs. RGB is preferred when you need dynamic values — animating opacity with CSS custom properties, computing derived colors in JavaScript, or conditionally overriding specific channels. Neither is technically superior; the choice depends on what you need to do with the value next in your stylesheet.
HSL: The Format Built for Human Perception
HSL — Hue, Saturation, Lightness — represents colors as humans perceive them rather than as hardware encodes them. Hue is the base color as a degree on a 360-point wheel (0° is red, 120° is green, 240° is blue). Saturation is how vivid or washed-out the color is (0% is gray, 100% is fully saturated). Lightness determines brightness (0% is black, 100% is white, 50% is the pure color).
HSL is especially useful for generating palettes programmatically. To create a lighter variant, increase lightness. To desaturate, decrease saturation. To shift the base hue, adjust the first value. These operations are intuitive adjustments in HSL and would require guesswork-based trial and error in HEX or RGB. Design systems that define primary, light, dark, and muted color variants frequently calculate them in HSL and convert to HEX for the final output.
hsl(9, 100%, 60%) is approximately the same orange-red as #FF5733 and rgb(255, 87, 51). In CSS all three notations render identically. The choice between them is a code readability decision: HEX for design tokens and static values, RGB for alpha transparency and JavaScript computation, HSL for programmatic color relationships and palette generation.
Convert between HEX, RGB, HSL, and more — see all representations for any color side by side instantly.
Open the Color Picker →HEX and RGB are two encodings of the same information — the intensity of red, green, and blue channels. HEX uses compact hexadecimal pairs; RGB uses decimal values. Converting between them is arithmetic, and any color tool or browser developer panel handles it instantly. Where the choice matters is in workflow: HEX is the universal standard for copy-pasting and design tokens, RGB opens the door to alpha transparency, and HSL makes color relationships manipulable by humans. Use whichever format makes your CSS intentions most readable at that point in the code.