HEX to RGB Converter — Convert Color Codes Instantly
Our free HEX to RGB converter instantly converts any hex color code to RGB, RGBA, HSL, and HSV values. Switch to RGB to HEX mode to build colors from sliders and get the hex code. Detect CSS color names, preview colors for different types of color blindness, and bulk convert multiple hex codes at once.
How to Convert HEX to RGB
HEX color codes use base-16 (hexadecimal) notation. Each pair of hex digits represents one color channel (red, green, blue) on a scale from 0 (00) to 255 (FF).
| Step | Action | Example (#FF5733) |
|---|
| 1 | Take the 6-digit hex code | #FF5733 |
| 2 | Split into three pairs | FF, 57, 33 |
| 3 | Convert each pair to decimal | FF=255, 57=87, 33=51 |
| 4 | Write as RGB | rgb(255, 87, 51) |
How to Convert RGB to HEX
Converting RGB to HEX is the reverse process. Each decimal channel value (0-255) is converted to a two-digit hexadecimal number.
| Step | Action | Example rgb(255, 87, 51) |
|---|
| 1 | Take the three RGB values | 255, 87, 51 |
| 2 | Convert each to base-16 | FF, 57, 33 |
| 3 | Pad to 2 digits if needed | FF, 57, 33 |
| 4 | Concatenate with # prefix | #FF5733 |
Color Format Reference
| Format | Syntax | Example | Transparency | Used In |
|---|
| HEX 6-digit | #RRGGBB | #FF5733 | No | CSS, HTML, design tools |
| HEX 8-digit | #RRGGBBAA | #FF573380 | Yes | Modern CSS |
| HEX 3-digit | #RGB | #F53 | No | CSS shorthand for repeating pairs |
| RGB | rgb(R,G,B) | rgb(255,87,51) | No | CSS |
| RGBA | rgba(R,G,B,A) | rgba(255,87,51,0.5) | Yes | CSS |
| HSL | hsl(H,S%,L%) | hsl(11,100%,60%) | No | CSS |
| HSLA | hsla(H,S%,L%,A) | hsla(11,100%,60%,0.5) | Yes | CSS |
| HSV/HSB | hsv(H,S%,V%) | hsv(11,80%,100%) | No | Design tools (Photoshop, Figma) |
Common HEX Color Codes
| Color Name | HEX | RGB | HSL |
|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
Hexadecimal Number System
Understanding hexadecimal helps you read and write HEX color codes more intuitively. Hexadecimal is a base-16 number system that uses 16 symbols: the digits 0-9 and the letters A-F.
| Decimal | Hex | Binary | In Color Context |
|---|
| 0 | 00 | 00000000 | No contribution (darkest) |
| 16 | 10 | 00010000 | Very small contribution |
| 32 | 20 | 00100000 | Small contribution |
| 64 | 40 | 01000000 | Quarter intensity |
| 128 | 80 | 10000000 | Half intensity |
| 192 | C0 | 11000000 | Three-quarter intensity |
| 224 | E0 | 11100000 | High intensity |
| 255 | FF | 11111111 | Full contribution (brightest) |
Color Blindness and Accessibility
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. When designing with color, it is important to verify that your color choices are distinguishable for users with color blindness. The color blindness preview in this tool simulates how your selected color appears under three common types:
| Type | Affects | Missing Cone | Prevalence |
|---|
| Protanopia | Red-blind | L-cone (red) | 1% of men |
| Deuteranopia | Green-blind | M-cone (green) | 1% of men |
| Tritanopia | Blue-blind | S-cone (blue) | 0.01% of population |
| Achromatopsia | All colors | All cones | Very rare — complete color blindness |