Your result will appear here
Fill in the fields and press Calculate.
To convert hex to RGB, split the six-digit code into three pairs and convert each pair from base 16 to decimal: the first digit × 16 plus the second. #1E90FF becomes 1E = 1 × 16 + 14 = 30, 90 = 9 × 16 + 0 = 144, FF = 15 × 16 + 15 = 255, so it is rgb(30, 144, 255). Each channel runs from 00 (0) to FF (255).
Type a hex code with or without the # and the converter returns the normalized code, the RGB triplet and the HSL equivalent (hue in degrees, saturation and lightness in percent). Three- and four-digit shorthand is expanded the way CSS does it, so #F80 is read as #FF8800, and an 8-digit code such as #FF880080 also returns its alpha (0.502, 50.2% opacity) and the rgba() value.
All three notations describe the same sRGB color; they suit different jobs. Hex is compact for CSS and design handoffs, rgb() is what you need for rgba() transparency or for code that expects numbers, and HSL is the easiest to adjust by hand. The guide below covers the conversion in both directions, 4- and 8-digit hex codes with alpha, how the HSL numbers are derived and rounded, and how to check that a color has enough contrast for text under WCAG 2.2.
HEX Color Converter: step-by-step worked example
- HEX color code
- #FF6B35
- 1
Normalise the HEX code
Drop #, expand 3/4-digit shorthand (#1AF → #11AAFF, #1AF8 → #11AAFF88), upper-case
= #FF6B35
- 2
Hex to decimal: R, G, B
Each pair = 16 × first + second (0–255)
FF → 255 · 6B → 107 · 35 → 53 = rgb(255, 107, 53)
- 3
Lightness (L)
r, g, b = value ÷ 255 · L = (max + min) ÷ 2
(1 + 0.208) ÷ 2 = 60%
- 4
Saturation (S)
d = max − min · S = d ÷ (2 − max − min) if L > 0.5, else d ÷ (max + min)
0.792 ÷ (2 − 1 − 0.208) = 100%
- 5
Hue (H) and HSL
If R is largest H = 60 × ((g − b) ÷ d); if G, 60 × ((b − r) ÷ d + 2); if B, 60 × ((r − g) ÷ d + 4)
H = 16° = hsl(16, 100%, 60%)
- Red (R)255
- Green (G)107
- Blue (B)53
Good to know: HEX and RGB are two spellings of the same colour; HSL separates hue, saturation and lightness, which makes lighter/darker variants easy. Rounding can cause ±1 differences when converting back. In an 8-digit code (#RRGGBBAA) the last pair is the alpha channel: 80 ≈ 50% opacity.
HEX Color Converter — how it works
Hex to RGB by hand
Hexadecimal digits run 0–9 and then A–F for 10–15:
| Hex digit | 0–9 | A | B | C | D | E | F |
|---|---|---|---|---|---|---|---|
| Value | 0–9 | 10 | 11 | 12 | 13 | 14 | 15 |
Each pair is (first digit × 16) + second digit. The W3C CSS Color specification defines the pairs as red, green and blue, with 00 as the minimum and ff (255) as the maximum. Letter case does not matter: #1e90ff and #1E90FF are the same color.
| Hex | R pair | G pair | B pair | RGB |
|---|---|---|---|---|
| #1E90FF | 1E → 30 | 90 → 144 | FF → 255 | rgb(30, 144, 255) |
| #B31942 | B3 → 179 | 19 → 25 | 42 → 66 | rgb(179, 25, 66) |
| #0A3161 | 0A → 10 | 31 → 49 | 61 → 97 | rgb(10, 49, 97) |
| #808080 | 80 → 128 | 80 → 128 | 80 → 128 | rgb(128, 128, 128) |
RGB back to hex
Divide each channel by 16: the quotient is the first digit and the remainder the second. 179 ÷ 16 = 11 remainder 3, so 179 is B3. A value under 16 needs a leading zero: 10 is 0A, not A. Writing rgb(10, 49, 97) as #A3161 instead of #0A3161 produces a five-digit code that browsers reject.
Shorthand and alpha: 3, 4, 6 and 8 digits
CSS Color Module Level 4 accepts four hex lengths:
| Form | Example | Meaning |
|---|---|---|
| 3 digits | #F80 | each digit doubled: #FF8800 |
| 6 digits | #FF8800 | RR GG BB |
| 4 digits | #F808 | #FF880088, shorthand with alpha |
| 8 digits | #FF880080 | RR GG BB AA, the last pair is alpha |
This converter reads all four lengths. For a 4- or 8-digit code it also returns the alpha channel: the last pair divided by 255, both as a 0–1 value and as an opacity percentage, plus the matching rgba(). 80 hex is 128, and 128 ÷ 255 = 0.502, so #FF880080 is rgba(255, 136, 0, 0.502), or 50.2% opacity; the RGB and HSL results describe the opaque color. Only colors written as shorthand pairs (each pair two identical digits) can be shortened: #FF8800 can become #F80, #1E90FF cannot.
How the HSL values are computed
The converter derives HSL from RGB the standard way:
- Scale each channel to 0–1 by dividing by 255.
- Lightness L = (max + min) ÷ 2.
- Saturation S = (max − min) ÷ (1 − |2L − 1|), and 0 for grays.
- Hue depends on which channel is largest, giving an angle from 0° (red) through 120° (green) to 240° (blue).
For #1E90FF: max = 1.0 (blue), min = 0.118 (red), so L = 0.559 (56%), S = 100% and H = 210°, giving hsl(210, 100%, 56%). The output is rounded to whole numbers, which is how designers usually write HSL, but it means a round trip is not always exact: hsl(210, 100%, 56%) converts back to #1F8FFF, one step off in red and green. Keep the hex or RGB value as the source of truth and treat HSL as an editing view.
| Color | Hex | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Dodger blue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) |
| Deep teal | #0C6B5E | rgb(12, 107, 94) | hsl(172, 80%, 23%) |
| Navy | #0A3161 | rgb(10, 49, 97) | hsl(213, 81%, 21%) |
| Orange | #FF8800 | rgb(255, 136, 0) | hsl(32, 100%, 50%) |
HSL lightness is not perceived brightness
Pure yellow #FFFF00 and pure blue #0000FF both have HSL lightness 50%, yet yellow looks far brighter. WCAG's relative luminance, which models perceived brightness for sRGB, puts yellow at 0.93 and blue at 0.07. That is why a palette built by stepping HSL lightness alone produces uneven results across hues, and why newer CSS color spaces such as OKLCH exist. For accessibility decisions, use luminance and contrast ratio, not the L in HSL.
Checking contrast with WCAG 2.2
WCAG 2.2 defines relative luminance for sRGB as L = 0.2126 R + 0.7152 G + 0.0722 B, where each channel is first scaled to 0–1 and linearized: values at or below 0.04045 are divided by 12.92, larger values become ((c + 0.055) ÷ 1.055)^2.4. The contrast ratio between two colors is (L1 + 0.05) ÷ (L2 + 0.05), with L1 the lighter. Success criterion 1.4.3 (Level AA) requires at least 4.5 : 1 for normal text and 3 : 1 for large text, meaning at least 18 point or 14 point bold.
| Color | Contrast with white | Normal text (4.5 : 1) | Large text (3 : 1) |
|---|---|---|---|
| #1E90FF | 3.24 : 1 | fails | passes |
| #0073E6 | 4.57 : 1 | passes | passes |
| #0066CC | 5.57 : 1 | passes | passes |
| #808080 | 3.95 : 1 | fails | passes |
| #767676 | 4.54 : 1 | passes | passes |
| #B31942 | 6.70 : 1 | passes | passes |
| #0A3161 | 12.92 : 1 | passes | passes |
Hex is sRGB
The CSS specification defines hex notation as a way to specify an sRGB color. Wide-gamut displays can show colors outside sRGB, but those need a different notation such as color(display-p3 …); no hex code can express them. When a design tool exports a hex code from a wider color space, the value is clipped or converted to sRGB first, so a color can look slightly different on the web than in the source file.
Worked example
A designer's brand guide specifies #1E90FF for buttons with white labels, and the developer needs the values for CSS.
Enter #1E90FF. The converter returns rgb(30, 144, 255) and hsl(210, 100%, 56%). For a translucent hover state, the RGB values go straight into rgba(30, 144, 255, 0.85).
Before shipping, the developer checks text contrast. Blue #1E90FF has a relative luminance of 0.274, so white text on it gives (1 + 0.05) ÷ (0.274 + 0.05) = 3.24 : 1. That passes the WCAG 3 : 1 minimum for large text but fails the 4.5 : 1 needed for a normal 16-pixel button label.
The fix keeps the hue and darkens the color in HSL. Lowering lightness from 56% to 45% gives hsl(210, 100%, 45%), about #0073E6 (rgb(0, 115, 230)), with a contrast of 4.57 : 1, which passes AA for normal text. At 40% lightness, #0066CC reaches 5.57 : 1 for more margin. Enter the new hex code here to confirm the RGB and HSL values before adding it to the design tokens.
Frequently asked questions
How do I convert hex to RGB?+
Split the six digits into three pairs and convert each from base 16: first digit × 16 + second digit. #1E90FF gives 1E = 30, 90 = 144, FF = 255, so rgb(30, 144, 255).
How do I convert RGB to hex?+
Divide each value by 16; the quotient is the first hex digit and the remainder the second. 179 = 11 × 16 + 3, so it becomes B3. Pad values under 16 with a leading zero (10 → 0A).
What is #FFFFFF in RGB?+
rgb(255, 255, 255), which is white. #000000 is rgb(0, 0, 0), black, and #FF0000 is rgb(255, 0, 0), pure red.
What does a 3-digit hex code mean?+
It is shorthand where each digit is doubled: #F80 equals #FF8800, which is rgb(255, 136, 0). Only colors whose pairs are made of identical digits can be written this way.
What is an 8-digit hex color?+
A hex code with an alpha (opacity) pair at the end: #RRGGBBAA. #FF880080 is orange at 128/255 ≈ 50% opacity, or rgba(255, 136, 0, 0.5). Enter it here and the converter returns the alpha as 0.502 and 50.2% alongside rgba(255, 136, 0, 0.502).
How do I convert hex to HSL?+
Convert to RGB first, scale each channel to 0–1, then L = (max + min) ÷ 2, S = (max − min) ÷ (1 − |2L − 1|), and the hue from the dominant channel. #1E90FF is hsl(210, 100%, 56%).
Why does converting HSL back to hex give a slightly different code?+
Because HSL is rounded to whole degrees and percentages. hsl(210, 100%, 56%) converts back to #1F8FFF rather than #1E90FF; the difference is one step in two channels and is not visible.
How do I check if a hex color has enough contrast?+
Compute the WCAG contrast ratio from relative luminance: (L1 + 0.05) ÷ (L2 + 0.05). Normal text needs at least 4.5 : 1 and large text 3 : 1 for Level AA; #1E90FF on white is only 3.24 : 1.
Are hex and RGB the same color?+
Yes. A hex code is the RGB triplet written in base 16, and CSS defines both as sRGB. #0A3161 and rgb(10, 49, 97) render identically.
Sources
About this page
- Publisher:
- Kalkoro — Teknolojig Bilişim Teknolojileri A.Ş., İstanbul
- Written by:
- Ahmet Tur — Editor (Math, date & time, unit conversion, physics & chemistry, everyday tools)
- Reviewed by:
- Kübra Yıldız — Editor
Parameters come from official sources; the last update date is shown at the bottom of the page.
Spotted a wrong result? Use the "Report a bug" button at the top of the page; every report is reviewed.
How we calculate and our accuracy policy →
Results are for information only. For official matters the relevant authority's calculation prevails.
Last updated: