The Color Converter translates colours between HEX, RGB, HSL, and HSV formats, with a live picker, harmony palettes, and a WCAG contrast check. Enter a colour in any format and instantly get its equivalents for use in CSS and design.
Different tools expect different formats — a stylesheet might use HEX, a design app HSB/HSV, and a script RGB — so converting between them by hand is fiddly and error-prone. This converter does it instantly and also helps you build a scheme and check accessibility, all in your browser.
How to convert a colour
- Enter a colour as HEX, RGB, HSL, or HSV — or pick one with the colour picker.
- Read the converted values in every other format.
- Check the harmonies and contrast information if you need them.
- Copy the value you need into your stylesheet or design tool.
HEX, RGB, HSL, and HSV explained
HEX is a six-digit code (like #3366cc) that is compact and ubiquitous in CSS and design handoffs. RGB describes a colour by its red, green, and blue channels (0–255), mapping directly to how screens emit light. HSL and HSV both start from a hue on the colour wheel: HSL adds saturation and lightness, which is intuitive for making a colour lighter or darker, while HSV (also called HSB) uses saturation and value/brightness, which is how many design apps present their pickers. The converter shows all four so you can copy whichever your current tool expects.
Harmonies and building a scheme
Beyond conversion, the tool generates colour harmonies — complementary, analogous, and triadic sets derived from your colour using the relationships on the colour wheel. These are a quick starting point for a palette: an accent that contrasts the base, neighbouring hues that feel cohesive, or a balanced three-colour scheme. For a full generate-and-lock palette workflow use the Color Palette Generator, and for a light-to-dark ramp use the Shades & Tints generator.
Checking contrast for accessibility
The converter also reports WCAG contrast information so you can tell whether text will be legible on a given background. The guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet AA, and higher for AAA. Checking this as you pick colours keeps your interface readable for everyone, including users with low vision.
Frequently Asked Questions
How do I convert HEX to RGB?
Enter the HEX code and the tool shows the matching RGB values instantly, along with HSL and HSV.
What is the difference between HSL and HSV?
Both describe colour by hue, but HSL uses lightness while HSV uses value (brightness). The converter shows both so you can use whichever your tool expects.
Can I use these values in CSS?
Yes. HEX, RGB, and HSL are all valid CSS colour formats and can be copied straight into your styles.
Is the color converter free?
Yes, it is free and runs entirely in your browser.