Colour converter
Convert colours between HEX, RGB and HSL, and check contrast against white and black.
Processed on your device · 0 bytes uploaded
- HEX
#2E3192 - RGB
rgb(46, 49, 146) - HSL
hsl(238, 52%, 38%)
Contrast
WCAG 2 contrast ratio of this colour used as text. AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.
On white: 10.65:1
Passes AA and AAA for all text.
On black: 1.97:1
Fails for text. Use only for decoration.
How to use
- Type a colour in any format, such as #2E3192, rgb(46, 49, 146) or hsl(238, 52%, 38%). Or use the picker.
- The same colour appears in HEX, RGB and HSL. Press Copy next to the format you need.
- Check the contrast ratios to see whether the colour works as text on a white or black background.
Questions
Which formats can I type?
Hex with 3 or 6 digits (with or without #), rgb() and hsl() with commas or spaces, rgb() with percentages, and plain values like 46, 49, 146. Colour names like "purple" and transparency (alpha) aren't supported.
Why doesn't HSL convert back to exactly the same HEX?
HSL values are shown rounded to whole numbers. Converting the rounded numbers back can be off by one in a channel. The HEX and RGB shown always come from the exact colour you entered.
What do AA and AAA mean?
They are levels in the Web Content Accessibility Guidelines (WCAG). AA, the level most sites aim for, needs a contrast of 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1. Ratios here are rounded down, so a colour only shows as passing if it really does.
Is anything sent to a server?
No. All conversions are calculated in your browser.
Something wrong or missing? Tell us (opens in a new tab)