HEX, RGB, and HSL — Understanding Color Formats
Every color on screen is encoded as a combination of Red, Green, and Blue light, but the way that
combination is written down differs between formats. The most familiar is HEX — a compact
6-character code like #264653 where each pair of digits represents one channel in base-16.
Values run from 00 (0 in decimal) to FF (255), making HEX the go-to format for
CSS stylesheets and design tokens. A shorthand 3-digit form (#RGB, e.g. #FFF)
is also valid and expands automatically to 6 digits.
RGB expresses the same information in plain decimal: rgb(38, 70, 83).
Because JavaScript, the Canvas API, and most image-editing libraries all work with numeric values,
RGB is the most convenient format for programmatic color manipulation. Adding a fourth channel gives
you rgba(), where the Alpha value (0–1) controls transparency — essential for overlays,
shadows, and glassmorphism effects.
HSL — Hue, Saturation, Lightness — describes color the way designers think about it. Hue is a degree on the color wheel (0–360°), Saturation controls how vivid the color is (0 % = grey, 100 % = fully saturated), and Lightness sets brightness (0 % = black, 100 % = white). The big advantage: you can generate an entire range of tints and shades by varying only the Lightness value, keeping the hue and saturation locked. This makes HSL ideal for design systems and accessibility work — pair it with the contrast checker to ensure your palette meets WCAG guidelines.
| Format | Example | Range | Best For |
|---|---|---|---|
| HEX | #264653 |
00–FF per channel |
CSS, HTML, design tokens, color pickers |
| RGB | rgb(38, 70, 83) |
0–255 per channel | JavaScript, Canvas API, image processing |
| RGBA | rgba(38, 70, 83, 0.8) |
0–255 + alpha 0–1 | Transparency, overlays, shadows |
| HSL | hsl(193, 37%, 24%) |
0–360° / 0–100% / 0–100% | Shades, tints, design systems, theming |
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal value (e.g. #264653) that encodes a color
in RGB space. Each consecutive pair of digits represents one color channel — Red, Green, and Blue —
with values ranging from 00 (0) to FF (255). HEX is the standard format
for CSS and HTML and is recognised by virtually every design tool.
What is the difference between RGB and RGBA?
RGB defines a color with three numeric channels — Red, Green, and Blue — each from 0 to 255.
RGBA adds a fourth Alpha channel that controls opacity: 0 is fully
transparent and 1 is fully opaque. Use rgba() in CSS whenever you need
semi-transparent colors, such as card overlays or drop shadows.
Why use HSL instead of RGB?
HSL maps directly to how humans perceive color. Adjusting Lightness alone lets you create accessible tints and shades without changing the hue — something that requires recalculating all three channels in RGB. This makes HSL the preferred format when building design systems or generating color scales. Try the Shades Generator to see it in action.
How do I convert HEX to RGB manually?
Split the 6-digit HEX string into three 2-character pairs and convert each from base-16 to
base-10. For #264653: 26₁₆ = 38,
46₁₆ = 70, 53₁₆ = 83 →
rgb(38, 70, 83). This tool does it instantly — just paste the HEX value into the
HEX field and the RGB field updates automatically.
Does this converter support 3-digit shorthand HEX (#FFF)?
Yes. Enter any 3-digit shorthand like #FFF or #abc and the converter
automatically expands it to its 6-digit form (#FFFFFF / #aabbcc) before
converting. The output fields will always show the full, precise values.