Color Converter

Convert HEX, RGB and HSL, and check contrast. A single HEX to RGB stays on HEX to RGB

What this page does

The same color can be written as HEX, RGB or HSL. This page keeps the three in step and checks contrast against a second HEX color. A one-way HEX to RGB stays on HEX to RGB.

How to use it

  1. Type a HEX color, or R, G and B, or H, S and L. The other fields and the swatch update as you type. There is no Convert button.
  2. Compare with is the second HEX color used for contrast.
  3. Show Example sets Compare with to #e8f0f6 and HEX to #112233. R is 17, G is 34, B is 51. H is 210, S is 50, L is 13. The ratio is 14.02:1. Normal text AA, AAA and large text AA all pass.
  4. Clear All empties every field, the swatch and the ratio.

Rules and edges

#RGB expands by doubling each digit, so #123 is #112233. A value that is not 3 or 6 hex digits stops with an error. H is 0 to 360, S and L are 0 to 100, and R, G and B are 0 to 255. Contrast uses the WCAG relative luminance. AA for normal text is 4.5:1, AAA is 7:1, and AA for large text is 3:1. An empty Compare with field hides the ratio.

Where people use it

  • Turning a dark HEX color into HSL.
  • Checking a dark blue on a light background.
  • Reading the same color as 17, 34, 51.

Questions

Does this page convert HSB, HWB or CMYK?

No. It converts HEX, RGB and HSL, and shows the contrast.

Why do all three grades pass?

14.02:1 is above 7, so normal text AA, AAA and large text AA all pass for #112233 on #e8f0f6.