Home / Color Picker

Color Picker — HEX to RGB Converter

Every color on a screen is a mixture of red, green and blue light, and the same color can be written in several different ways. Designers usually write it as a HEX code, such as #1668B4, developers often use RGB values like rgb(22, 104, 180), and a third form, HSL, describes the color by its hue, saturation and lightness, which is easier to adjust by eye. This free color picker keeps all three forms in sync: pick a color with the native color swatch, type a HEX code, or set the red, green and blue sliders, and every value updates at once. Everything runs in your browser, with no uploads and no account. Contrast matters more than most people realise. A light grey text on a white background may look stylish, but it can be unreadable for people with low vision, and it fails the accessibility standards that many websites and employers are now required to meet. The Web Content Accessibility Guidelines, known as WCAG, set a minimum contrast ratio of 4.5 to 1 for normal text, which is the AA standard, and 7 to 1 for the stricter AAA standard.

This tool computes the exact ratio for your color against both white and black, and tells you whether it passes or fails at AA, so you can choose text and background combinations that everyone can read.

HEX, RGB and HSL Explained

A HEX code writes a color as six hexadecimal digits after a hash sign, with two digits each for red, green and blue. The code #1668B4 means red 0x16, which is 22 in decimal, green 0x68, which is 104, and blue 0xB4, which is 180, so the same color in RGB is rgb(22, 104, 180). Hexadecimal uses the digits 0 to 9 and the letters a to f, and it is the form you will see most often in CSS and design tools. HSL describes the same color differently: hue is the position on the color wheel, from 0 for red through 120 for green and 240 for blue to 360 back at red; saturation is how vivid the color is, from grey to full color; and lightness is how dark or light it is.

WCAG Contrast and Readable Text

Contrast ratio measures how different two colors look, on a scale from 1 to 1 for identical colors up to 21 to 1 for black on white. It is calculated from the relative luminance of each color, which is a measure of how bright it appears to the human eye, with green counting for much more than blue. The WCAG AA standard requires a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, while the stricter AAA standard requires 7 to 1 for normal text. If your brand color fails against white, try using it for large headings, which have the lower 3 to 1 bar, or darken it until it passes.

How to Use

1. Pick a color with the color swatch. Click it to open your device's color picker, or type a HEX code such as #1668B4 into the HEX box.
2. Or set the red, green and blue values directly. Each one runs from 0 to 255. Changing any value updates the HEX code, the HSL values and the preview at once.
3. Read the HEX, RGB and HSL values below. The large preview swatch shows the color at full size, and the Copy buttons copy the HEX or RGB form for your code or design tool.
4. Check the contrast ratios. The tool shows the contrast of your color against white and against black, with a pass or fail at the WCAG AA level of 4.5 to 1, so you can choose readable text for it.

Worked Example

Start with the color #1668B4, a medium blue. Its RGB values are rgb(22, 104, 180), because the hexadecimal pairs 16, 68 and B4 equal 22, 104 and 180 in decimal. In HSL it is hsl(209, 78%, 40%), which means a hue of 209 degrees on the color wheel, 78% saturation and 40% lightness. Its contrast ratio against white is about 5.72 to 1, which passes the WCAG AA standard of 4.5 to 1, so white text on this blue is readable. Against black its contrast is about 3.67 to 1, which fails AA for normal text, so black text on this blue should be avoided for body copy, though it passes the 3 to 1 bar for large text.

Frequently Asked Questions

Related Calculators