Dev Tools
Client-sidefiles never upload

Color format converter

Paste any color format (hex / rgb / hsl / oklch / oklab / CSS named) and get all five formats live, plus the nearest Tailwind class. Runs entirely in your browser.

Detected format: hex
Preview: #1e90ff
Nearest CSS named color: dodgerblue (Ξ”E 0.000)
Hex
#1e90ff
RGB
rgb(30, 144, 255)
HSL
hsl(210, 100%, 56%)
OKLCH
oklch(65.2% 0.19 253.2)
OKLab
oklab(65.2% -5.5% -18.2%)
Nearest Tailwind class
  • bg-blue-500Ξ”E 0.036
  • bg-sky-500Ξ”E 0.071
  • bg-indigo-500Ξ”E 0.106
β€ΊHow to use
  1. Paste any color: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%), oklch(64% 0.19 250), or dodgerblue β€” all accepted.
  2. All five formats update live on the right. Hit Copy on any row.
  3. Below, the closest Tailwind classes are sorted by perceptual distance (OKLab Ξ”E) β€” handy for mapping brand colors.
  4. State is mirrored into the URL hash (#1e90ff), so you can share a configuration by copying the URL.
Tips
  • OKLCH is the new CSS Color Level 4 format. Tailwind v4 ships with it; brightness perception is more accurate than HSL.
  • Ξ”E measures perceptual color distance β€” anything under ~1 is hard to tell apart by eye.
  • 8-digit hex (with alpha) is supported: #1e90ff80 means 50% transparency.

Related tools