Skip to content
AdawatAdawat
العربية
Adawat

Color converter and contrast checker

Type a color in any format and get every other format at once. Then test a text and background pair against the WCAG contrast rules.

Everything runs in your browser

Your colors, text and images are not uploaded anywhere.

Converted formats

HEX (3, 4, 6 or 8 digits), rgb(), hsl(), oklch() or a name like tomato

  • HEX#4f46e5
  • RGBrgb(79 70 229)
  • RGB (legacy)rgb(79, 70, 229)
  • HSLhsl(243 75% 59%)
  • HSL (legacy)hsl(243, 75%, 59%)
  • OKLCHoklch(51.1% 0.23 277)

Contrast checker

The quick brown fox jumps over the lazy dog

نص تجريبي لقياس وضوح القراءة على هذه الخلفية

نص كبير · Large text

Contrast ratio

4.54:1

Normal text

  • AA (4.5:1)Pass
  • AAA (7:1)Fail

Large text

  • AA (3:1)Pass
  • AAA (4.5:1)Pass

Next, try one of these tools

How to use

  1. 1Type or paste a color: HEX, rgb(), hsl(), oklch() or a name, or use the picker or eyedropper.
  2. 2Copy the format you need from the list.
  3. 3In the contrast checker, set the text and background colors and read the ratio.
  4. 4If a pair fails, press “Suggest a passing color” and use the result.
A color swatch with HEX, RGB and HSL values and a contrast ratio badge

Common uses

  • HEX to RGB for code

    Paste a HEX value from a design file and copy the rgb() or hsl() form for your stylesheet.

  • Accessibility checks

    Test button text, links and captions against their backgrounds before launch.

  • Adjusting a brand color

    Use the OKLCH value to make lighter and darker versions that keep the same hue.

  • Matching a color on screen

    Use the eyedropper to grab a color from an image or another window.

Tips and limits

  • WCAG AA needs 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA needs 7:1 and 4.5:1.
  • Transparent text colors are blended over the background before the ratio is measured.
  • The EyeDropper API exists in Chromium-based browsers, not yet in every browser, so the button only appears where it works.
  • Colors outside the sRGB gamut, such as bright oklch() values, are mapped to the closest color that fits.

Convert any color and check that text is readable

Design files give you HEX, code wants rgb(), and modern CSS can use hsl() or oklch(). Type a color in any of these formats, or a CSS name such as tomato, and you get every other format at once, with a live swatch and a copy button for each. Use the color picker, or the eyedropper in browsers that support it, to take a color from anywhere on your screen. Transparency works too: 8-digit HEX, rgba() and hsla() are read and written correctly.

The contrast checker compares a text color with a background using the WCAG formula, shows the ratio, and says whether it passes AA and AAA for normal and large text, with a live sample in Arabic and English. If a pair fails, “Suggest a passing color” moves the text color’s lightness as little as possible, keeping its hue. Build the starting colors with the palette generator or pull them from a photo with the image color picker. The guide on choosing website colors shows where contrast fits in the process.

Step-by-step guides

Frequently asked questions

How do I convert HEX to RGB?

Type or paste the HEX value, such as #4f46e5. The RGB, HSL and OKLCH versions appear immediately and can be copied.

Which color formats are supported?

HEX with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), oklch(), and the 148 CSS color names.

What contrast ratio is good enough?

At least 4.5:1 for normal text (AA) and 3:1 for large text. For the highest level (AAA), 7:1 and 4.5:1.

What does “Suggest a passing color” do?

It adjusts only the lightness of your text color, in the smallest step that reaches 4.5:1, so the hue and saturation stay as close as possible.

Does the contrast checker work with Arabic text?

Contrast depends only on the two colors, so it applies equally to Arabic and English. The live sample shows both.