How to use the color converter

  • Click the color square to open your system color picker, or
  • paste any CSS color into Paste any color value. HEX (#3b82f6), short HEX (#38f), rgb(), hsl(), and named colors like tomato are all accepted, or
  • type directly into the HEX, RGB, or HSL fields.

All three formats update together. Each has a Copy button that copies a value you can paste straight into CSS. The page address also updates with the current HEX value, so you can share a link to a specific color.

HEX, RGB, and HSL

All three describe the same sRGB colors in different ways.

HEX writes red, green, and blue as two hexadecimal digits each, from 00 (none) to ff (full). #ff8000 is full red, half green, no blue, which is orange. A three-digit form like #f80 doubles each digit.

RGB uses the same three channels in decimal, from 0 to 255: rgb(255, 128, 0). It is easier to read than HEX and supports transparency with a fourth value: rgb(255 128 0 / 50%).

HSL describes a color the way people tend to think about it:

  • Hue is the position on the color wheel, from 0° to 360°: 0° red, 120° green, 240° blue.
  • Saturation is how intense the color is, from 0% gray to 100% vivid.
  • Lightness goes from 0% black through 50% pure color to 100% white.

HSL makes it easy to build palettes. Keep the hue and saturation and change only lightness to get lighter and darker shades of one brand color.

Contrast and accessibility

The Text contrast panel shows how readable white and black text are on the current color, using the WCAG 2 contrast ratio:

  • 4.5:1 or more passes level AA for normal text.
  • 3:1 or more passes AA only for large text (24px, or 19px bold).
  • 7:1 or more passes AAA.

Many popular brand blues and greens fail AA with white text. Darkening the color by 10–15% lightness in HSL usually fixes it.

Conversion details

HSL values are rounded to whole numbers, so converting HEX to HSL and back can change a channel by 1. If you need an exact color, keep the HEX value as the source of truth.

The converter works in the sRGB color space used by most of the web. Newer CSS formats such as oklch() and display-p3 can describe colors outside sRGB; when you paste one, your browser converts it to the closest sRGB color.

Frequently asked questions

Are named colors like "rebeccapurple" supported?

Yes. All 148 CSS named colors work, because the tool asks your browser to read the value.

Is anything sent to a server?

No. Conversion happens in your browser.