HEX to RGB Converter (and RGB to HEX)

HEX to RGB Converter — Colour Codes Made Simple

Every colour on a screen is a mix of red, green and blue light, but the same colour gets written in several different ways. Designers copy hex codes like #1B98E0 from Figma or Canva, CSS often uses rgb(27, 152, 224), some tools want HSL, a printer asks for CMYK, and an API might expect a single decimal number. This free HEX to RGB converter translates between all of them instantly, in both directions. Type a hex code, type RGB values, or just pick a colour, and every format updates together.

It also answers the question designers ask right after picking a colour: will text be readable on it? The converter calculates the WCAG 2 contrast ratio of both white and black text on your colour and grades each one AA, AAA or fail, so you can choose the right text colour for buttons, banners, thumbnails and slides. Everything happens in your browser.

How to Use the Converter

1. Enter a HEX code such as #1B98E0, 1b98e0, the short form #F80, or an 8-digit code with transparency like #1B98E080.
2. Or enter RGB in any common style: rgb(27, 152, 224), rgba(27, 152, 224, 0.5), 27 152 224 or percentages.
3. Or pick a colour with the colour picker; the other fields fill in automatically.
4. Read the table for HEX, RGB, HSL, approximate CMYK, a ready-to-paste CSS variable line and the decimal value.
5. Look at the swatch and contrast line to see white and black text on your colour, with their contrast ratios.
6. Copy HEX, RGB or every format at once.

How HEX and RGB Relate

A hex colour is just three numbers written in hexadecimal (base 16). The six digits split into three pairs: the first pair is red, the second green, the third blue. Each pair ranges from 00 (0) to FF (255), which is exactly the range of one RGB channel. So the conversion is a base-16-to-base-10 conversion done three times.

HEX to RGB: for #1B98E0, 1B = 1 × 16 + 11 = 27, 98 = 9 × 16 + 8 = 152, and E0 = 14 × 16 + 0 = 224, giving rgb(27, 152, 224).

RGB to HEX: for rgb(255, 87, 51), 255 = FF, 87 = 57 (5 × 16 + 7) and 51 = 33 (3 × 16 + 3), giving #FF5733.

Our number base converter shows the same base-16 arithmetic for any number.

Short and long hex codes

CSS allows a 3-digit shorthand when both digits of every pair are identical: #F80 expands to #FF8800, and #FFF to #FFFFFF. A 4-digit code adds a shorthand alpha digit. An 8-digit code puts alpha as the last pair: 80 hex is 128, and 128 ÷ 255 ≈ 0.5, so #1B98E080 is the blue at about 50% opacity — rgba(27, 152, 224, 0.5).

Worked Examples

The grey #767676 is a well-known edge case: it is about the lightest grey that still passes AA (4.54:1) as text on a white background, and the darkest that passes with black — barely, either way.

HSL: the Designer-Friendly Format

HSL describes a colour by hue, saturation and lightness. Hue is the position on the colour wheel in degrees — 0° red, 120° green, 240° blue. Saturation is how vivid the colour is, from grey (0%) to full colour (100%). Lightness runs from black (0%) through the pure colour (50%) to white (100%). Its big advantage is that you can create hover states, tints and shades by changing one number: keep hue and saturation, and raise or lower lightness. All modern browsers accept hsl() in CSS.

CMYK: an Approximation for Print

Printers mix cyan, magenta, yellow and black ink, which subtract light rather than add it. The converter uses the standard simple formula — K = 1 − max(R, G, B), then C, M and Y from the remaining values — which is fine for rough guidance. Real print colours depend on the paper, ink and ICC colour profile, and many bright screen colours, especially vivid blues and greens, simply cannot be printed exactly. For visiting cards, packaging or anything where colour matters, ask your printer for a proof.

Colour Contrast and Accessibility

The Web Content Accessibility Guidelines (WCAG 2) define a contrast ratio from 1:1 (no contrast) to 21:1 (black on white). It is calculated from the relative luminance of the two colours. The thresholds are:

• AA, normal text: at least 4.5:1
• AA, large text (roughly 24 px regular or 18.66 px bold and above): at least 3:1
• AAA, normal text: at least 7:1

Good contrast is not only about accessibility rules. It decides whether a YouTube thumbnail's title can be read on a phone in sunlight, whether a button label is clear, and whether older viewers can read your slides. A surprising number of popular brand blues and oranges look bold but fail with white text — check the ratio rather than trusting your eyes on a bright monitor.

Where Each Format Is Used

• HEX — CSS, HTML, Figma, Canva, Photoshop, brand guidelines.
• RGB / rgba — CSS (especially when you need transparency), JavaScript canvas, video and game tools.
• HSL — CSS themes and design systems where you generate tints and shades.
• CMYK — print design: brochures, cards, packaging.
• Decimal — some APIs and apps that store a colour as one integer, such as chat embed colours.

How Many Colours Can HEX and RGB Describe?

Each channel has 256 possible values (0 to 255), which is 8 bits. Three channels make 24 bits, so standard hex and RGB codes can describe 256 × 256 × 256 = 16,777,216 colours — the "16.7 million colours" in monitor specifications. Adding an alpha channel brings it to 32 bits per pixel, which is how most images and screens store colour in memory. The decimal value in the converter's table is simply those 24 bits read as one number: red × 65,536 + green × 256 + blue. For #1B98E0 that is 1,808,608.

Modern CSS can also express colours outside this classic sRGB range, using newer functions for wide-gamut displays. Those are beyond the scope of a hex converter, and the familiar hex and RGB formats remain the most widely supported choice for the web, documents and design tools.

Common Mistakes with Colour Codes

• Dropping the #. Most design tools add it for you, but in CSS color: 1B98E0 is invalid. The converter accepts codes with or without it and always outputs the # form.
• Typing the letter O for zero. Hex digits are 0–9 and A–F only. #FFOOOO with the letter O is not red; the converter will reject it so you notice.
• Mixing up 8-digit order. CSS puts alpha last (#RRGGBBAA), but some Android and older tools put it first (#AARRGGBB). If a colour looks wrong after pasting, check which order your tool expects.
• Judging contrast by eye. Screen brightness and colour profiles vary a lot between devices. Rely on the numbers.
• Expecting screen colours in print. A neon RGB green will usually look duller on paper; plan for that early.

Tips for Working with Colour Codes

• Keep a short list of your brand colours as CSS variables — the converter gives you a --brand line to paste.
• Build a full palette from one base colour with our colour palette generator, and blend colours with the CSS gradient generator.
• Hex codes are not case-sensitive, but pick one style and stick to it so search-and-replace works.
• When you need transparency, prefer rgba() or 8-digit hex rather than lowering the opacity of a whole element, which also fades the text inside it.
• Test contrast for every text-on-colour combination in your design, not just the main one.
• When a brand colour fails contrast with white text, try darkening it a few lightness points in HSL rather than switching to a completely different colour — the brand still feels the same, and the text becomes readable.
• Save the page link along with your notes; the converter is free to use any time you need to check a code again.

HEX to RGB Converter — Key Facts

Frequently Asked Questions

Explore More Prompt Minds Tools

HEX to RGB Converter works great alongside our other free tools. Every Prompt Minds tool runs entirely in your browser — no sign-up, no uploads, no watermarks. Browse all free tools.