HEX to RGB Color Converter
Decode any HEX color code (3, 4, 6 or 8 digits, including alpha) into RGB, RGBA and HSL, and check whether black or white text will be readable on it.
#06B6D4 = rgb(6, 182, 212)
How to Read a HEX Color Code
A six-digit HEX code is three pairs, red, green and blue, each a number from 00 to FF in base 16. To turn a pair into its RGB value, multiply the first digit by 16 and add the second. The letters A–F stand for 10–15.
Worked Example: Decoding #06B6D4
Step 1: Split into pairs
Step 2: Convert each pair
rgb(6, 182, 212): almost no red, lots of green and blue, which makes a bright cyan. Reading the pairs as rough proportions tells you the color before you even convert it.
HEX Pairs at a Glance
Common pairs and how strong that channel is. The first digit does most of the work: 80 is half intensity, C0 three-quarters.
| Pair | Decimal | Intensity |
|---|---|---|
| 00 | 0 | 0% |
| 1A | 26 | 10% |
| 33 | 51 | 20% |
| 4D | 77 | 30% |
| 66 | 102 | 40% |
| 80 | 128 | 50% |
| 99 | 153 | 60% |
| B3 | 179 | 70% |
| CC | 204 | 80% |
| E6 | 230 | 90% |
| FF | 255 | 100% |
3, 4, 6 and 8-Digit HEX Formats
The digit count tells you what's inside. Three and four digits are shorthand, where each digit is doubled. Six digits is plain RGB, and eight adds an alpha (opacity) pair.
| Format | Example | Used in |
|---|---|---|
| #RGB | #0BD | CSS shorthand; each digit is doubled (#00BBDD) |
| #RRGGBB | #06B6D4 | The standard form in CSS, design tools and brand guides |
| #RGBA | #0BD8 | CSS shorthand with alpha |
| #RRGGBBAA | #06B6D480 | CSS with alpha as the last pair |
| #AARRGGBB | #8006B6D4 | Android and some Windows APIs: alpha comes first |
| 0xRRGGBB | 0x06B6D4 | Code constants in C, Java, Python and others |
Alpha: CSS vs Android Order
The alpha pair works like the color pairs: 00 is fully transparent, FF fully opaque and 80 about 50% (128 ÷ 255 = 0.502). The catch is where it goes. CSS puts alpha last (#RRGGBBAA), while Android color resources put it first (#AARRGGBB). So #8006B6D4 is a half-transparent cyan in Android, but in CSS the same eight digits mean a purple, rgb(128, 6, 182), at 83% opacity. When you paste an 8-digit code, choose the order it came from.
Will Text Be Readable on This Color?
Converting to RGB is also the first step in checking accessibility. The converter calculates each color's relative luminance from its RGB values and compares it with white and black text using the WCAG formula. WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text.
The example cyan, #06B6D4, scores only 2.43:1 with white text, which fails, but 8.65:1 with black. Bright-looking colors often need dark text, even when white text "looks" fine at a glance.
Frequently asked questions
Are HEX codes case-sensitive?
No. #06b6d4 and #06B6D4 are the same color.
What does #FFF mean?
White: it's shorthand for #FFFFFF, rgb(255, 255, 255). Likewise #000 is black and #F00 is pure red.
How do I convert HEX to RGB in code?
Parse each pair as base 16. In JavaScript, parseInt("B6", 16) returns 182; in Python, int("B6", 16) does the same.
Why does my 8-digit color look wrong?
It probably came from Android or another system that puts alpha first (#AARRGGBB). Switch the order setting to Android to read it correctly.
Sources
- W3C CSS Color Module Level 4: the 3, 4, 6 and 8-digit HEX notations.
- W3C Web Content Accessibility Guidelines (WCAG) 2.1: relative luminance, contrast ratio and the AA thresholds.
- Android Developers: Color: the #AARRGGBB format.
Related Tools
Capitalize the first letter of every word.
Turn letters into alphabet positions: A = 1, B = 2.
Turn numbers from 1 to 26 into letters.
Switch between RGB values and HEX color codes.
Express euro cents as an amount in euros.
Express pence as an amount in British pounds.