Color Converter
Every color format at once, with WCAG contrast checks, tints and shades.
Paste any color: HEX, rgb(), hsl(), hwb(), hsv(), cmyk(), oklch(), oklab() or a CSS name.
Every format
Edit any field — the others update. HSV and CMYK are not CSS formats; CMYK here is a simple screen conversion without a print profile.
CSS
Contrast (WCAG 2.2)
On white
—
- AA · normal text (4.5:1) —
- AA · large text (3:1) —
- AAA · normal text (7:1) —
- AAA · large text (4.5:1) —
- UI parts & graphics (3:1) —
On black
—
- AA · normal text (4.5:1) —
- AA · large text (3:1) —
- AAA · normal text (7:1) —
- AAA · large text (4.5:1) —
- UI parts & graphics (3:1) —
On a custom background
—
- AA · normal text (4.5:1) —
- AA · large text (3:1) —
- AAA · normal text (7:1) —
- AAA · large text (4.5:1) —
- UI parts & graphics (3:1) —
Large text means at least 18 pt (24 px) regular or 14 pt (about 18.7 px) bold. Ratios are cut, not rounded, to two decimals, so 4.499:1 shows as 4.49:1 and fails AA. A translucent text color is first blended with the background.
Tints and shades
Tints (mixed with white)
Shades (mixed with black)
Select a swatch to copy its HEX value.
About the Color Converter
Type or paste a color in any common notation — #1d5fcb, rgb(29 95 203), hsl(217 75% 46%), oklch(51% 0.18 260) or a CSS name such as tomato — and see it in every other format at once. Edit any field and the others follow; use the picker or the opacity slider to adjust it.
The contrast checker measures the color against white, black and a color of your choice with the WCAG 2.2 formula, and shows AA and AAA results for normal text, large text and interface parts. Tints and shades give you lighter and darker variants that you can copy one by one or as CSS custom properties.
How to use it
- Enter a color in the box at the top, or open the color picker next to it. Use the Opacity slider for transparency.
- Copy the format you need from Every format. Turn on Legacy comma syntax for
rgba()/hsla()with commas, which older tools expect. - Under Contrast, choose whether your color is the text or the background, then read the ratio and the AA/AAA results. Type any other color into the third card to test that pair.
- Select a swatch under Tints and shades to copy it, or copy the whole palette as CSS variables.
Examples
#1d5fcb
rgb(29 95 203) hsl(217.2 75% 45.5%) hwb(217.2 11.4% 20.4%) oklch(51.03% 0.1804 260.15) cmyk(85.7%, 53.2%, 0%, 20.4%)
#777777 as text on #ffffff
4.47:1 — passes AA only for large text (normal text needs 4.5:1) #767676 gives 4.54:1 and passes AA for all text
rgba(29, 95, 203, 0.5)
#1d5fcb80 rgb(29 95 203 / 50%) oklch(51.03% 0.1804 260.15 / 50%)
In 8-digit HEX the last two digits are the alpha: 80 is 128 of 255, about 50%.
Common uses
- Turning a designer's HEX values into
rgb(),hsl()oroklch()for a stylesheet or design tokens. - Checking that text, buttons and focus rings meet WCAG contrast requirements before shipping.
- Building hover, active and background variants of a brand color from its tints and shades.
- Converting values copied from a design app (HSB/HSV) or a print brief (CMYK) to web formats.
Which format to use
- HEX (
#1d5fcb) is compact and understood everywhere. Add two more digits for transparency. - RGB gives the red, green and blue channels from 0 to 255 — handy when a tool asks for numbers.
- HSL and HWB describe hue, then saturation/lightness or whiteness/blackness, which makes it easy to make a color lighter or greyer by hand.
- OKLCH uses perceptual lightness, chroma and hue: equal steps in lightness look equally different, so it is the best choice for palettes and for predictable contrast. All current versions of Chrome, Edge, Firefox and Safari support
oklch(); keep a HEX fallback for older browsers. - HSV/HSB is what many design-app pickers show, and CMYK is for print. Neither is valid CSS.
How the contrast ratio is calculated
WCAG converts each color to its relative luminance — the linearised red, green and blue channels weighted 0.2126, 0.7152 and 0.0722 — and divides the lighter by the darker after adding 0.05 to both. The result runs from 1:1 (no contrast) to 21:1 (black on white).
- AA (SC 1.4.3): at least 4.5:1 for normal text and 3:1 for large text.
- AAA (SC 1.4.6): at least 7:1 for normal text and 4.5:1 for large text.
- Non-text contrast (SC 1.4.11): at least 3:1 for interface components, icons and focus indicators.
Large text is at least 18 pt, or 14 pt bold. The thresholds are minimums and must not be rounded up — 4.49:1 fails AA for normal text.
OKLCH colors outside the sRGB range
OKLCH can describe colors that are more saturated than sRGB screens — and therefore HEX and RGB — can show. When you enter one, the converter uses the CSS Color 4 gamut-mapping method: it lowers the chroma while keeping lightness and hue until the color fits, and tells you that it did. The OKLab model itself is described by its author, Björn Ottosson.
Limitations
- All conversions use the sRGB color space.
lab(),lch(),color()and wide-gamut (Display P3) values are not read. - CMYK uses the simple screen formula without an ICC print profile, so printed colors will differ. Use your printer's profile for print work.
- HEX and RGB values are whole numbers from 0 to 255, so a color converted from OKLCH or HSL may change by one step in a channel.
- The browser's built-in color picker has no transparency control; use the opacity slider instead.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX code and read the RGB row. Each pair of hex digits is one channel from 00 (0) to ff (255): #1d5fcb is red 0x1d = 29, green 0x5f = 95 and blue 0xcb = 203, so rgb(29 95 203).
What do the last two digits of an 8-digit HEX color mean?
They are the alpha (opacity), from 00 (fully transparent) to ff (opaque). #1d5fcb80 is the same blue at 128/255 ≈ 50% opacity. The 4-digit form works the same way: #f008 is red at about 53%.
What contrast ratio do I need?
For WCAG level AA, 4.5:1 for normal text and 3:1 for large text and for interface parts such as input borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
How does the checker handle transparent colors?
A translucent text color is blended with the background first, exactly as the browser draws it, and the result is measured — so it gets a lower ratio than the same color at full opacity. A translucent background cannot be measured on its own, because the result depends on what is behind it, so it is treated as opaque and the page tells you so.
Why does my CMYK value not match what my printer uses?
Real print conversion depends on the paper, ink and the ICC profile your printer uses. This tool uses the simple profile-free formula (the same naive conversion CSS defines for device-cmyk()), which is fine as a starting point but not for color-critical print work.
Is my color sent anywhere?
No. All conversions run in your browser and work offline.