HEX to RGB & HSL Converter
Colors on the web can be expressed in three common formats: HEX (hexadecimal), RGB (Red Green Blue), and HSL (Hue Saturation Lightness). A HEX code like #1A2B3C packs the same information as rgb(26, 43, 60) or hsl(210, 40%, 27%) — this tool converts between all three instantly as you type, so you never need to do the arithmetic by hand.
HEX and RGB are low-level representations that map directly to hardware channel intensities (0–255 per channel). HSL is a human-friendly alternative: adjusting the Saturation or Lightness slider produces predictable results that match how designers think about color, making it ideal for theming and accessibility work.
How it works
HEX → RGB: split the 6 hex digits into three pairs (RR, GG, BB) and convert each from base-16 to decimal (0–255). RGB → HEX: reverse the process. RGB → HSL: normalise channels to [0,1]; L = (max+min)/2; S = (max−min)/(1−|2L−1|); H is derived from which channel is largest. HSL → RGB: use the piecewise formula f(n) = L − a·max(−1, min(k−3, 9−k, 1)) where k=(n+H/30) mod 12 and a=S·min(L, 1−L).
Use cases
- Converting brand colour codes from design tools (HEX) into CSS custom properties (RGB or HSL)
- Adjusting lightness or saturation in HSL to generate accessible colour palettes
- Translating designer-provided HEX values to rgba() for CSS opacity effects
- Verifying colour consistency across print (RGB) and web (HEX) deliverables
- Learning colour theory by exploring how HSL components relate to perceived colour
Frequently asked questions
How do I convert a HEX color code to RGB?
Split the six hex digits into three pairs — red, green, and blue — and convert each pair from base-16 to a decimal number between 0 and 255. For example, #1A2B3C becomes rgb(26, 43, 60) because 1A is 26, 2B is 43, and 3C is 60 in decimal. This converter does the arithmetic automatically as you type.
What is the difference between RGB and HSL?
RGB describes a color by the intensity of its red, green, and blue channels (0–255 each), which maps directly to how screens produce color. HSL describes the same color by hue, saturation, and lightness, which matches how designers think — making a color lighter or less saturated is a single, predictable slider adjustment. Both formats represent exactly the same colors, just in different coordinate systems.
Why do some HEX codes have 3 digits instead of 6?
A 3-digit HEX code is shorthand where each digit is duplicated: #F80 expands to #FF8800. It only works when each color channel has two identical hex digits, so it covers a smaller subset of colors. Browsers accept both forms in CSS.
How do I add transparency to a HEX color in CSS?
You can either use 8-digit HEX notation, where the last two digits are the alpha channel (e.g. #1A2B3C80 is about 50% opacity), or convert to rgba(), such as rgba(26, 43, 60, 0.5). Converting HEX to RGB first makes it easy to build the rgba() form. Modern browsers support both approaches.
Which color format should I use in CSS?
All three formats produce identical results, so it is mostly a matter of workflow. HEX is compact and common in design tool handoffs, RGB is convenient when you need alpha transparency, and HSL is best for creating color systems and themes because you can derive lighter or darker variants by changing a single value.