Color Converter

Hex to RGB, RGB to hex, hex to HSL and HSV: a color converter with a color picker and a live WCAG contrast checker.

Loading Color Converter…

Runs entirely in your browser. What you enter stays on your device — nothing is sent to a server. Verify it yourself

What contrast ratio does text need to be readable?

WCAG AA requires 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold); AAA requires 7:1. These are minimums for legibility rather than targets — comfortable extended reading usually wants more.

Cost: Free, no limits
Upload: None — runs on your device
Sign-up: Not required
Works offline: Yes, once loaded

How to convert hex to RGB

Enter a colour
Pick it with the colour picker, or type it into Colour value — a hex code, rgb() or hsl(), or a CSS colour name.
Read every format
HEX, RGB, HSL and HSV are listed under Values, ready to copy.
Try tints and shades
The lightness scale steps the same hue from 95 down to 10; click a step to use that colour.
Check the contrast
Enter a background colour to see the WCAG 2 contrast ratio, and whether it passes AA and AAA for normal and large text.

Examples

#3b82f6rgb(59, 130, 246) · hsl(217, 91%, 60%)
The same colour in three notations.
#fff#ffffff
Shorthand hex expands by doubling each digit.

Key features of the Color Converter

Converts between HEX, RGB, HSL and HSV
Live colour preview
Accepts shorthand and full hex notation
Contrast information for accessibility checks

Supported formats

Input

#RGB
#RRGGBB
rgb()
hsl()
CSS colour names

Output

When should you use this?

Moving a colour from a design tool into CSS.
Adjusting lightness or saturation, which HSL makes easy and hex does not.
Checking a foreground and background pair for contrast.
Reading a colour value out of a stylesheet in a more intuitive form.

Limitations

These are all sRGB notations describing the same colour space. Converting between them is exact arithmetic and loses nothing, but none of them can describe wide-gamut colours that displays now support.
HSL and HSV both have a "brightness" axis and they are not the same axis. A colour at 50% lightness in HSL is not the same as 50% value in HSV.
Perceived brightness does not match either. Pure yellow and pure blue can share a lightness figure and look nothing alike, which is why contrast has its own formula.
CMYK is not offered. Converting to it meaningfully requires a colour profile and a target press, and a naive formula would produce numbers that mislead more than they help.

Troubleshooting

The converted colour looks different in my design tool

The tool is probably working in a wider colour space, or applying a display profile. The numbers are the same; the rendering is not.

A three-digit hex gives an unexpected result

Shorthand expands by doubling each digit — #abc becomes #aabbcc, not #abc000.

Common mistakes to avoid

Assuming HSL lightness corresponds to perceived brightness. It does not, which is why contrast must be measured rather than eyeballed.
Judging contrast by looking. Screens, ambient light and eyesight all vary; the ratio is the check that does not.

Pro tips

Tips for better results

Palettes
Build palettes in HSL, not hex
Use HSL when building a palette. Changing one number gives you a lighter or more muted version of the same hue; doing that in hex is guesswork.
Accessibility
Aim for 4.5:1 on body text, 3:1 on large text
For accessible text, aim for a contrast ratio of at least 4.5:1 for body copy and 3:1 for large text.
Modern CSS
oklch() is better behaved than HSL for generated palettes
Modern CSS also accepts oklch(), which is perceptually uniform and better behaved for generating palettes than HSL.

Standards and terms behind the Color Converter

The named things this tool works with, and the documents that define them.

Hex colour notationHow it works: The #RRGGBB form CSS and design tools use, two hexadecimal digits per channel.
HSL and HSVHow it works: Colour models describing hue, saturation and lightness, easier to reason about than raw red, green and blue.
sRGBSpecification: The default colour space of the web and of most screens; the safe target when a file must look right anywhere.
WCAG contrastSpecification: The W3C accessibility thresholds for text against its background: 4.5:1 for body text, 3:1 for large text. Reference: WCAG contrast

Also searched as: hex to rgb, rgb to hex, check colour contrast, css colour value.

The colour spaces

HEX and RGB are the same thing written differently: three channels of 0–255, one each for red, green and blue.#7c3aed is rgb(124, 58, 237).

HSL describes hue (position on the colour wheel), saturation (how vivid) and lightness (how close to white or black). It is far easier to work with when building a palette: keep hue and saturation fixed, vary lightness, and you have a coherent scale — which is what the lightness row above generates.

HSV replaces lightness with value (brightness). It is what most colour pickers use internally, since the square-plus-slider layout maps naturally onto saturation and value.

Contrast is calculated, not eyeballed

The WCAG contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). The calculation linearises each sRGB channel before weighting it, because sRGB values are gamma-encoded — averaging the raw numbers, a common shortcut, gives ratios wrong by enough to pass text that genuinely fails.

The thresholds: 4.5:1 for normal text at AA, 3:1 for large text (18pt, or 14pt bold), and 7:1 for AAA. These are minimums for legibility, not targets — comfortable extended reading usually wants more.

Two things the ratio does not capture: it treats all hues identically, so it cannot tell you that red on green is a problem for the most common form of colour blindness, and it says nothing about font weight or size beyond the large-text threshold. Thin light text can meet the ratio and still be hard to read.

Privacy

The Color Converter runs entirely in your browser. What you enter and the result it produces stay on your own device — nothing is sent anywhere, because nothing needs to be.

You can confirm this rather than take our word for it: open your browser’s developer tools, watch the Network tab, and use the tool. No request carries your input. It also keeps working with the connection off.

Details are in the privacy policy.

What next?

Formatters, encoders and hash generators.

More developer tools

Color Converter — questions

How do I convert HEX to RGB?

Each pair of hex digits is one channel in base 16. #7c3aed splits into 7c, 3a and ed, which are 124, 58 and 237 — so rgb(124, 58, 237). The tool does it live above.

What is the difference between HSL and HSV?

Both use hue and saturation; they differ in the third value. HSL's lightness runs black → colour → white, so 50% is the pure colour. HSV's value runs black → colour, so 100% is the pure colour. HSL is better for building palettes, HSV for colour pickers.

What contrast ratio do I need?

4.5:1 for normal body text to meet WCAG AA, 3:1 for large text (18pt or 14pt bold), and 7:1 for AAA. These are floors for legibility rather than goals.

Does passing the contrast check mean my colours are accessible?

It means they meet the luminance requirement. It does not account for colour blindness — red on green can pass the ratio and still be unreadable for many people — or for thin fonts, which can be hard to read at any ratio.

Part of Developer Tools · Browse every tool