Color Converter

Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast ratios, and generate a tonal shade strip.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(62.5% 0.1804 220)

WCAG Contrast

vs White3.68:1
Fail Normal textAA Large text
vs Black5.71:1
AA Normal textAAA Large text

Shade strip (±20% / ±40% lightness)

Click a shade to load it

local · 0.01ms · 7 bytes processed · #3b82f6

Related Tools

🔑
Hash Generator
Compute SHA-1, SHA-256, SHA-384 and SHA-512 hashes of any text in your browser.
 🆔
UUID Generator
Generate cryptographically random UUID v4 identifiers, one or many at a time.
 📏
CSS Clamp Generator
Generate a responsive CSS clamp() for fluid font sizes and spacing.

0 comments

How it works

Paste any color in HEX (#abc or #aabbcc), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), or OKLCH (oklch(L C H)) format and the tool auto-detects the format and converts to all others simultaneously using standard color math. Contrast ratios follow the WCAG 2.1 relative luminance formula, with AA and AAA badges for both normal and large text. The shade strip shifts lightness by ±20% and ±40% in HSL space. All runs locally in your browser — paste private design tokens safely.

Common use cases

  • Convert a Figma HEX token to OKLCH for use with Tailwind v4's @theme block.
  • Check whether a text/background combination passes WCAG AA before shipping.
  • Generate a 5-step tonal palette from a brand color for a design system.

Frequently asked questions

What are WCAG AA and AAA levels?

Web Content Accessibility Guidelines contrast thresholds. AA requires 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+). AAA requires 7:1 and 4.5:1 respectively. AA is the legal minimum in most jurisdictions; AAA is aspirational.

What is OKLCH?

A perceptually uniform color space where equal numerical changes produce equal perceived changes. Unlike HSL, two colors at the same OKLCH lightness look equally bright. Tailwind v4 and CSS Color Level 4 use OKLCH for this reason.

Does it support alpha / transparency?

Yes — rgba(r,g,b,a) and 8-digit HEX (#rrggbbaa) are accepted. Alpha is preserved in all output formats and shown in HEX and RGBA output.

Why no Pantone or CMYK?

Pantone and CMYK require proprietary lookup tables or ICC profiles. This tool covers the web color formats used by browsers, design tools, and CSS.