Color Converter & Contrast Checker
Convert any colour between HEX, RGB, and HSL. Preview the swatch and check WCAG contrast against black and white.
Color models in the browser
CSS lets you express the same colour in many different forms. HEX (#3b82f6) is the shortest and most widely understood — three or six hexadecimal digits map directly to the red, green, and blue channels of the sRGB color space. RGB notation (rgb(59 130 246)) is functionally identical but easier to manipulate programmatically. HSL (hsl(217 91% 60%)) is a cylindrical reparameterisation that splits a colour into hue, saturation, and lightness — much more intuitive when you want to lighten or shift a colour.
This tool parses any of those notations, normalises them to RGB, and then renders all three forms simultaneously. It also computes the WCAG 2.1 contrast ratio of the chosen colour against pure white and pure black backgrounds, indicating whether the combination meets AA (4.5:1) or AAA (7:1) standards for normal-sized body text. Use the swatch as a quick visual sanity check before pasting the value into your stylesheet.
Use cases
- Pick a brand colour and instantly check whether it has enough contrast for body text.
- Translate a HEX value from a designer's mockup into the HSL form you prefer to manipulate.
- Verify accessibility compliance before shipping a new component.
- Sample a colour from a screenshot and convert it for use in CSS variables.
- Produce a slightly lighter or darker variant by tweaking the lightness channel.
Best practices
- Aim for at least 4.5:1 contrast for body text and 3:1 for large text per WCAG 2.1 AA.
- Prefer HSL when you need to programmatically darken or lighten a colour — adjust the L channel only.
- Keep the same hue family across UI states (hover, active, disabled) by varying lightness.
- Avoid pure black (#000) on pure white — slightly off-white surfaces are easier on the eyes.