RGB Hex Converter
Convert between RGB and Hex color codes instantly. View color previews, HSL values, luminance, complementary colors, and accessibility contrast
RGB Hex Converter
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Hex = #(R_hex)(G_hex)(B_hex)
Worked example โ Hex: #2980B9 | HSL: 204deg 64% 44% | Relative luminance: 0.4456
Formula
Hex = #(R_hex)(G_hex)(B_hex)
Each RGB decimal value (0-255) is converted to its two-digit hexadecimal equivalent (00-FF) and concatenated with a hash prefix. The reverse conversion parses each hex pair back to decimal.
Worked Examples
Example 1: Converting a Brand Color to Hex
Problem:Convert the RGB color (41, 128, 185) to its hexadecimal representation for use in a website stylesheet.
Solution:Red: 41 / 16 = 2 remainder 9, so 41 = 29 in hex Green: 128 / 16 = 8 remainder 0, so 128 = 80 in hex Blue: 185 / 16 = 11 remainder 9, so 185 = B9 in hex Hex Code = #2980B9 sRGB channels (0-1): 0.161, 0.502, 0.725 Relative luminance (fast approximation, no gamma linearisation) = 0.2126(0.161) + 0.7152(0.502) + 0.0722(0.725) = 0.4456
Result:Hex: #2980B9 | HSL: 204deg 64% 44% | Relative luminance: 0.4456
Example 2: Converting Hex to RGB
Problem:Convert the hex color #E74C3C to its RGB values for use in a design tool that requires decimal input.
Solution:E7 in decimal = 14x16 + 7 = 231 4C in decimal = 4x16 + 12 = 76 3C in decimal = 3x16 + 12 = 60 RGB = (231, 76, 60) This is a vibrant red/coral color
Result:RGB: (231, 76, 60) | HSL: 6deg 78% 57%
Frequently Asked Questions
What is the difference between RGB and Hex color codes?
RGB and Hex are two different notations for representing the exact same colors. RGB uses three decimal numbers ranging from 0 to 255 for the red, green, and blue channels, written as rgb(255, 128, 0) in CSS. Hex uses a six-character hexadecimal string prefixed with a hash symbol, where each pair of characters represents one color channel in base-16 notation, such as #FF8000. The conversion is straightforward because each hex pair directly corresponds to one RGB channel. FF in hexadecimal equals 255 in decimal, 80 equals 128, and 00 equals 0. Both formats can represent exactly 16,777,216 unique colors, which is 256 cubed. Hex notation is more compact and is the traditional format used in web development and design.
How do you manually convert RGB values to hexadecimal?
Converting RGB to hexadecimal requires converting each decimal value from 0 to 255 into its two-digit hexadecimal equivalent. To convert a decimal number to hex, divide the number by 16 to get the first digit, and the remainder becomes the second digit. Each digit maps to the hex characters 0-9 and A-F, where A=10, B=11, C=12, D=13, E=14, and F=15. For example, to convert RGB value 200 to hex: 200 divided by 16 equals 12 remainder 8, so 200 decimal equals C8 in hex. For the full color rgb(66, 133, 244): 66 becomes 42, 133 becomes 85, and 244 becomes F4, giving the hex code #4285F4. Single-digit hex values are padded with a leading zero.
What is color luminance and why is it important for accessibility?
Color luminance is a measure of the perceived brightness of a color as seen by the human eye. It is calculated using the formula L equals 0.2126 times the red channel plus 0.7152 times the green channel plus 0.0722 times the blue channel, where each channel is normalized to the 0 to 1 range. The coefficients reflect that human eyes are most sensitive to green light and least sensitive to blue light. Luminance is critical for web accessibility because the Web Content Accessibility Guidelines require a minimum contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text between foreground and background colors. Designers use luminance calculations to ensure text remains readable for users with visual impairments and color vision deficiencies.
What are shorthand hex codes and when can you use them?
Shorthand hex codes use three characters instead of six to represent colors in a more compact form. This shorthand is only valid when each pair of hexadecimal digits in the full code consists of two identical characters. For example, #FF5533 can be shortened to #F53, where each character is doubled to reconstruct the original: F becomes FF, 5 becomes 55, and 3 becomes 33. Common shorthand codes include #FFF for white, #000 for black, #F00 for red, #0F0 for green, and #00F for blue. However, most real-world colors cannot use shorthand because their hex pairs are not made of identical characters. The code #4285F4 cannot be shortened because 42, 85, and F4 do not have repeating characters. Modern CSS also supports eight-digit hex codes with alpha transparency.
How do HSL and HSV color models relate to RGB and Hex?
HSL and HSV are alternative color models that represent the same colors as RGB and Hex but organize them in a more intuitive way for humans. HSL stands for Hue, Saturation, and Lightness, while HSV stands for Hue, Saturation, and Value. The hue component ranges from 0 to 360 degrees on a color wheel, where 0 is red, 120 is green, and 240 is blue. Saturation represents color intensity from 0 percent being gray to 100 percent being full color. In HSL, lightness goes from 0 percent being black to 100 percent being white with 50 percent being the pure color. HSV is similar but value represents brightness from 0 being black to 100 being the brightest. Designers often prefer HSL for adjusting colors because changing lightness or saturation independently is more intuitive than modifying individual RGB channels.
How does the sRGB colour space relate to raw RGB numbers?
An RGB triple is only a set of coordinates; a colour space tells you which real colours those coordinates mean. sRGB is the default assumption for the web and defines specific red, green and blue primaries, a white point and a transfer curve. The same values 255, 0, 0 map to a more saturated red in a wide-gamut space such as Display P3 or Adobe RGB. Without an embedded profile, applications assume sRGB, which is why untagged wide-gamut images often look dull or oversaturated when they are displayed.
Why must RGB channels be linearised before computing WCAG relative luminance?
sRGB values are gamma-encoded, so the numbers are not proportional to light intensity. WCAG first divides each channel by 255, then linearises it: values at or below 0.03928 are divided by 12.92, and higher values are transformed with ((C + 0.055) divided by 1.055) raised to the power 2.4. Only then are the linear channels weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue and summed. Skipping the linearisation step gives luminance figures that can be far off and contrast ratios that wrongly pass or fail.
How is a contrast ratio between two colours actually calculated?
Compute the relative luminance of each colour, call the lighter one L1 and the darker one L2, then take L1 plus 0.05, divided by L2 plus 0.05. The 0.05 offset models ambient screen flare, so the result is bounded between 1:1 for identical colours and 21:1 for pure black against pure white. WCAG 2 asks for at least 4.5:1 for normal body text and 3:1 for large text and for user interface components and graphical objects, with a stricter 7:1 tier for enhanced conformance.
What do eight-digit hex codes and the alpha channel represent?
An eight-digit code appends a two-character alpha pair to the usual RGB triplet, so #FF8000CC is that orange at an alpha of CC, which is 204 out of 255 or about 80 percent opacity. The four-digit shorthand #F80C expands the same way three-digit shorthand does. Alpha describes coverage during compositing rather than a colour of its own, so the final pixel depends on what sits underneath: source alpha times source colour, plus one minus alpha times the backdrop, assuming straight rather than premultiplied alpha.
Why do the same hex values look different on different monitors?
Hex codes are device-independent instructions that each display renders through its own panel primaries, backlight, gamma calibration and any picture-mode processing. A wide-gamut panel showing untagged sRGB content without colour management stretches the values across its larger gamut and oversaturates them. Ambient light, viewing angle on IPS versus VA panels, and unit-to-unit manufacturing variation add more spread. Hardware calibration to a known profile, plus embedding profiles in exported assets, is what keeps a brand colour consistent across devices.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐จColor Converter
Convert between color formats
๐งฎFont Size Converter
Convert between points, pixels, ems, rems, and percentages for web and print typography.
๐งฎFrequency to Note Converter
Convert frequency in Hz to the nearest musical note and cents deviation.
๐งฎFrame Rate Converter
Convert between frame rates (24, 25, 30, 60 fps) and calculate time remapping.
๐งฎAspect Ratio Converter
Convert video aspect ratios and calculate letterboxing or pillarboxing dimensions.
๐งฎDepth of Field Calculator
Calculate depth of field with interactive inputs and clear steps.
๐งฎHyperfocal Distance Calculator
Calculate hyperfocal distance with interactive inputs and clear steps.
๐งฎField of View Calculator (camera)
Calculate field of view (camera) with interactive inputs and clear steps.