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 |
Frequently Asked Questions
What is #FFF in HEX?
#FFF is the 3-digit shorthand for #FFFFFF — pure white. In 3-digit hex, each digit is doubled: F becomes FF (255), so #FFF = rgb(255, 255, 255). 3-digit hex only works when each pair of digits is identical (e.g. #AABBCC can be written as #ABC).
How do I add transparency to a HEX color?
Use 8-digit hex (#RRGGBBAA) where the last two digits represent alpha (00 = transparent, FF = fully opaque). For example, #FF0000 is solid red, #FF000080 is 50% transparent red (80 in hex = 128 in decimal = 50% of 255). Alternatively, use rgba() in CSS.
What is the difference between HSL and HSV?
Both use Hue (0-360°) and Saturation (0-100%). The third component differs: HSL uses Lightness where 0% = black, 50% = the pure color, 100% = white. HSV uses Value (brightness) where 0% = black and 100% = the pure color. HSV is used in most visual color pickers (including Photoshop) because it feels more intuitive for selecting colors.
How many colors can HEX represent?
6-digit HEX (#RRGGBB) can represent 256 × 256 × 256 = 16,777,216 colors (approximately 16.7 million). 8-digit HEX (#RRGGBBAA) adds 256 transparency levels, giving 256^4 = 4,294,967,296 possible values.
What HEX color is closest to a specific Pantone or RAL color?
Pantone and RAL are physical color systems used in print and manufacturing. Their exact HEX equivalents depend on the medium and viewing conditions, but many online references provide approximate HEX conversions. Enter the RGB values from a Pantone/RAL conversion chart into this tool to get the HEX equivalent.