Skip to content
TypeParser
All tools

Color Converter

HEX, RGB, HSL, OKLCH, and contrast.

beats colorhexa.com edge: OKLCH support + WCAG contrast + auto-detect input
color
native picker
WCAG contrast
vs bg
Sample text
— : 1
formats
Guide

About Color Converter

Type a color in any format — HEX, RGB, RGBA, HSL, HSLA, HSV, OKLCH — and see every other format render simultaneously. Live WCAG AA / AAA contrast against a configurable background. Click any value to copy. Auto-detects whichever format you paste so you do not have to switch modes.

Why so many color formats?

Each was designed for a different audience:

  • HEX — concise, ubiquitous, what designers paste into Slack
  • RGB / RGBA — the bytes the screen renders, plus alpha
  • HSL / HSLA — hue / saturation / lightness, intuitive for adjusting brightness
  • HSV — hue / saturation / value, the shape of a Photoshop wheel
  • OKLCH — perceptually uniform; the modern color model

Modern stylesheets often mix them — HEX for tokens, OKLCH for derived shades, RGBA for overlays. A converter has to handle every direction without losing precision.

Live WCAG contrast

Contrast is the single biggest accessibility lever you control with color. WCAG defines three thresholds:

LevelBody textLarge text (18pt or 14pt bold)
AA4.5 : 13.0 : 1
AAA7.0 : 14.5 : 1

Type a foreground, type a background, the contrast badge updates as you adjust either. Faster than looping through dev tools.

Common workflows

Pick a tinted shade for a hover state. Convert your base color to OKLCH, drop the lightness 5%, paste the result back. The visual shift looks consistent because OKLCH is perceptually uniform.

Verify a button’s accessibility. Foreground = button text, background = button fill. Confirm AA. Adjust if not.

Build a palette from a brand color. Start in HEX, convert to OKLCH, walk lightness in 10% steps. Each step gives you a balanced shade for backgrounds, borders, hover states.

Decode a HEX from a screenshot. Eyedropper the HEX, paste here, copy the OKLCH. You can now adjust mathematically rather than guess.

Why OKLCH is taking over

CSS pre-2023 did color math in HSL, which lies — equal lightness numbers do not look equally light. OKLCH solves that. A 50% lightness yellow looks as bright as a 50% lightness blue. This makes deriving a palette algorithmically actually work; HSL-derived palettes always need manual nudging. Browsers shipped OKLCH support quietly, design systems adopted it, and now most new design tokens are OKLCH-first.

Frequently asked questions

What is OKLCH and why bother?
A perceptually uniform color space — equal numerical changes look like equal perceptual changes. Better for generating accessible palettes and smoother gradients than HSL. Native in CSS Color Module 4 (every modern browser).
How is contrast calculated?
WCAG 2.1 relative luminance formula. AA requires 4.5:1 for body text, 3.0:1 for large text. AAA tightens to 7.0:1 / 4.5:1. The contrast badge updates as you change foreground or background.
Why does my HEX show different RGB on another tool?
Almost always color-space mismatch — sRGB versus Display-P3 versus Adobe RGB. We treat all input as sRGB unless explicitly tagged. If you need P3-aware conversion, paste the OKLCH or use color() notation.
Can it convert with alpha?
Yes. rgba(), hsla(), 8-digit HEX (#RRGGBBAA) all round-trip correctly. The alpha channel is preserved across formats.
What about CMYK?
CMYK is print-only and has no canonical conversion from sRGB without a color profile. We deliberately do not include it — for reliable print conversion use Adobe Color or a profile-aware tool like Sip.
Why use this over the browser's color picker?
Browser pickers give you HEX and that is mostly it. This shows every format at once, computes WCAG contrast live, supports OKLCH, and works without opening DevTools.

Related tools

Last updated: 2025-01-15