Skip to main content
∑
Conversion

RGB ↔ HEX ↔ HSL Color Converter

Switching colour formats between HEX, RGB and HSL is one of the most common micro-tasks in front-end work, UI design and Figma hand-offs. This tool shows all three side by side — change any one and the others update instantly. A live preview swatch, the WCAG relative luminance, and a recommended text colour (black or white) are shown so you can sanity-check contrast at a glance. The URL captures the current colour, so you can share an exact swatch with a teammate.

Preview

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Relative luminance (WCAG)

—

Suggested text colour

—

Formula

HEX → RGB: #RRGGBB → (parseInt(RR,16), parseInt(GG,16), parseInt(BB,16)) RGB → HSL: standard CSS Color Level 3 algorithm (max/min/chroma method) Relative luminance L: 0.2126·R' + 0.7152·G' + 0.0722·B' (linearised sRGB components)

Frequently asked

Which format is the most accurate — HEX, RGB or HSL?

All three describe the same sRGB colour, so none is "more accurate". HEX and RGB are two notations for the same value (HEX is just RGB in base 16) and round-trip exactly. HSL re-expresses the same colour in cylindrical hue / saturation / lightness coordinates, but because HSL is usually shown as integer 0–100 %, a HSL → RGB → HSL round-trip can drift by ±1 unit — that is a display-precision artefact, not a maths error. For day-to-day work pick whichever reads best: HEX for copy-paste, HSL for tweaking hue or lightness.

Why does the HSL here differ from Photoshop or Figma's value?

This tool follows the CSS Color Level 3 HSL algorithm (the one all browsers use). Photoshop's "HSB" (Hue / Saturation / Brightness) is NOT HSL — HSB uses the max channel as its B (so pure red is B=100 %), while HSL uses the (max + min)/2 as L (pure red is L=50 %). The S values are also computed differently, so a colour will look the same but the S and L/B numbers do not match. Figma and Sketch use standard HSL and should agree with this tool; off-by-one differences are usually rounding.

How is the suggested text colour decided?

The tool computes the WCAG relative luminance of the background (RGB linearised, then weighted 0.2126·R + 0.7152·G + 0.0722·B). L > 0.5 → black text is usually more legible, L ≤ 0.5 → white text. This is a quick rule of thumb, not a guarantee of passing WCAG AA (4.5:1 for body text, 3:1 for large text). For brand or mid-tone colours where the contrast is borderline, the right fix is often to adjust the background rather than the text colour.

Related tools

Length Unit Converter

Cm, m, km, in, ft, yd, mi — common length units, converted instantly.

Temperature Converter

Convert between Celsius (°C), Fahrenheit (°F) and Kelvin (K) instantly.

Shoe Size Converter (US / UK / EU / CM)

Enter your foot length or a size in any system to see the equivalent US / UK / EU and centimetre sizes.

Paper Size Reference

Pick a paper size (A0–A10, B / C series, Letter, Legal, card sizes) to see its mm / cm / inch / pixel dimensions.

Number Base Converter (Binary / Octal / Decimal / Hex)

Convert a number simultaneously between binary, octal, decimal and hexadecimal — useful for programmers, students and electronics work.

Aspect Ratio & Screen Size Calculator

From an aspect ratio and one side, find the other; or from a diagonal and ratio, get real width and height (4:3, 16:9, 21:9 …).

Data Storage Unit Converter (B/KB/MB/GB/TB)

Convert between bytes, KB, MB, GB, TB and PB — distinguishing decimal (1000-base, drive labels) from binary (1024-base, OS-reported).

Tire Size Calculator (Spec / Diameter / Speedometer Error)

Convert a P-metric tire spec (e.g. 225/65R17) into sidewall height, overall diameter, circumference and revolutions per km — and compare against a reference size to see speedometer error.

Energy Unit Converter (J / kJ / cal / kcal / kWh / BTU / Wh)

Convert between joules, kilojoules, calories, kilocalories, kilowatt-hours, BTU and watt-hours in a single view — for nutrition labels, electricity bills, heating and fuel comparisons.

Pressure Unit Converter

Convert between Pa, kPa, bar, mbar, atm, psi, mmHg, Torr and inHg in a single view — all the everyday pressure units.

Torque Unit Converter

Convert between N·m, kgf·m, kgf·cm, lbf·ft, lbf·in and ozf·in — all the torque units used on torque wrenches, bicycle bolts and car service specs.

Angle Unit Converter

Convert between degrees, radians, gradians, turns, arcminutes, arcseconds, milliradians and NATO mil — with live sin/cos/tan values for reference.

Fuel Economy Converter (MPG ⇄ L/100km)

Convert between L/100km, km/L, US MPG and UK (imperial) MPG — compare car efficiency figures across regions without arithmetic.

Power Unit Converter

Convert between W, kW, MW, mechanical horsepower (hp), metric horsepower (PS), BTU/hr, ft·lbf/s, cal/s, kcal/h and refrigeration tons in one view.

px ↔ rem ↔ em Converter

Pick a root font-size (defaults to 16 px) and convert any CSS pixel, rem, em, percentage or point value into the others, with a reference table for common sizes.

Alcohol ABV ↔ Proof Converter & Standard Drinks Calculator

Convert alcohol by volume (ABV %) to US proof and UK proof, plus compute grams of pure alcohol and "standard drinks" per pour for US / UK / AU / HK.

Bandwidth & Throughput Converter (Mbps ↔ MB/s)

Convert network bandwidth (kbps, Mbps, Gbps) to file-transfer rate (KB/s, MB/s, MiB/s) and estimate how long a given file size takes.

Weight / Mass Unit Converter

Kilograms, grams, milligrams, pounds, ounces, stones, tonnes, jin and tael — common mass units, converted instantly.

Battery mAh ↔ Wh Converter (Power Bank Airline Rules)

Enter battery capacity (mAh) and voltage (V) to get watt-hours (Wh) instantly — with a live IATA airline check (100 Wh / 160 Wh cut-offs).

International Bra Size Converter

Enter underbust and bust (or pick a local size) to convert bra sizes across US, UK, EU, AU and JP standards.

International Ring Size Converter

Enter inner circumference (mm) or diameter to cross-reference US, UK, EU, JP and HK ring sizes.