HEX to RGB & RGB to HEX Color Converter

About this tool

This color converter turns a HEX code into RGB and RGB values into a HEX code, and shows the same color as RGBA, HSL, HSV, OKLCH and a rough CMYK. You can type any of those formats, a CSS color name such as tomato, or use the color picker; every other format updates as you type. Values are written in both the modern CSS syntax, such as rgb(232 163 61 / 50%), and the older comma syntax that every browser accepts. The math runs in your browser.

How HEX to RGB conversion works

A six-digit HEX code is three base-16 numbers in a row: red, green, then blue. Each pair runs from 00 (0) to FF (255). To turn a pair into decimal, multiply the first digit by 16 and add the second, where A to F stand for 10 to 15. The page opens on #E8A33D:

• E8 = 14 × 16 + 8 = 232 red
• A3 = 10 × 16 + 3 = 163 green
• 3D = 3 × 16 + 13 = 61 blue

So #E8A33D is rgb(232, 163, 61). RGB to HEX runs the other way: divide each value by 16, and the whole part and the remainder are the two digits. 232 ÷ 16 = 14 remainder 8, giving E8. Values under 16 need a leading zero, so 5 is 05, never 5. Three-digit codes double each digit, so #3AF is #33AAFF. These forms are defined in the CSS Color Module Level 4 hex notation section.

HEX to RGBA: how alpha is written in 8-digit HEX

An 8-digit code adds a fourth pair for alpha (opacity), where 00 is fully transparent and FF fully opaque. Divide the pair by 255 to get the CSS alpha value. #E8A33D80 has alpha 80, which is 128, and 128 ÷ 255 = 0.502, so the tool writes rgba(232, 163, 61, 0.5) and rgb(232 163 61 / 50%). A 4-digit code is shorthand for 8 digits, so #F808 is #FF880088. Because 255 is odd, exactly 50% has no two-digit code; 127.5 rounds to 128, which is 80.

Watch the order. CSS puts alpha last (#RRGGBBAA), but Android color resources put it first (#AARRGGBB). Pasting an Android value into CSS swaps every channel.

HSL vs HSV

Both start from the same hue angle: which channel is largest decides the part of the color wheel, and the gap to the next channel sets the exact angle. For #E8A33D that is (163 − 61) ÷ (232 − 61) × 60 = 35.8, shown as 36°. After that they differ:

• HSL takes lightness as the average of the largest and smallest channel, (232 + 61) ÷ 2 ÷ 255 = 57%. Saturation is the gap scaled to that lightness: 79%. Result: hsl(36 79% 57%). Lightness 100% is always white, and pure colors sit at 50%. The method is in the spec's HSL to sRGB section.
• HSV (also called HSB, used by many design app pickers) takes value as the largest channel, 232 ÷ 255 = 91%, and saturation as the gap divided by it, 171 ÷ 232 = 74%. Result: hsv(36, 74%, 91%). Pure red is hsv(0, 100%, 100%) but hsl(0 100% 50%).

OKLCH and CMYK

OKLCH gives lightness, chroma and hue in the Oklab space, where equal steps look more even to the eye than in HSL. The tool follows the CSS Color 4 sample conversion code: undo the sRGB gamma curve, convert to CIE XYZ, then to Oklab, then to polar form. Our results were checked against the ColorAide Python library. The default color is oklch(76.49% 0.1399 72.95). For grays, chroma is 0 and the hue is written as none. In OKLCH input, chroma can be a number or a percentage where 100% means 0.4, as MDN's oklch() page explains. If an OKLCH color you type is outside the sRGB range, the tool clips each RGB channel to 0–255 and says so. CSS Color 4 describes a gamut-mapping method that lowers chroma instead, so a browser may show a slightly different color.

The CMYK row uses the naive formula K = 1 − max(R, G, B), then C = (1 − R − K) ÷ (1 − K) and so on, with channels scaled to 0–1. For the default color that gives cmyk(0%, 30%, 74%, 9%). Real print separations depend on ink, paper and press and are made with ICC profiles, so use this only as a rough guide.

Why tools give slightly different numbers

HEX and RGB are exact, but HSL, HSV and OKLCH are decimals, and every tool rounds them its own way. This converter rounds HSL and HSV to whole degrees and percentages, OKLCH lightness and hue to two decimals and chroma to four, and alpha to two decimals unless three are needed to keep the same HEX pair. Whole-number HSL loses precision: #3B82F6 gives hsl(217 91% 60%), which converts back to rgb(60, 131, 246), one step off in red and green. Of 140,608 colors we checked across the RGB range, about 89% came back at least one step off in some channel. Keep the HEX or RGB value as the master copy. Some tools cut off decimals instead of rounding, and a Display P3 color profile changes the numbers too.

Common mistakes

• Reading #3AF as #3A0F00 or padding it with zeros. Each digit is doubled.
• Using percentages and 0–255 numbers interchangeably. In rgb(), 50% is 127.5, not 50.
• Expecting the CSS keyword green to be pure green. It is #008000; full-strength green is lime, as the chart below shows.
• Treating HSL lightness as perceived brightness. Yellow and blue at 50% lightness look very different; OKLCH lightness is closer to what the eye sees.

Chart: basic CSS named colors in HEX, RGB and HSL

These are the 16 basic color keywords from the CSS Color specification, with HSL values calculated using the same method and rounding as this converter.

Once you have the values, check that text in that color is readable with the Contrast Checker, or read how the ratio is calculated in our WCAG color contrast guide. To pull a HEX code out of a photo or screenshot, use the Image Color Picker.