🎨 Design & Creative

Color Converter — HEX, RGB, HSL, OKLCH & Contrast

Convert any color between HEX, RGB, HSL, HWB, OKLCH and LCH. Includes WCAG 2.2 contrast checker against any background or alternate foreground.

Color input (any format) Accepts hex, rgb, hsl, hwb, oklch, lch and CSS names.

Swatch

Format	Value

WCAG contrast checker

Foreground

Background

Contrast ratio

—

Body text 16 px
Large text 24 px

—

How the math works

sRGB → linear via the standard gamma curve, then to OKLab using Björn Ottosson's matrix, then to OKLCH by polar coords. HSL/HWB use the standard CSS Color Module 4 formulas.

WCAG 2.2 contrast: ratio = (L1 + 0.05) / (L2 + 0.05) using relative luminance from the sRGB→linear weighted sum (0.2126 R + 0.7152 G + 0.0722 B). AA = 4.5, AAA = 7 for normal text; 3 and 4.5 for large (18 pt / 14 pt bold).

Also known as

color converter oklchhex to hslwcag contrast checkerrgb to hex

Related tools

🎨 Design & Creative
Pixels to cm / Inches Converter (Print DPI)

Convert pixel dimensions to physical print size at any DPI/PPI, with bleed and safe-zone helpers.
🎨 Design & Creative
Typography Scale Generator (Modular Type Scale)

Generate a modular type scale in rem, px and em from any base size and ratio, with line-height pairs.
🎨 Design & Creative
Aspect Ratio Resizer (Image, Video, Social)

Resize any dimensions while keeping aspect ratio, with presets for Instagram, TikTok, YouTube and cinema formats.
🧰 Other Conversions
Font Size Converter (pt, px, rem, em, %)

Convert font sizes between pt, px, rem, em and % for web and print typography.