Calculate Now
What is a Color Converter?
A color converter takes a HEX color code — the six-digit format used everywhere in web design, like #1E73BE — and translates it into its RGB (red, green, blue) and HSL (hue, saturation, lightness) equivalents. Designers copying a brand color from a logo file into CSS, developers building a theme that needs both HEX for stylesheets and HSL for programmatic lightness/darkness adjustments, and anyone matching a color across Figma, Photoshop, and code all rely on this kind of conversion rather than guessing values by eye.
Conversion Formula
The HEX code is split into three 2-digit hexadecimal pairs, each converted to a 0–255 decimal value for RGB, then normalised to 0–1 to calculate HSL:
L = (max(R,G,B) + min(R,G,B)) ÷ 2 (normalised 0–1)
S depends on lightness and the max–min spread; H depends on which channel is largest
How the Digits Map to Color
| HEX Segment | Represents | Decimal Range |
|---|---|---|
| 1st pair (e.g. 1E) | Red channel | 0–255 |
| 2nd pair (e.g. 73) | Green channel | 0–255 |
| 3rd pair (e.g. BE) | Blue channel | 0–255 |
Worked Example
Converting #1E73BE (this site's own accent blue):
RGB = rgb(30, 115, 190)
Normalised: max = 0.745 (blue), min = 0.118 (red), L = 0.431
HSL ≈ hsl(208, 73%, 43%)
Note that HSL's lightness of 43% correctly signals a mid-toned, slightly-dark blue rather than a pastel or a near-black — a quick sanity check when the numbers look right.
How to Use This Calculator
- Enter or paste a 6-digit HEX color code (the # is optional).
- Click Calculate.
- Read off the matching RGB and HSL values, along with a live color swatch preview.
Building a full color palette? Pair this with the QR Code Generator for other quick design utilities on this site.
📅 Last reviewed: July 2026 · Formulas verified against RBI/SEBI/IT Dept guidelines.