Hex Color Converter (HEX, RGB, HSL)
Convert a color between hex, RGB, and HSL formats instantly -- paste one and get the other two for CSS or design work.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
#RRGGBB where RR, GG, BB are hex values (00-FF)
A hex color code represents a color using three pairs of hexadecimal digits. Each pair encodes the intensity (0-255) of one RGB channel: red, green, and blue. The calculator converts between hex, RGB, HSL, HSV, and CMYK color models.
Worked Examples
Example 1: Converting Web Color to RGB and HSL
Problem:Convert the hex color #FF5733 to RGB and HSL values for use in CSS.
Solution:Hex #FF5733:\nRed: FF = 255\nGreen: 57 = 87\nBlue: 33 = 51\n\nRGB: rgb(255, 87, 51)\n\nHSL calculation:\nMax = 255/255 = 1.0, Min = 51/255 = 0.2\nH = ((87-51)/(255-51)) * 60 = 10.6 degrees\nL = (1.0 + 0.2) / 2 = 0.6 = 60%\nS = (1.0 - 0.2) / (1 - |2*0.6 - 1|) = 100%\n\nHSL: hsl(11, 100%, 60%)
Result:#FF5733 = RGB(255, 87, 51) = HSL(11, 100%, 60%)
Example 2: Finding Complementary Color for Design
Problem:Find the complementary color of #3498DB (a blue) for a call-to-action button.
Solution:Original: #3498DB = RGB(52, 152, 219)\nComplement: Subtract each from 255:\nR: 255 - 52 = 203\nG: 255 - 152 = 103\nB: 255 - 219 = 36\nComplement: #CB6724 (warm orange)\n\nThis creates strong visual contrast for CTAs against a blue background.
Result:Complement of #3498DB is #CB6724 (orange, excellent contrast)
Frequently Asked Questions
How do you convert between hex color codes and RGB values?
To convert hex to RGB, split the six-character hex code into three pairs and convert each pair from hexadecimal to decimal. For #FF5733: FF = 255 (red), 57 = 87 (green), 33 = 51 (blue), giving RGB(255, 87, 51). To convert RGB to hex, convert each decimal value (0-255) to a two-digit hexadecimal number and concatenate them. For RGB(128, 64, 200): 128 = 80, 64 = 40, 200 = C8, giving #8040C8. When a decimal value converts to a single hex digit (like 10 = A), pad with a leading zero (0A). Hex Color Converter (HEX, RGB, HSL) performs both conversions instantly as you type.
What is the HSL color model and how does it relate to hex?
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0-360): 0 is red, 120 is green, 240 is blue. Saturation (0-100%) measures color intensity, where 0% is gray and 100% is fully vivid. Lightness (0-100%) controls brightness, where 0% is black, 50% is the pure color, and 100% is white. HSL is more intuitive than hex/RGB for humans because it separates color perception into independent dimensions. To darken a color, reduce lightness. To make it pastel, reduce saturation. CSS supports HSL directly with hsl() notation, making it popular for creating harmonious color schemes.
What is CMYK and when should I use it instead of hex colors?
CMYK stands for Cyan, Magenta, Yellow, and Key (Black) and is the color model used in printing. While screens emit light using RGB (additive color mixing), printers apply ink using CMYK (subtractive color mixing). Colors that look vibrant on screen may appear differently in print because the color gamuts differ. Converting hex/RGB to CMYK helps predict how a digital color will print. Pure red (#FF0000) in CMYK is roughly C0 M100 Y100 K0. Some vivid screen colors have no exact CMYK equivalent, which is why print proofing is important. Use hex/RGB for web and digital projects, and CMYK for print materials like brochures and business cards.
What is color contrast and why does it matter for accessibility?
Color contrast is the difference in luminance between foreground text and background color. The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios to ensure readability for users with visual impairments. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The contrast ratio is calculated from the relative luminance of two colors using the formula (L1 + 0.05) / (L2 + 0.05). Hex Color Converter (HEX, RGB, HSL) shows luminance values and whether a color is dark or light, helping you choose accessible color combinations for your designs.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy