Free browser tool

Free Hex to RGB Converter

Convert HEX to RGB, RGB to HEX, and get HSL and CMYK values in one place. Drag the sliders or paste any colour code, check WCAG contrast against white and black, browse tints and shades, and copy the format you need with one click.

Instant
No sign-up
HEX · RGB · HSL · CMYK
WCAG contrast

HEX or RGB

Paste a hex code, an rgb() value, or use the picker.

RGB

rgb

HSL

H239°S84%L67%

#6366f1Text: white reads best

Contrast (WCAG 2.1)

on white

4.47:1

AA large

on black

4.70:1

Tints & shades

Click a step to convert it.

How to convert a colour

Enter a colour

Paste a hex code like #6366f1, an rgb(99, 102, 241) value, or pick one with the native colour picker.

Fine-tune

Drag the RGB or HSL sliders — every format updates live, and the tints & shades strip shows lighter and darker steps of the same hue.

Copy the value you need

Click HEX, RGB, HSL or CMYK to copy it. Check the WCAG badges before using the colour for text or buttons.

Quick reference: how hex colours work

Anatomy of a hex code

#RRGGBB — two hex digits each for red, green, blue
00 = none of that channel, FF = full (255)
#000000 is black, #FFFFFF is white
#FC0 is shorthand for #FFCC00

Where each format is used

HEX — CSS, design tools, brand guides
RGB / RGBA — CSS with transparency, canvas, JavaScript
HSL — CSS when generating palettes and hover states
CMYK — print; screen-to-print conversion is approximate

Common colours

Pure red #FF0000 = rgb(255, 0, 0)
Pure green #00FF00 = rgb(0, 255, 0)
Pure blue #0000FF = rgb(0, 0, 255)
Mid grey #808080 = rgb(128, 128, 128)

Readable text on a colour

Aim for a 4.5:1 contrast ratio for body text
Large headings can pass at 3:1
Dark text on light backgrounds is usually safer
Check both light and dark mode variants

Frequently Asked Questions

How do I convert HEX to RGB?

A hex colour is three pairs of hexadecimal digits — #RRGGBB. Convert each pair to decimal (00–FF becomes 0–255) to get the red, green and blue values. For example #6366F1 is rgb(99, 102, 241). Paste any hex code into the tool and the RGB, HSL and CMYK values appear instantly with copy buttons.

How do I convert RGB to HEX?

Convert each of the red, green and blue values (0–255) to a two-digit hexadecimal number and join them with a leading #. rgb(255, 87, 51) becomes #FF5733. Type rgb(…) or just the three numbers into the input, or drag the sliders, and the hex code updates live.

What is the difference between HEX, RGB and HSL?

They describe the same colour in different ways. HEX and RGB both store red, green and blue amounts — HEX as base-16 text, RGB as decimal numbers. HSL stores hue (0–360°), saturation and lightness, which is easier for humans to tweak: lower L for a darker shade, lower S for a more muted colour.

Does the tool support 3-digit hex codes and alpha?

Yes. Shorthand codes like #FC0 expand to #FFCC00. Eight-digit codes such as #FF573380 are accepted too; the last two digits (alpha) are ignored because RGB, HSL and CMYK here describe the opaque colour.

What do the WCAG contrast badges mean?

The contrast ratio compares your colour against white and black text backgrounds. WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for AAA; 3:1 passes for large text only. Use it to check that a brand colour is readable as text or as a button background.

Can I link directly to a colour?

Yes. Add ?hex=ff5733 to the page URL and the tool opens with that colour loaded — handy for sharing a colour with a teammate or linking from documentation.