One Colour, Three Notations, Instantly in Sync

The Hex and RGB Color Picker and Converter keeps a single colour in view and shows it at the same time as a HEX code, an RGB triplet and an HSL value. Change it in any one place, whether by typing a hex code, dragging an RGB slider, nudging hue or lightness, or choosing a colour from your system's picker, and every other field, the large preview swatch, the contrast scores and the colour harmony swatches update at once. It is built for web designers, front-end developers, students learning CSS colour, and anyone who has a colour in one format and needs it in another.

Everything runs in your browser with plain JavaScript. No colour values are sent to a server, and the page works as soon as it has loaded.

What Is on the Page

Preview and picker

The left column holds a large preview of the current colour and a Pick a Color button. That button opens your browser's or operating system's native colour chooser, so its look depends on whether you are on Windows, macOS, Android or iOS. Whatever you choose there becomes the current colour.

Contrast and accessibility

Below the preview are two contrast badges. One shows the contrast ratio of the current colour against pure white, the other against pure black, each to two decimal places. A third badge gives a WCAG rating based on the better of those two ratios.

HEX Color card

A text field for the six-digit hex code, with two copy buttons: Copy HEX copies the code without a hash (for example 4263EB) and Copy with # copies it ready for CSS (#4263EB).

RGB Color card

Shows the colour as rgb( 66, 99, 235 ) with three sliders labelled R, G and B, each paired with a number box that accepts 0 to 255. Copy RGB copies the bare numbers (66, 99, 235) and Copy rgb() function copies rgb(66, 99, 235).

HSL Color card

Shows the same colour as hue, saturation and lightness, with H (0 to 360), S (0 to 100) and L (0 to 100) sliders and number boxes. Copy hsl() function copies a string like hsl(228, 81%, 59%).

Color Harmonies

Four rows of swatches generated from the current colour's hue: Complementary, Analogous, Triadic and Split Complementary. Hovering a swatch shows its hex code, and clicking it makes that swatch the current colour.

Theme toggle

A moon or sun button in the corner switches the page between light and dark appearance, which is useful for judging how a colour looks on each background.

How to Convert HEX to RGB

1. Click into the HEX Color field and clear it.
2. Type the six hex digits without the hash, for example FF8800. The field holds six characters, so pasting a value with a leading # cuts off the last digit; paste or type the code without it.
3. As soon as six valid digits are present, the RGB card shows the matching values, here 255, 136, 0, and the preview updates.
4. Click Copy rgb() function to copy rgb(255, 136, 0).

Three-digit shorthand also works. Type F80 and click or tab out of the field; on leaving the field it is expanded to FF8800. If what you typed is neither three nor six valid hex digits when you leave the field, it reverts to the current colour's code.

How to Convert RGB to HEX

1. Drag the R, G and B sliders, or type values from 0 to 255 into the number boxes beside them.
2. The HEX field updates live in upper case.
3. Click Copy with # to copy the CSS-ready code.

Note that the rgb( ... ) text line at the top of the RGB card is a display of the current value; to change the colour, use the sliders or the number boxes.

Working with HSL

HSL is often easier for adjusting a colour than RGB. To make a button colour lighter for a hover state, keep H and S and raise L by 8 to 10. To make a muted version for a background, lower S. Each change in the HSL card instantly recalculates the HEX and RGB values. Because the HSL fields hold whole numbers, converting a colour to HSL and back can occasionally shift an RGB channel by one step; for an exact colour, copy the HEX or RGB value.

The Maths in Brief

A hex code is three pairs of base-16 digits, one each for red, green and blue. Each pair runs from 00 (0) to FF (255). Taking the tool's starting colour #4263EB as an example:

So #4263EB equals rgb(66, 99, 235), which the tool shows as hsl(228, 81%, 59%). Going the other way, each decimal value is divided by 16: the whole part is the first hex digit and the remainder is the second.

Understanding the Contrast Badges

The contrast ratio uses the WCAG relative luminance formula and ranges from 1 (no contrast) to 21 (black on white). The rating badge applies these thresholds to the higher of the two ratios:

Because the rating uses whichever of white or black scores better, read the individual badges to see which pairing actually passes. The tool only measures against pure white and pure black; to check two custom colours against each other, you need a dedicated contrast checker.

Common Named Colours

These standard CSS colour keywords are handy reference points. Type any of the hex codes into the tool to see them, their contrast scores and their harmonies.

Building a Palette with Harmonies

The harmony rows rotate the hue of the current colour while keeping its saturation and lightness:

• Complementary: the current colour and the hue opposite it (plus 180 degrees). Strong contrast for call-to-action accents.
• Analogous: hues 30 degrees either side of the current colour. Calm, cohesive schemes.
• Triadic: three hues spaced 120 degrees apart. Lively but balanced.
• Split Complementary: the current colour plus the two hues 150 and 210 degrees away. Contrast with less tension than a straight complement.

Click any swatch to adopt it, read its codes, and copy what you need. Clicking through harmonies is a quick way to explore a scheme around a brand colour.

Tips

• Use Copy with # for CSS, SCSS and Tailwind arbitrary values; use Copy HEX for design tools that want the digits only.
• Check both contrast badges before choosing a text colour for a coloured background.
• Switch the page theme to preview a colour on light and dark surfaces.
• Adjust lightness in the HSL card to create consistent tints and shades of one hue.

Things to Avoid

• Pasting #RRGGBB into the HEX field: the seven characters are trimmed to six, so the value is cut off. Paste just the digits.
• Typing into the rgb( ) or hsl( ) text lines and expecting the colour to change; use the sliders or number boxes.
• Treating the WCAG badge as a full accessibility audit; it measures contrast against black and white only.

Limitations

• No alpha channel: RGBA, HSLA and eight-digit hex codes are not supported.
• Only HEX, RGB and HSL are shown; there is no CMYK, HSV or Pantone conversion.
• HSL values are whole numbers, so round trips through HSL can be off by one in an RGB channel.
• Contrast is measured against white and black only.
• The native picker's appearance and features depend on your browser and operating system.

Frequently Asked Questions