How to Convert Colors Between HEX, RGB, HSL and OKLCH

To convert a color, type or paste it into the Color Converter in any CSS format — HEX, RGB, HSL, OKLCH or a named color like steelblue — and it instantly shows the same color as HEX, RGB, HSL, OKLCH and plain 0–1 RGB, plus its WCAG contrast ratio against white and black text.

What the Color Converter does

Browsers, design tools and codebases all describe color differently: a designer hands you a HEX code, a CSS framework wants hsl(), and newer CSS uses oklch() for perceptually even color scales. Converting by hand means remembering formulas for hue, saturation and lightness, or for the relative luminance behind WCAG contrast — the Color Converter does all of that in your browser as you type, so you can grab whichever format the code in front of you needs.

How to convert a color with Toolbench

1. Open the Color Converter.
2. Type or paste a color into the Any CSS color field — HEX (#3b6fd8), rgb(…), hsl(…), oklch(…) or a named color all work.
3. Or click the small color swatch next to the field to pick a color with your browser's native color picker instead of typing one.
4. The large preview box below shows your color as a background, with "Aa" rendered in both white and black text so you can see which reads better at a glance.
5. Under Formats · click to copy, click any row — HEX, RGB, HSL, OKLCH or RGB 0–1 — to copy that value.
6. Under WCAG contrast, read the contrast ratio and grade against white and black text.

If what you type isn't a valid CSS color, the field shows "Not a valid CSS color." instead of a result.

Example: the default color, #3b6fd8

The tool opens with #3b6fd8 loaded. Here's exactly what it produces:

Format	Value
HEX	#3b6fd8
RGB	rgb(59 111 216)
HSL	hsl(220 67% 54%)
OKLCH	oklch(0.563 0.171 262.5)
RGB 0–1	0.231, 0.435, 0.847

And its contrast:

Against	Ratio	Grade
White text	4.72:1	AA body text
Black text	4.45:1	AA large only

So #3b6fd8 passes WCAG AA for normal-size white text on it, but black text on the same blue only clears the lower bar for large text (think headings, not body copy).

Example: a color that fails outright

Not every color clears WCAG for both text colors. Take a bright yellow, #ffeb3b:

Against	Ratio	Grade
White text	1.22:1	Fails
Black text	17.20:1	AAA · all text

White text on that yellow is nearly unreadable (1.22:1, barely different from the background), while black text on the same yellow passes even the strictest AAA level. It's a reminder that a color's contrast depends entirely on which text color you pair it with — there's no such thing as an "accessible color" on its own, only accessible pairs.

Reference: what each grade means

Ratio	Grade	What it covers
≥ 7:1	AAA · all text	Passes the strictest level for any text size
≥ 4.5:1	AA body text	Passes the standard level for normal-size text
≥ 3:1	AA large only	Only large text (roughly 18pt+ or bold 14pt+) passes
< 3:1	Fails	Doesn't meet WCAG at either level

These thresholds come from WCAG 2: AA requires at least 4.5:1 for normal text and 3:1 for large text, and AAA raises that to 7:1 and 4.5:1.

Tips and common mistakes

• Alpha carries through. If you paste a color with transparency, like rgba(59, 111, 216, 0.5), the HEX, RGB, HSL and OKLCH outputs all keep that alpha value (shown as / 0.5 or a HEX alpha suffix) instead of silently dropping it.
• Named colors work too. You don't need to look up a HEX code for steelblue or rebeccapurple — type the name and the converter resolves it like a browser would.
• Contrast is checked against pure white and pure black only. If your actual text color is a near-white or near-black (not #fff/#000), treat these numbers as a close estimate, not the exact ratio for your specific pairing.
• OKLCH's hue resets to 0 for grays. When a color has essentially no chroma (pure gray, white or black), the hue angle is meaningless, so the tool reports it as 0 rather than an arbitrary number.
• The native color picker and the text field stay in sync. Clicking the swatch and dragging to a new color updates the text field (and every output format) immediately — you don't need to type anything if picking visually is easier.

Related tools

• Unit Converter — convert length, weight, temperature, volume, data, time and speed.
• QR Code Generator — generate a QR code with your own foreground and background colors.

Frequently asked questions

What color formats can I type into the Color Converter?

Any valid CSS color: HEX (#3b6fd8), rgb(), hsl(), oklch(), and named colors like steelblue. If the browser can parse it as a CSS color, the converter accepts it.

What is OKLCH and why would I use it?

OKLCH is a perceptually uniform color space — equal steps in its lightness or chroma values look like equal changes to the eye, which makes it easier to build consistent color scales and themes than with HSL, where equal numeric steps don't always look equally spaced.

What contrast ratio do I need for WCAG compliance?

WCAG 2 level AA requires at least 4.5:1 for normal-size text and 3:1 for large text. Level AAA, the stricter standard, requires 7:1 and 4.5:1 respectively.

Is my color sent to a server when I convert it?

No. Conversion and contrast calculations happen in your browser as you type. If you're signed in, your input syncs privately to your account; if you're signed out, nothing is saved anywhere.

Why does the converter show both a white-text and black-text contrast ratio?

Because the same background color can be a good match for one text color and a poor match for the other, as the yellow example above shows — checking both tells you which text color (or whether either) is safe to use on that background.