Color converter — HEX, RGB, HSL, HSV and contrast
Get HEX, RGB, HSL and HSV values for a colour, then check its text contrast on white and black. Click a tint or shade to try a lighter or darker version.
Runs in your browser — your input is not uploaded to ToolsNow.
Accepts hex (#f80 or #ff8800), rgb(), hsl(), and CSS names like tomato.
Text contrast (WCAG 2.1)
Tints and shades
Same hue and saturation at nine lightness steps. Click any swatch to load it.
Contrast ratios use the WCAG 2.1 relative-luminance formula. AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
How to use
- Enter Colour. Try #ff8800, rgb(255, 136, 0), hsl(32, 100%, 50%) or a supported name such as tomato. You can also use the colour picker.
- Copy the format you need. Use the Copy button beside HEX, RGB or HSL for a CSS colour value. Check the transparency limits below if your input includes alpha.
- Review text contrast. On white and On black show ratios and badges for those two backgrounds. Check the final foreground and background pair if your design uses other colours.
- Try a lighter or darker shade. Click a swatch under Tints and shades to load that colour and recalculate the outputs.
Questions
Can I paste HSV or any CSS colour syntax?
HSV is an output here, not an accepted input or a CSS colour function. Input supports short and long hex, rgb()/rgba(), hsl()/hsla() and a limited list of names. Formats such as oklch() and color() are not supported; use RGB or HEX from your source application.
How do HSL and HSV differ?
Both describe hue and saturation, but their scales differ. HSL lightness reaches black at 0% and white at 100%. HSV value reaches black at 0%; at 100%, zero saturation gives white and full saturation gives a bright colour. The shade strip varies HSL lightness.
What text contrast ratio do I need?
For WCAG AA, use at least 4.5:1 for normal text and 3:1 for large text: 18pt regular or 14pt bold, roughly 24px or 18.7px. AAA uses 7:1 and 4.5:1 respectively. These badges check colour contrast only, not the accessibility of a whole page.
Is transparency preserved everywhere?
No. Alpha is included in HEX, RGB and HSL output when the input is translucent. The HSV string, CSS variables snippet, Tailwind snippet and shade swatches omit it. The picker also selects opaque colours. Contrast is calculated as if the input were opaque, so test a translucent colour against its real background separately.
Published by ToolsNow. How tools and sources are checked · Report a problem