Color Converter: HEX, RGB, HSL
This tool converts colour codes between the three formats used across web design and CSS, HEX, RGB and HSL, so you can move a colour from one system to another without doing the maths yourself. Choose your input format, then enter a HEX code such as #3b82f6, RGB values for red, green and blue from 0 to 255, or HSL values for hue (0 to 360 degrees), saturation and lightness (0 to 100%). As you type, the calculator updates all three formats at once and shows a live colour swatch so you can see exactly what you are working with. Alongside the converted HEX, RGB and HSL codes you get a channel breakdown of each RGB value in decimal and hex, an HSL breakdown of hue, saturation and lightness, the colour's perceived brightness from the W3C luminance formula, whether it counts as dark or light, and a suggested black or white text colour for contrast. Copy any of the three formats to your clipboard with one click, ready to paste into your CSS, design software or code editor. Use it to match a brand colour across formats, check a colour palette, or work out whether white or black text will read more clearly on a given background. All conversions run instantly in your browser using the standard W3C CSS Color Level 4 formulas, so results are exact rather than estimated.
1. Enter a Colour
2. Colour Preview
Showing colour:
#3b82f6
rgb(59, 130, 246) | hsl(217, 91%, 60%)
Channel Breakdown
HSL Breakdown
How Colour Codes Work
Computer screens mix red, green, and blue light to produce every visible colour. The three common notation systems (HEX, RGB, and HSL) are simply different ways to express the same underlying RGB values.
HEX encodes R, G, and B as two-character hexadecimal numbers (0-9, a-f) concatenated into a six-character string prefixed with #. The range 00 to ff in hex corresponds to 0 to 255 in decimal. A shorthand three-character form exists where each digit is doubled: #39f is the same as #3399ff.
RGB expresses each channel as a decimal integer from 0 (none) to 255 (full intensity). The CSS function is rgb(r, g, b). The total number of colours representable is 256 x 256 x 256 = 16,777,216.
HSL was designed to be more intuitive for humans. Hue is the pure colour position on a 360-degree wheel (0 and 360 are red, 120 is green, 240 is blue). Saturation is how vivid the colour is as a percentage (0% is greyscale, 100% is fully saturated). Lightness describes how bright it is (0% is black, 100% is white, 50% is the full colour). Designers often prefer HSL because adjusting a single property produces predictable results.
Conversion Formulas
| Conversion | Method |
|---|---|
| HEX to RGB | Parse each 2-char hex pair with parseInt(pair, 16). Short codes: double each digit first. |
| RGB to HEX | Convert each 0-255 integer to a 2-digit hex string: channel.toString(16).padStart(2,'0'). |
| RGB to HSL | Normalise to 0-1. L = (max+min)/2. S = (max-min)/(1-|2L-1|) when max != min. H from dominant channel. |
| HSL to RGB | C = (1-|2L-1|) x S. X = C x (1-|(H/60) mod 2 - 1|). Rotate (C,X,0) by H sector, add m = L - C/2. |
Worked Example (Default Values)
Starting with #3b82f6:
- Split into 3b, 82, f6. Convert: 0x3b = 59, 0x82 = 130, 0xf6 = 246. So RGB = rgb(59, 130, 246).
- Normalise: r = 59/255 = 0.2314, g = 130/255 = 0.5098, b = 246/255 = 0.9647.
- max = 0.9647 (blue), min = 0.2314 (red). Chroma C = 0.7333. Lightness L = (0.9647 + 0.2314)/2 = 0.5980 (approximately 60%).
- Saturation S = 0.7333 / (1 - |2 x 0.5980 - 1|) = 0.7333 / (1 - 0.1961) = 0.7333 / 0.8039 = 0.912 (approximately 91%).
- Hue: blue is dominant, H = 60 x ((r - g)/C + 4) = 60 x ((0.2314 - 0.5098)/0.7333 + 4) = 60 x 3.620 = 217 degrees.
- Result: HSL = hsl(217, 91%, 60%).
When to Use Each Format
HEX is the most widely used format in web development and design tools. Use it in CSS for static colour values. RGB is useful when you need to manipulate individual colour channels in code or apply opacity using rgba(r, g, b, a). HSL is ideal when you want to create colour palettes or modify a colour predictably, for example darkening a brand colour by reducing lightness by 10%.
Perceived Brightness
This converter also shows perceived brightness using the W3C relative luminance formula: Y = 0.2126R + 0.7152G + 0.0722B (where R, G, B are linearised). A relative luminance above about 0.179 is treated as a light colour and is best paired with dark text; at or below 0.179 it is treated as dark and is best paired with white or light text. This 0.179 figure is the WCAG crossover point, the luminance at which black and white text give equal contrast, so it predicts the more legible choice more reliably than a simple midpoint would. This is useful for ensuring sufficient colour contrast for accessibility (WCAG 2.1). For the default #3b82f6 the luminance is about 0.235, so the tool treats it as a light colour and suggests black text.
Related Calculators
- Essential Calculators hub: converters, digital tools, and more.
- Base64 Encoder / Decoder: encode and decode Base64 strings.
- Aspect Ratio Calculator: find width or height from a given ratio.
- Bandwidth Calculator: convert data sizes and speeds.
- Wave Power Calculator NZ: Ocean Wave Energy per Metre.
- Wheel Offset Calculator: ET, Backspacing and Poke.
Sources and method: W3C CSS Color Level 4 specification (w3.org/TR/css-color-4). W3C WCAG 2.1 relative luminance definition (w3.org/TR/WCAG21/#dfn-relative-luminance). Conversions are performed entirely in the browser using standard floating-point arithmetic.
This tool converts colour codes exactly using the standard formulas. Results are correct to the nearest integer for each channel. Minor rounding differences may appear compared to some design software due to different intermediate precision choices.