How do I convert RGB to HEX?

Type or paste your RGB values and read the HEX field. For example, rgb(37, 99, 235) is #2563EB. You can also paste a full rgb() string into the "Paste any color" box.

How do I convert HEX to RGB?

Enter a HEX code and the red, green, and blue channels appear alongside it, along with the HSL equivalent.

Can I paste an rgb() or hsl() string?

Yes. The "Paste any color" box accepts hex, rgb(), rgba(), hsl(), hsla(), and named colors like tomato, and fills in the other formats.

How is contrast measured?

Using the WCAG 2.1 luminance ratio formula. Pass and fail thresholds for AA and AAA at normal and large text are shown.

Color Converter

HEX ↔ RGB ↔ HSL with a live swatch and contrast checker.

Foreground

HEX

Paste any color

RGB

HSL

CSS rgb()

CSS hsl()

Background

HEX

Paste any color

RGB

HSL

CSS rgb()

CSS hsl()

Contrast

WCAG contrast ratios

Compares relative luminance of two colors. Higher is more legible.

ratio = (L1 + 0.05) ÷ (L2 + 0.05)

AA · Normal: at least 4.5:1.
AA · Large: at least 3:1 (≥ 18px bold or 24px regular).
AAA · Normal: at least 7:1.
AAA · Large: at least 4.5:1.

Pure white on pure black is 21:1, the maximum.

Sample small text, 14px regular Sample large text, 20px bold

Contrast ratio

Pass

AA · Normal

Pass

AA · Large

Pass

AAA · Normal

Pass

AAA · Large

The URL below carries both colors so you can link straight to this combination.

Some inputs are too long to fit in the URL.

Share URL

Anyone with this link can read the values it contains. Do not use it for sensitive data.

Common color values

A quick reference for turning an RGB triplet into its HEX code and HSL equivalent. Paste any of these into the box above to load it.

Name	HEX	RGB	HSL
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)
Grey 40%	#666666	rgb(102, 102, 102)	hsl(0, 0%, 40%)
Grey 50%	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
Blue 600	#2563EB	rgb(37, 99, 235)	hsl(221, 83%, 53%)
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)

How to use the Color Converter

Enter a color in any format: HEX, RGB, or HSL.
The equivalents in the other formats appear alongside.
Pair two colors to see the WCAG contrast ratio.

Frequently asked questions

How do I convert RGB to HEX?: Type or paste your RGB values and read the HEX field. For example, rgb(37, 99, 235) is #2563EB. You can also paste a full rgb() string into the "Paste any color" box.
How do I convert HEX to RGB?: Enter a HEX code and the red, green, and blue channels appear alongside it, along with the HSL equivalent.
Can I paste an rgb() or hsl() string?: Yes. The "Paste any color" box accepts hex, rgb(), rgba(), hsl(), hsla(), and named colors like tomato, and fills in the other formats.
How is contrast measured?: Using the WCAG 2.1 luminance ratio formula. Pass and fail thresholds for AA and AAA at normal and large text are shown.