Colors

Work with color in every notation: convert HEX ⇄ RGB ⇄ HSL, check text contrast against WCAG and pick lighter and darker shades of your color.

Work with color in every notation: convert HEX ⇄ RGB ⇄ HSL, check text contrast against WCAG and pick lighter and darker shades of your color.

How to use

  1. Enter a color in HEX, RGB or HSL, or use the picker
  2. All notations update together
  3. Check contrast and grab the generated shades

Frequently asked questions

What contrast ratio does WCAG require?

At least 4.5:1 for normal text and 3:1 for large text (AA level).

What's the difference between RGB and HSL?

RGB mixes red, green and blue; HSL describes hue, saturation and lightness — more intuitive for adjusting shades.