RGB to HEX Converter

Paste your RGB color and the hex code shows up right away, that's the easy part. The reason to use this one over the dozens of other rgb-to-hex boxes is what happens around it. You paste the color however you already have it, a full rgb(59, 130, 246) string copied straight out of your CSS or Chrome DevTools, and you get back the hex plus HSL, HSV, and CMYK at the same time, each on its own row with its own copy button.

Most converters make you chop that rgb(59, 130, 246) into three little number fields before they'll do anything, then they dead-end you at a single hex code. So the second a print vendor asks for CMYK, or you want the HSL to nudge the lightness, you're opening another tab and pasting the color again. Here one paste puts every common format in front of you at once.

1. Paste or type your color into the input. A full rgb(59, 130, 246) string is the obvious one for RGB, but a hex like #3b82f6, an hsl(217, 91%, 60%), or even a plain color name like tomato all parse the same way.
2. Or click the picker to choose a color by eye. Drag around the color field and everything below updates live, which helps when you know the shade you want but not its numbers.
3. Check the swatch. The big preview block fills with the exact color so you can confirm you pasted the right one before you copy anything.
4. Copy the format you need. HEX, RGB, HSL, HSV, and CMYK each get their own row and copy button. Grab the hex for your stylesheet, or the CMYK if it's going to print.
5. Copy a shareable link when you want to hand the exact color to someone. The button builds a URL that reopens this page already set to your color, handy for a Slack message or a design ticket.

If what you type isn't a real color yet, the input turns red and shows a short hint instead of guessing, so you can keep editing until it takes. Nothing you enter ever leaves the browser, because the whole thing runs on your machine, so it keeps working even if your wifi drops after the page has loaded.

The universal input is the part worth leaning on. It reads any valid CSS color, so you're never translating your color into the one shape the tool demands. Pull rgb(59, 130, 246) out of the DevTools color inspector, paste it, and you're set. With a hex from a brand guide and the RGB and HSL wanted next to it, paste the hex instead. It converts in any direction, so an hsl value or a color name works just as well as rgb.

That set of five formats is the other half of it. Say you're building a component and the designer handed you rgb(59, 130, 246) as the accent. You paste it once and you've got the hex for the CSS, the HSL if you want a lighter hover state (bump the L value and re-enter it), and the CMYK ready if this ever goes to print, all from that one paste. A single-purpose rgb-to-hex converter gives you one of those and sends you hunting for the rest.

Named colors parse too, which is more useful than it sounds. Inherit a stylesheet full of slategray, tomato, and rebeccapurple and need the real hex values to hand a designer who's never heard of them? Paste the name and read the code.

Each RGB channel is a number from 0 to 255. That's exactly the range one byte holds, and a byte is written as two hex digits, so every channel becomes a two-character pair and three channels make the six-character #RRGGBB code.

To do a channel by hand, divide the number by 16. The whole part is the first hex digit, the remainder is the second, with A through F standing in for 10 through 15. Taking 229 as the example, divide by 16 and you get 14 remainder 5. Fourteen is E, five is 5, so 229 is E5. Run red, green, and blue through that same step and join the three pairs in order.

The one thing that trips people up is small channels. A value like 5 converts to a single character, and you have to pad it to 05 to keep the pair two digits wide. Drop that leading zero and the six-digit code shifts over, the browser reads the wrong channels, and you get a color you never asked for. The tool pads automatically, but it's the number-one hand-conversion mistake, so it's worth watching for.

One handy shorthand while we're here: when every channel's two digits are a repeated pair, CSS lets you collapse the six-digit code to three. #FFCC00 can be written #FC0, and #FFFFFF becomes #FFF. It only works when all three pairs happen to repeat. This tool always gives you the full six-digit code, which is never ambiguous, and you can shorten it yourself when a color qualifies.

A handful of colors come up so often it helps to just recognize them:

• rgb(0, 0, 0) is #000000, black, every channel off.
• White is the opposite, rgb(255, 255, 255) gives #FFFFFF.
• Pure red, rgb(255, 0, 0), is #FF0000, and only the first pair is lit.
• rgb(0, 255, 0) is #00FF00, the pure green CSS also calls lime.
• Blue lands at #0000FF from rgb(0, 0, 255).
• Yellow is red and green at full with blue off, rgb(255, 255, 0), so #FFFF00.
• rgb(128, 128, 128) is #808080, a middle gray, because all three channels match.

The pattern behind all of them: 0 always maps to 00, 255 always maps to FF, and whenever the three channels are equal you get a neutral gray with no color cast. The moment you spot digits other than 00 and FF in a code, you're looking at a blended shade.