Hex to Color Converter
Convert hexadecimal color codes to RGB, HSL, CMYK, and more formats instantly
Color Preview
#1F9BD4
Sample Text
Text Preview
See how text looks on this color
HEX
#1F9BD4
RGB
rgb(31, 155, 212)
HSL
hsl(199, 75%, 48%)
HSV
hsv(199, 85%, 83%)
CMYK
cmyk(85%, 27%, 0%, 17%)
Popular Hex Color Codes
#FF0000
Red
Red
#00FF00
Lime
Lime
#0000FF
Blue
Blue
#FFFF00
Yellow
Yellow
#FF00FF
Magenta
Magenta
#00FFFF
Cyan
Cyan
#000000
Black
Black
#FFFFFF
White
White
#808080
Gray
Gray
#FFA500
Orange
Orange
#800080
Purple
Purple
#FFC0CB
Pink
Pink
Conversion Examples
Red to Multiple Formats
Hex: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
CMYK: cmyk(0%, 100%, 100%, 0%)
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
CMYK: cmyk(0%, 100%, 100%, 0%)
Blue to Multiple Formats
Hex: #0000FF
RGB: rgb(0, 0, 255)
HSL: hsl(240, 100%, 50%)
CMYK: cmyk(100%, 100%, 0%, 0%)
RGB: rgb(0, 0, 255)
HSL: hsl(240, 100%, 50%)
CMYK: cmyk(100%, 100%, 0%, 0%)
Green to Multiple Formats
Hex: #00FF00
RGB: rgb(0, 255, 0)
HSL: hsl(120, 100%, 50%)
CMYK: cmyk(100%, 0%, 100%, 0%)
RGB: rgb(0, 255, 0)
HSL: hsl(120, 100%, 50%)
CMYK: cmyk(100%, 0%, 100%, 0%)
Common Hex Color Reference Table
| Color | Name | Hex Code | RGB | HSL |
|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% | |
| Lime | #00FF00 | 0, 255, 0 | 120°, 100%, 50% | |
| Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% | |
| Yellow | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% | |
| Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% | |
| Magenta | #FF00FF | 255, 0, 255 | 300°, 100%, 50% | |
| Silver | #C0C0C0 | 192, 192, 192 | 0°, 0%, 75% | |
| Gray | #808080 | 128, 128, 128 | 0°, 0%, 50% | |
| Maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% | |
| Olive | #808000 | 128, 128, 0 | 60°, 100%, 25% | |
| Green | #008000 | 0, 128, 0 | 120°, 100%, 25% | |
| Purple | #800080 | 128, 0, 128 | 300°, 100%, 25% | |
| Teal | #008080 | 0, 128, 128 | 180°, 100%, 25% | |
| Navy | #000080 | 0, 0, 128 | 240°, 100%, 25% | |
| Orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% | |
| Pink | #FFC0CB | 255, 192, 203 | 350°, 100%, 88% |
What is a Hex Color Code?
A hexadecimal color code is a six-digit representation of colors used in web design and development. Each hex code begins with a hash symbol (#) followed by six characters that define the intensity of red, green, and blue (RGB) components.
How Hex Codes Work
Hex codes consist of three pairs of characters, each representing one color channel:
- #RRGGBB – RR (red), GG (green), BB (blue)
- Each pair ranges from 00 (minimum intensity) to FF (maximum intensity)
- For example, #FF0000 means maximum red (FF), no green (00), no blue (00)
- 16,777,216 possible color combinations exist in the hex system
Short Hex Notation
When both characters in each pair are identical, you can use shorthand notation. For instance, #FFFFFF can be written as #FFF, and #000000 as #000. This three-character format expands to six characters automatically.
Color Format Conversion Methods
Hex to RGB Conversion
Converting hex to RGB involves separating the hex code into three pairs and converting each from hexadecimal (base 16) to decimal (base 10):
Step 1: Take hex code #1F9BD4
Step 2: Separate into pairs: 1F, 9B, D4
Step 3: Convert to decimal: 1F=31, 9B=155, D4=212
Result: rgb(31, 155, 212)
Step 2: Separate into pairs: 1F, 9B, D4
Step 3: Convert to decimal: 1F=31, 9B=155, D4=212
Result: rgb(31, 155, 212)
Hex to HSL Conversion
HSL (Hue, Saturation, Lightness) conversion requires first converting to RGB, then calculating each HSL component:
Step 1: Convert hex to RGB (as above)
Step 2: Normalize RGB values to 0-1 range
Step 3: Calculate hue based on max/min RGB values
Step 4: Calculate saturation and lightness
Result: hsl(199°, 75%, 48%)
Step 2: Normalize RGB values to 0-1 range
Step 3: Calculate hue based on max/min RGB values
Step 4: Calculate saturation and lightness
Result: hsl(199°, 75%, 48%)
Hex to CMYK Conversion
CMYK (Cyan, Magenta, Yellow, Key/Black) is used primarily in printing. Conversion requires RGB intermediary values:
Step 1: Convert hex to RGB
Step 2: Normalize RGB to 0-1 range
Step 3: Calculate K (black) = 1 – max(R,G,B)
Step 4: Calculate C, M, Y using K value
Result: cmyk(85%, 27%, 0%, 17%)
Step 2: Normalize RGB to 0-1 range
Step 3: Calculate K (black) = 1 – max(R,G,B)
Step 4: Calculate C, M, Y using K value
Result: cmyk(85%, 27%, 0%, 17%)
Frequently Asked Questions
What does each digit in a hex color code represent?
Each hex code contains six digits divided into three pairs. The first pair represents red intensity, the second represents green, and the third represents blue. Each digit uses hexadecimal notation (0-9 and A-F), where 00 is the lowest intensity and FF is the highest.
Can I use hex codes without the # symbol?
In CSS and most web contexts, the # symbol is required. However, some applications and programming environments accept hex codes without it. Our converter accepts both formats – with or without the # symbol.
What is the difference between RGB and hex color codes?
Both represent the same colors but in different formats. RGB uses decimal notation (0-255 for each channel), while hex uses hexadecimal notation (00-FF). For example, rgb(255, 0, 0) equals #FF0000. Hex codes are more compact, while RGB is often easier to read.
How many colors can hex codes represent?
Hex codes can represent 16,777,216 unique colors (256 × 256 × 256). This is because each of the three color channels (red, green, blue) has 256 possible values, from 00 to FF in hexadecimal.
What are web-safe colors?
Web-safe colors are 216 colors that displayed consistently across different browsers and operating systems in the past. They use combinations of 00, 33, 66, 99, CC, and FF for each RGB channel. While less relevant with modern displays, they’re still used for maximum compatibility.
When should I use HSL instead of hex?
HSL is preferred when you need to manipulate colors programmatically, such as creating color variations (lighter, darker, more saturated). It’s more intuitive for adjusting brightness and saturation. Hex is better for static color definitions and sharing color values.
What is the hex code for transparent?
Standard six-digit hex codes cannot represent transparency. For transparency, use eight-digit hex codes (with alpha channel) like #00000000, or use rgba() format in CSS. The last two digits in eight-digit hex represent opacity from 00 (fully transparent) to FF (fully opaque).
Why do designers prefer hex codes?
Hex codes are compact, easy to copy and share, and universally supported across all web technologies. They’re also the standard format in design software like Photoshop and Figma, making them ideal for design-to-development workflows.
Popular Color Scheme Combinations
These hex code combinations create harmonious color palettes for web design, branding, and creative projects:
Ocean Breeze
Forest Green
Sunset Glow
Purple Haze
Monochrome
Coral Reef