TF

Design & CSS

Color Converter and Contrast Checker

Convert colors between HEX, RGB, HSL, HSV, HWB, CMYK, and OKLCH, and check WCAG contrast for accessible text.

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch(), or a CSS name like tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Tints and shades

What is this tool?

Paste a color in any format — #ff6347, rgb(255 99 71), hsl(9 100% 64%), or simply tomato — and copy it in every other format. Switch to the contrast checker to test text and background colors against WCAG 2 and get the nearest passing color when a pair fails.

Screens mix red, green, and blue light, so HEX and RGB describe colors the way monitors do. HSL and HSV are easier to adjust by hand, CMYK approximates print inks, and OKLCH is a modern perceptual space supported in CSS where equal steps look equally different.

WCAG contrast ratios range from 1:1 to 21:1. Normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text (24px, or 18.66px bold) and UI components need 3:1. Translucent text colors are blended over the background before measuring.

How to use the Color Converter & Contrast Checker

  1. Type or paste a color, or pick one with the color swatch.
  2. Copy the format you need: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, or the CSS color name.
  3. Click a tint or shade to explore lighter and darker versions of the same hue.
  4. Open Contrast checker, set text and background colors, and see whether they pass WCAG AA and AAA.
  5. If a pair fails, use the suggested color — it keeps the hue and adjusts lightness until it passes.

Examples

Tomato in other formats

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Frequently asked questions

How do I convert HEX to RGB?

Paste the HEX code, such as #3366cc, and copy the RGB line: rgb(51 102 204). Each pair of hex digits is one channel from 0 to 255.

Which contrast ratio do I need?

For body text, at least 4.5:1 (WCAG AA). Large headings and icons need 3:1. Aim for 7:1 (AAA) for long-form reading or users with low vision.

Is CMYK conversion accurate for print?

It's a device-independent approximation. Real print results depend on the paper and printer profile, so use your printer's color profile for final artwork.

What is OKLCH?

OKLCH describes colors by lightness, chroma, and hue in a perceptually uniform space. It's supported in modern CSS and makes it easy to create consistent palettes.

Want more power later?

Premium tools, higher limits, and API access are on the roadmap. V1 stays free and private in your browser.