RGB To Hex

RGB to Hex

Enter Red, Green and Blue values from 0 to 255, plus Opacity (%) if the colour should be see-through. You can also paste a colour you already have into Or paste any colour, or choose one with Pick a colour.

The results update as you type. You get the hex code, the short hex if there is one, rgb(), rgba(), hsl() and the closest CSS colour name. There’s also a swatch showing how white and black text read on your colour.

Example

Red 0, Green 102, Blue 204, Opacity 100:

Turn on Uppercase letters to get #0066CC instead. Browsers treat both the same.

How the hex code is worked out

Each channel becomes two hexadecimal digits: the number of times it divides by 16, then what’s left over. The digits 10 to 15 are written A to F.

• Red 0 → 0 and 0 → 00
• Green 102 → 6 × 16 = 96, remainder 6 → 66
• Blue 204 → 12 × 16 = 192, remainder 12 → cc

Put them together and you get #0066cc. Two hex digits can hold 256 values, 0 to 255, which is exactly the range of an RGB channel. That’s why 255 is the maximum and #ffffff is white.

Short hex exists when every pair is a repeated digit. #0066cc shortens to #06c, because browsers expand each digit back into a pair. #0067cc has no short form, so that field stays empty.

Opacity and eight-digit hex

Below 100% opacity, the hex code gets a fourth pair for the alpha channel. Opacity runs from 0 to 255 just like the colours: 80% is 204, which is cc, so the colour above becomes #0066cccc.

Because there are only 256 steps, some percentages can’t be stored exactly. 50% works out as 127.5, which rounds to 128 (80), and that is really 50.2%. You won’t see the difference, but it’s why converting back can give you 50.2 instead of 50.

Every current browser reads eight-digit hex. Internet Explorer and browsers from before about 2017 don’t, and the notes remind you of this. If you still need to support them, use the rgba() value instead. It does the same thing and has worked for much longer.

Contrast with white and black text

The swatch shows sample text in white and black on your colour, with the contrast ratio for each. The ratios are calculated the way WCAG 2 defines them:

Teal (#008080) shows why it’s worth checking. White text scores 4.77:1 and black scores 4.40:1. The colour looks mid-dark, but black text misses AA by a small margin, so white is the one to use for normal-size text. Rebeccapurple (#663399) is clearer-cut: 8.41:1 with white text, which passes AAA, and 2.50:1 with black, which fails.

For a colour below 100% opacity, the ratios are measured as it would look on a white page.

Pasting other formats

The paste box reads almost any way a colour is written:

• rgb(0, 102, 204), rgb(0 102 204 / 80%), rgba(...)
• hsl(210 100% 40%)
• three bare numbers: 0 102 204
• percentages: rgb(0% 40% 80%) gives the same colour as the example
• hex with 3, 4, 6 or 8 digits, with or without #
• any of the 148 CSS colour names, in any case: RoyalBlue works too

When the tool has to adjust something, the notes say so. A value of 300 is reduced to 255, the same way browsers handle it. 102.4 is rounded to 102, and percentages are converted to the 0–255 scale. If what you paste isn’t a colour, you get a message saying so, and the last valid colour stays on screen.

Colour names

CSS has 148 named colours. The name field shows the exact name when your colour is one of them, and the notes point that out. #663399 is rebeccapurple, added to CSS in 2014 in memory of Rebecca Meyer, the daughter of CSS author Eric Meyer.

Most colours don’t have an exact name, so the tool shows the nearest one instead. #0066cc is closest to royalblue (#4169e1), which is noticeably different. Use the nearest name to describe a colour, not as a replacement for it in code.

FAQ

Is #0066CC the same as #0066cc?

Yes. Hex colours aren’t case-sensitive. The uppercase switch only matches whatever style your project already uses.

What’s the difference between rgb() and rgba()?

In modern CSS, nothing: rgb() accepts opacity too, written as rgb(0 102 204 / 0.8). The tool shows both because rgba(0, 102, 204, 0.8) is the form older code and older browsers expect.

Should I use hex or rgb() in CSS?

Both describe exactly the same colours. Hex is shorter and what most design tools export. rgb() and hsl() are easier to adjust by hand. With hsl(), for example, you can change the lightness without touching the hue.

How do I convert a hex code back to RGB?

Use Hex to RGB. To find a colour visually first, try the Wheel Color Picker.

Is anything sent to a server?

No. The conversion happens in your browser.