Advertisement
Guide
About the Color Converter
The same color can be written many ways. HEX (#3b82f6) is compact and common in CSS. RGB describes red, green, and blue channels directly. HSL and HSV describe a color by hue, saturation, and lightness or value — which is far more intuitive when you want to make a color lighter, more muted, or shift its hue. This converter translates between all four instantly, with sliders and a picker.
It also reports the WCAG contrast ratio against another color, so you can check text legibility while you choose. Everything runs in your browser.
When to use HSL instead of HEX or RGB
HEX and RGB are great for storing an exact color but awkward for adjusting one — there's no obvious way to make #3b82f6“10% lighter” by eye. HSLmakes that trivial: keep the hue and saturation, raise the lightness. That's why HSL is ideal for building color scales, hover states, and theme variations. Convert to HSL to tweak, then back to HEX for your stylesheet.
Contrast and accessibility
Color choices affect readability. The WCAG contrast ratio tells you whether text will be legible against its background — the guidelines call for at least 4.5:1 for normal text. Checking contrast as you pick colors avoids designs that look fine to you but are hard to read for many users. For a dedicated pass/fail view, see the Contrast Checker.
How to use it
- 1Enter a color in any format, or use the picker and sliders.
- 2Read the equivalent HEX, RGB, HSL, and HSV values.
- 3Adjust hue, saturation, or lightness in HSL to fine-tune.
- 4Check the contrast ratio, then copy the format you need.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe hue and saturation, but HSL uses lightness (0% is black, 100% is white) while HSV uses value (0% is black, 100% is the pure vivid color). HSL is common in CSS; HSV appears in many color pickers.
How do I convert HEX to RGB?
Enter the HEX value and read the RGB fields. Each pair of hex digits maps to one channel, so #3b82f6 is red 59, green 130, blue 246.
Why use HSL for a design system?
Because you can generate consistent lighter and darker shades by changing only the lightness, keeping hue and saturation fixed. That makes coherent color scales easy to build.
What contrast ratio do I need for text?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. The tool shows the ratio so you can verify legibility.
Is my color data uploaded?
No. All conversion and contrast calculation happens in your browser.