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 for accuracy by Daniel Agrici, Founder & Lead Developer
Hex Color Converter (HEX, RGB, HSL)
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: #RRGGBB where RR, GG, BB are hex values (00-FF)
Worked example โ #FF5733 = RGB(255, 87, 51) = HSL(11, 100%, 60%)
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: Red: FF = 255 Green: 57 = 87 Blue: 33 = 51 RGB: rgb(255, 87, 51) HSL calculation: Max = 255/255 = 1.0, Min = 51/255 = 0.2 H = ((87-51)/(255-51)) * 60 = 10.6 degrees L = (1.0 + 0.2) / 2 = 0.6 = 60% S = (1.0 - 0.2) / (1 - |2*0.6 - 1|) = 100% HSL: 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) Complement: Subtract each from 255: R: 255 - 52 = 203 G: 255 - 152 = 103 B: 255 - 219 = 36 Complement: #CB6724 (warm orange) This creates strong visual contrast for CTAs against a blue background.
Result:Complement of #3498DB is #CB6724 (orange, excellent contrast)
Frequently Asked Questions
What is a hex color code and how does it work?
A hex color code is a six-character string preceded by a hash symbol (#) that represents a color in the RGB color model. Each pair of characters encodes one color channel: the first two for red, the middle two for green, and the last two for blue. Each pair is a hexadecimal number from 00 (0 intensity) to FF (maximum intensity, 255 in decimal). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Mixing channels creates other colors: #FFFF00 (red + green) produces yellow. Hex codes can also be written in shorthand when each pair has identical digits, like #F00 for #FF0000.
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.
What are complementary colors and how do you find them?
Complementary colors sit opposite each other on the color wheel and create maximum visual contrast when placed together. To find the complement of a hex color, subtract each RGB component from 255. For #FF5733 (red = 255, green = 87, blue = 51), the complement is RGB(0, 168, 204) or #00A8CC. In HSL terms, the complementary color has the same saturation and lightness but a hue shifted by 180 degrees. Complementary color pairs include red-cyan, blue-orange, and green-magenta. Designers use complementary colors to create vibrant, eye-catching designs, but too much complementary color use can be visually overwhelming.
How do you choose color schemes for web design?
Professional color schemes typically use 3-5 colors in specific relationships. Monochromatic schemes use variations of one hue with different saturation and lightness values. Analogous schemes use colors adjacent on the color wheel (like blue, blue-green, green). Triadic schemes use three colors evenly spaced on the wheel (like red, yellow, blue). Split-complementary uses a base color plus the two colors adjacent to its complement. Start with a primary brand color, then derive secondary and accent colors using these relationships. Use neutral colors (grays, whites) for backgrounds and text. Tools like this converter help explore variations by adjusting HSL values.
What is the difference between hex, RGB, and RGBA color formats in CSS?
CSS supports multiple color formats that represent the same colors differently. Hex (#FF5733) is the most compact for opaque colors. RGB uses rgb(255, 87, 51) with decimal values 0-255 per channel. RGBA adds an alpha channel for transparency: rgba(255, 87, 51, 0.5) is 50% transparent. HSL and HSLA offer the same but using hue, saturation, and lightness, which many designers find more intuitive for color adjustment. Modern CSS also supports the newer color() function and named colors like 'tomato' or 'cornflowerblue.' All formats produce identical results in browsers, so choose based on readability and whether you need transparency.
What is relative luminance and how is it calculated?
Relative luminance measures the perceived brightness of a color as the human eye sees it, weighted according to how sensitive the eye is to each primary color. The formula is L = 0.2126R + 0.7152G + 0.0722B, where R, G, and B are the linearized (gamma-corrected) color channel values normalized to 0-1. The eye is most sensitive to green (71.52% weight), less to red (21.26%), and least to blue (7.22%). This is why pure green appears brighter than pure red or blue at the same intensity. Luminance values range from 0 (black) to 1 (white). Colors with luminance below 0.5 are generally considered dark and work better with light text overlays.
How do you create a grayscale version of a color?
Converting a color to grayscale involves calculating a single brightness value that represents the perceived intensity. The standard formula uses weighted averages based on human eye sensitivity: Gray = 0.299R + 0.587G + 0.114B. This formula accounts for the eye being most sensitive to green and least sensitive to blue. The resulting gray value is used for all three channels: RGB(gray, gray, gray). For #FF5733 with R=255, G=87, B=51: Gray = 0.299(255) + 0.587(87) + 0.114(51) = 76.245 + 51.069 + 5.814 = 133. The grayscale equivalent would be #858585. This technique is used in image processing, photography, and designing for print accessibility.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎRgb Hsl Hsv Converter
Calculate rgb hsl hsv converter with interactive inputs and clear steps.
๐งฎHex Binary Converter
Calculate hex binary converter with interactive inputs and clear steps.
๐งฎRgb to Cmyk Converter
Calculate rgb to cmyk converter with interactive inputs and clear steps.
๐งฎEpoch Timestamp Converter Calculator
Calculate epoch timestamp converter with inputs, formulas, and instant results.
๐งฎTimezone Offset Converter Calculator
Calculate timezone offset converter with inputs, formulas, and instant results.
๐งฎCss Unit Converter
Calculate css unit converter with inputs, formulas, and instant results.
๐งฎFile Size Converter
Calculate file size converter with inputs, formulas, and instant results.
๐งฎJson to Csv Converter
Convert JSON data to CSV format and vice versa with field mapping and delimiter options.