How this color converter and contrast checker works
A color on screen is just three light channels — red, green and blue — mixed together. The same color can be written several ways. HEX packs each channel into two hexadecimal digits (00–FF). RGB lists the same channels as numbers from 0 to 255. HSL reshapes them into hue, saturation and lightness, which is closer to how people think about adjusting a color.
The converter parses whatever you type, normalises it to red, green and blue, then re-expresses that triplet in all three formats. The tints and shades are made by moving the lightness up (tints) or down (shades) in even steps while keeping the hue and saturation fixed.
The contrast checker uses the WCAG relative-luminance formula. It linearises each channel, weights them (green counts most, blue least), then takes the ratio of the lighter color's luminance to the darker one's, plus a small offset. A ratio of 4.5:1 or higher passes AA for normal text; 7:1 passes the stricter AAA.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Larely blue | #3A5BD9 | rgb(58, 91, 217) | hsl(228, 68%, 54%) |
Frequently asked questions
- How do I convert HEX to RGB?
- Split the six-digit HEX code into three pairs — red, green and blue — and convert each pair from base 16 to base 10. For example #3A5BD9 becomes red 58, green 91, blue 217, written rgb(58, 91, 217). This tool does it instantly as you type.
- What is HSL?
- HSL stands for hue, saturation and lightness. Hue is an angle from 0 to 360 degrees on the color wheel, saturation is how vivid the color is, and lightness runs from black to white. It is often easier to adjust than HEX or RGB.
- What is a good color contrast ratio?
- For normal body text, aim for at least 4.5:1, which meets WCAG AA. Large text needs at least 3:1. Higher is better — 7:1 for normal text meets the stricter AAA level.
- What is WCAG AA vs AAA?
- WCAG is the Web Content Accessibility Guidelines. AA is the common minimum: 4.5:1 for normal text and 3:1 for large text. AAA is enhanced: 7:1 for normal text and 4.5:1 for large text.
- How do I make text readable on a background?
- Increase the difference in lightness between text and background until the ratio reaches at least 4.5:1. Darkening the text or lightening the background usually helps fastest — use the checker and watch the live preview.
- What's the difference between HEX, RGB and HSL?
- All three describe the same on-screen color. HEX is a compact six-digit code, RGB lists the red, green and blue channels from 0 to 255, and HSL describes hue, saturation and lightness, which maps to how people think about adjusting a color.