Suishou Tools

Color Converter

Convert any CSS color between HEX, RGB, HSL and OKLCH, and see right away whether white or black text on it passes WCAG contrast. Works with transparency too.

Contrast checker (WCAG 2)

White text Aa Sample body text at normal size
— contrast ratio
Black text Aa Sample body text at normal size
— contrast ratio

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt and up, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. Semi-transparent colors are measured as laid over a white background.

How to use the Color Converter

  1. Type or paste a color into “Enter any color code”, for example #2456e3, rgb(36, 86, 227), hsl(224, 77%, 52%) or oklch(0.53 0.21 265). Or click the swatch on the left to pick one.
  2. The HEX, RGB, HSL and OKLCH rows update instantly. Click “Copy” next to the format you need.
  3. Check the contrast checker: it shows the ratio and AA / AAA results for white text and black text on your color.

HEX, RGB, HSL and OKLCH explained

HEX (#2456e3) and RGB (rgb(36, 86, 227)) describe the same thing: how much red, green and blue light to mix, each from 0 to 255. HEX writes the three values in base 16, which is why it is the format you see in design tools and brand guidelines. An optional fourth pair, as in #2456e380, adds transparency.

HSL describes a color by hue (0–360 degrees around the color wheel), saturation and lightness, which makes it easier to tweak by hand: change only the lightness to get a darker or lighter shade. Its weakness is that equal lightness values don’t look equally bright: hsl(60, 100%, 50%) yellow looks far lighter than hsl(240, 100%, 50%) blue.

OKLCH, supported in all major browsers since 2023, fixes that. L is perceived lightness, C is chroma (colorfulness) and H is hue. Colors with the same L look equally light, so OKLCH is a good choice for building color palettes and design-system scales. It can also describe colors outside the sRGB range of most screens.

WCAG color contrast requirements

The Web Content Accessibility Guidelines (WCAG 2.1 and 2.2) measure contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). Level AA, the target in most accessibility laws and policies including the ADA Title II rule and Section 508 in the US and the European Accessibility Act, requires 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1.

Large text means at least 18pt (24px) regular or 14pt (about 18.66px) bold. A classic example: #767676 gray on white is 4.54:1 and just passes AA, while #777777 is 4.48:1 and fails. The default blue #2456e3 reaches 5.97:1 with white text, so it passes AA but not AAA.

Writing colors in CSS

Modern CSS accepts space-separated color functions: rgb(36 86 227 / 50%), hsl(224 77% 52%) and oklch(0.53 0.21 265). This converter reads both the older comma syntax and the modern one, and outputs the comma form for RGB and HSL because it works everywhere.

When an OKLCH color falls outside sRGB, the browser clips it to the nearest color the screen can show. This tool does the same and tells you when it happened, so you know the HEX and RGB values are an approximation.

Frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and convert each from base 16 to base 10. For #ff6347, ff = 255, 63 = 99 and 47 = 71, so the color is rgb(255, 99, 71). Paste the HEX code above and the RGB value appears instantly.

What’s the difference between HSL and OKLCH?

Both use hue, but HSL’s lightness is mathematical while OKLCH’s is perceptual. Two OKLCH colors with the same L look equally light to the eye; two HSL colors with the same L often don’t. OKLCH is better for generating consistent shades and palettes.

What contrast ratio do I need for accessibility?

For WCAG AA, which most organizations target, normal text needs at least 4.5:1 and large text 3:1. AAA needs 7:1 for normal text and 4.5:1 for large text. User-interface components and icons need 3:1 against their surroundings.

Does it support transparent colors?

Yes. You can enter #RRGGBBAA, rgba(), or the / alpha syntax. The contrast check uses the color as it would appear laid over a white background.

Can I enter color names like “tomato” or “navy”?

Not at the moment. Enter the color as HEX, rgb(), hsl() or oklch(). You can also click the swatch to open your system’s color picker, or use its eyedropper to grab a color from the screen where supported.

Last updated: View source code

Image Converter Convert images to JPG, PNG, WebP or AVIF, several at a time. Everything runs in your browser, so your photos never leave your device. HTML Entity Encoder / Decoder Escape text so it displays safely inside HTML, or turn entities like < & © back into normal characters. Includes a cheat sheet of the most common HTML entities. Markdown Preview Write Markdown on the left and see it rendered on the right as you type. Supports GitHub Flavored Markdown, and lets you copy the HTML or download the result as a file. JSON Formatter Paste JSON to validate and pretty-print it instantly, or minify it into a single line. If it is invalid, you get the exact line and column plus a plain-English explanation of what is wrong. Base64 Encode and Decode Turn text into Base64 or decode a Base64 string back to readable text. Everything is handled as UTF-8, so accented letters, emoji and non-Latin scripts come back exactly as they went in. Roman Numeral Converter Type a number to get its Roman numeral, or type a Roman numeral to get the number. Each result is broken into parts, so you can see how it is built. Unix Timestamp Converter Check the current Unix timestamp, or convert between epoch time and human-readable dates. Seconds and milliseconds are detected automatically, and every result is shown in your local time, UTC and ISO 8601. URL Encode and Decode Percent-encode text for use in a URL, or decode %XX sequences back into readable text. Paste a full link below to break it into its scheme, host, path and decoded query parameters.