Skip to content
◈

Color Converter

WebFree · Private

Convert colors between HEX, RGB, HSL, OKLCH, and LAB. Live swatch preview, EyeDropper API, and WCAG contrast checker. All in your browser, no upload.

Color Input

#3b82f6

rgb(59, 130, 246)

HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.22, 91.22%, 59.8%)
OKLCH
oklch(0.623 0.188 259.8)
LAB
lab(54.62 8.76 -65.79)

R

59

G

130

B

246

H

217°

S

91%

L

60%

Supported color formats

  • HEX — #rrggbb or #rgb. Most common format for web design.
  • RGB — rgb(255, 0, 0). Red, green, blue channels 0–255.
  • HSL — hsl(0, 100%, 50%). Hue (0–360°), Saturation, Lightness. Intuitive for designers.
  • OKLCH — oklch(0.628 0.258 29.2). Perceptually uniform. Native CSS Color Level 4.
  • LAB — lab(53.23 80.11 67.22). Device-independent CIE L*a*b* color space.

Why OKLCH?

OKLCH (Oklab Lightness Chroma Hue) is the recommended color space for modern CSS. Unlike HSL, changes to Lightness in OKLCH are perceptually uniform — doubling the L value actually looks twice as bright to a human observer. This makes it far more predictable for creating accessible color palettes and smooth gradients. CSS Color Level 4 added native oklch() support, available in all modern browsers.

WCAG contrast checker

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios for text legibility:

  • AA — 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
  • AAA — 7:1 for normal text, 4.5:1 for large text. Highest accessibility standard.

Switch to the WCAG Contrast tab, enter your foreground and background colors, and see the ratio and pass/fail status instantly.

Frequently Asked Questions

How do I convert HEX to RGB?
Paste or type your HEX color (with or without the # prefix) and RGB values appear instantly alongside HSL and OKLCH.
What is OKLCH?
OKLCH is a perceptually uniform color space supported by modern CSS. Lightness, Chroma, and Hue values map more predictably to human perception than HSL.
How does the WCAG contrast checker work?
Enter a foreground and background color. The tool calculates the contrast ratio per WCAG 2.1 and tells you if it passes AA (4.5:1) or AAA (7:1) for normal text.
What is the EyeDropper API?
The EyeDropper API (available in Chrome/Edge) lets you pick any color from your screen. Click the eyedropper icon to sample a color from anywhere on your display.

Related Tools

◈
SVG Optimizer

Optimize SVG files with SVGO in your browser. Per-plugin checkboxes, before/after size comparison, live visual preview, export as SVG or PNG. No upload.

◈
Regex Tester

Test regular expressions live with match highlighting, capture group tables, and replace preview. Includes a cheatsheet of common patterns. 100% in-browser.

◈
Base64 Encode

Encode text or files to Base64 in your browser. URL-safe variant, data URI generator, image preview for encoded images. Nothing is uploaded or stored.