How to convert colors and check contrast
- Pick a color or type it as HEX, rgb(), hsl(), oklch() or a CSS name like tomato.
- Copy the format you need from the list of conversions.
- Click a swatch in the shade scale to copy it, or Copy CSS variables for the whole scale.
- Enter text and background colors in the contrast checker and read the ratio and pass or fail results.
What you can do with Color Converter & Contrast Checker
- Every common format
- Converts to HEX, modern and legacy rgb(), hsl() and oklch(), including alpha transparency, with a copy button for each.
- Flexible input
- Accepts 3, 4, 6 and 8-digit HEX codes, rgb(), hsl(), oklch() and all named CSS colors.
- Shade scale
- Builds an 11-step palette from 50 to 950 in the perceptual OKLCH space, similar to Tailwind-style color scales.
- CSS variables export
- Copy the full scale as --color-50 to --color-950 custom properties, ready to paste into a stylesheet.
- WCAG contrast checker
- Calculates the contrast ratio and shows pass or fail for normal text, large text and UI components at AA and AAA.
- Live preview
- See large text, body text and small captions rendered in your chosen colors before you commit to them.
HEX, RGB, HSL, OKLCH and WCAG contrast requirements
HEX, RGB and HSL all describe the same sRGB colors in different notation. HEX is compact and common in design handoffs, RGB maps directly to screen channels, and HSL is easier to adjust by hand. OKLCH is the newer option, supported in all modern browsers: it's perceptually uniform, so changing lightness by the same amount looks consistent across hues. That's why this tool builds shade scales in OKLCH, avoiding the muddy mid-tones and uneven steps you often get by mixing a color with white and black.
WCAG 2.x defines contrast as a ratio from 1:1 to 21:1 based on relative luminance. Level AA requires at least 4.5:1 for normal text and 3:1 for large text, meaning 18 pt (24 px) or 14 pt bold (about 18.7 px), plus 3:1 for icons and interface components. Level AAA raises the text thresholds to 7:1 and 4.5:1. Meeting AA is a legal or contractual requirement for many public sector and enterprise sites, and it helps everyone reading on a phone in bright sunlight.
Frequently asked questions
Is the color converter private?
Yes, it runs entirely in your browser. Colors you enter are converted with JavaScript on your device and nothing is sent to a server. There's no account, and the tool keeps working if your connection drops after the page loads.
How do I convert HEX to RGB?
Type or paste the HEX code, such as #2438f0, into the input. The RGB value appears instantly in modern rgb(36 56 240) syntax and legacy rgb(36, 56, 240) syntax. Click the copy button next to the one you want.
What contrast ratio do I need for accessibility?
For WCAG 2.x level AA, body text needs at least 4.5:1 against its background, while large text and UI components need 3:1. Level AAA requires 7:1 for normal text and 4.5:1 for large text. The checker shows a pass or fail for each case.
What is OKLCH and should I use it?
OKLCH describes color by lightness, chroma and hue in a perceptually uniform space, and it works in all current major browsers. It's well suited to building palettes and themes. Some OKLCH colors fall outside the sRGB gamut, and the tool warns when it has to clip them.
Does the contrast checker account for transparency?
No. Contrast is calculated from the solid RGB values of each color, ignoring alpha. If your text or background is semi-transparent, work out the blended color it produces on screen first, then check that solid color.