To convert RGB to HEX, move the Red, Green and Blue sliders to your values, or paste a code like rgb(37, 99, 235) into Smart Color Input and select Apply Smart Input. The HEX code, here #2563EB, appears in the preview and in Converted formats with HSL, HSV and CMYK. Each channel becomes two hexadecimal digits.
How to convert RGB to HEX
- Enter the color. Paste any supported code into Smart Color Input and select Apply Smart Input, or type a code in HEX Input and select Apply HEX. You can also pick a preset or select Open picker.
- Fine-tune it. Drag the Red, Green, Blue and Alpha sliders. Switch Slider Mode to HSL sliders drive color to adjust Hue, Saturation and Lightness instead.
- Read the formats. The Converted formats list shows the color as HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK, each with its own copy button.
- Copy or save. Use Copy HEX, Copy RGB or Copy HSL, Copy all formats for everything, or Download TXT.
RGB to HEX formula, with a worked example
A HEX color is the same three RGB numbers written in base 16. Each channel runs from 0 to 255, which fits in exactly two hex digits (00 to FF). To convert a channel, divide it by 16: the whole number is the first digit and the remainder is the second, using A-F for 10-15.
| Channel | Decimal | Divide by 16 | Hex |
|---|---|---|---|
| Red | 37 | 2 remainder 5 | 25 |
| Green | 99 | 6 remainder 3 | 63 |
| Blue | 235 | 14 remainder 11 | EB |
Join the pairs and add a hash: rgb(37, 99, 235) is #2563EB. In JavaScript:
"#" + [37, 99, 235].map(n => n.toString(16).padStart(2, "0")).join("")
// "#2563eb"The padStart matters: 5 is 5 in hex, and without padding rgb(5, 5, 5) would wrongly become #555 instead of #050505. Case doesn't matter, so #2563eb and #2563EB are the same color.
How to convert HEX to RGB
Go the other way: split the hex code into three pairs and convert each from base 16. For each pair, multiply the first digit by 16 and add the second.
25= 2 × 16 + 5 = 3763= 6 × 16 + 3 = 99EB= 14 × 16 + 11 = 235
So the hex code #2563EB is rgb(37, 99, 235). In code, parseInt("EB", 16) returns 235. Two variants are common. A 3-digit code doubles each digit, so #F60 is #FF6600. An 8-digit code adds an alpha pair at the end: in #2563EBCC, CC is 204, and 204 / 255 = 0.8, so it equals rgba(37, 99, 235, 0.8). Smart Color Input accepts both 6- and 8-digit codes, and the Alpha slider and checkerboard preview show the transparency.
HSL to HEX, HSV and RGB to CMYK
The other formats describe the same color differently. For #2563EB:
| Format | Value | What the numbers mean |
|---|---|---|
| HEX | #2563EB | Red, green, blue in base 16 |
| RGB | rgb(37, 99, 235) | Red, green, blue from 0 to 255 |
| HSL | hsl(221, 83%, 53%) | Hue angle, saturation, lightness |
| HSV | hsv(221, 84%, 92%) | Hue angle, saturation, value (brightness) |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Cyan, magenta, yellow, black ink |
HSL to HEX always goes through RGB. With S and L as fractions, compute C = (1 - |2L - 1|) × S, X = C × (1 - |(H / 60) mod 2 - 1|) and m = L - C / 2. Pick (R, G, B) from C, X and 0 by the hue's 60° sector, add m, and multiply by 255. For hsl(210, 50%, 40%): C = 0.4, X = 0.2, m = 0.2, the 180-240° sector gives (0, X, C), so the result is (0.2, 0.4, 0.6) × 255 = rgb(51, 102, 153) = #336699.
RGB to CMYK uses K = 1 - max(R, G, B) / 255, then C = (1 - R/255 - K) / (1 - K), and the same for M and Y. That's a straight math conversion with no printer profile, so treat it as a starting point and ask your print shop for exact values.
Checking contrast for readable text
The Color details & contrast panel shows the color's luminance, its contrast ratio against white and against black text, a suggested text color and live Aa previews. WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal body text (level AA), 3:1 for large text, and 7:1 for level AAA.
Worked through the WCAG formula, #2563EB has a relative luminance of about 0.15. Against white that's (1 + 0.05) / (0.15 + 0.05) ≈ 5.2:1, which passes AA for normal text. Against black it's about 4.1:1, enough only for large text. So white text on this blue works for buttons.
Use Complement for the opposite hue, Invert to flip the color (each channel becomes 255 minus its value), and the Related palette for lighter tints and darker shades of the same color. To build gradients from your colors, try the CSS gradient generator, and to pull a color out of a photo, use the image color picker.
Frequently asked questions
How do I convert RGB to HEX manually?
Convert each of the three numbers (0-255) to a two-digit hexadecimal value and join them after a #. For example, 37, 99 and 235 become 25, 63 and EB, so the color is #2563EB.
How do I convert a HEX code to RGB?
Split the code into three pairs and convert each from base 16: the first digit times 16 plus the second. #2563EB gives 37, 99 and 235, or rgb(37, 99, 235).
What color formats can I paste in?
6- or 8-digit HEX, rgb(), rgba(), hsl(), hsla(), hsv() and cmyk() values. Paste into Smart Color Input and select Apply Smart Input.
What does the 8-digit HEX code mean?
The last two digits are the alpha (opacity) channel from 00 (transparent) to FF (opaque). #2563EBCC is the same blue at 80% opacity.
Is RGB to CMYK conversion accurate for printing?
It's mathematically correct but not color-managed. Real print results depend on the paper, inks and ICC profile, so confirm critical brand colors with your printer.
What contrast ratio do I need for accessible text?
WCAG 2 level AA needs at least 4.5:1 for normal text and 3:1 for large text; level AAA needs 7:1. The converter shows the ratio of your color against white and black.