HEX to RGB Converter
Convert hexadecimal color codes to RGB (Red, Green, Blue) values instantly. This converter translates the web-standard HEX format into RGB values that work in CSS, design tools, and programming languages.
Understanding HEX Colors
HEX color codes use a 6-character notation representing Red, Green, and Blue channels. Each pair of characters represents a value from 00 (0) to FF (255). The format is #RRGGBB where:
- RR = Red channel (00-FF)
- GG = Green channel (00-FF)
- BB = Blue channel (00-FF)
Conversion Formula
To convert HEX to RGB, split the HEX code into pairs and convert each from base-16 to decimal:
| HEX Pair | Calculation | RGB Value |
|---|---|---|
| FF | F×16 + F = 15×16 + 15 | 255 |
| 80 | 8×16 + 0 = 128 | 128 |
| 00 | 0×16 + 0 = 0 | 0 |
Common HEX to RGB Conversions
| Color | HEX | RGB |
|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) |
| Green | #00FF00 | rgb(0, 255, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
| White | #FFFFFF | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
Shorthand HEX
3-character HEX codes like #F00 expand by doubling each character: #F00 = #FF0000.
Using RGB in CSS
``css
.element {
color: rgb(255, 128, 0);
background-color: rgb(240, 240, 240);
}
`
Use this converter to quickly translate HEX colors to RGB format for your projects.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.