</>tooledge.dev

Color Converter

Convert between HEX, RGB, HSL, and OKLCH. Edit any format — the others update live. All conversion runs in your browser.

preview
100%
Closest Tailwind

Formats

HEX
6 or 8 hex digits, optional `#`
RGB
`rgb(r, g, b)` or `rgba(r, g, b, a)` — channels 0–255
HSL
Hue 0–360°, Saturation/Lightness as %
OKLCH
Perceptually uniform · CSS Color Module 4

Tailwind palette · click to load

The ToolEdge Color Converter lets you pick a color visually or type a value in any common format — HEX, RGB, HSL, or OKLCH — and instantly see all the others kept in sync. It's the everyday tool for frontend developers who get a hex code from a designer's spec and need to convert it to HSL to derive hover/active states, or who need OKLCH for the perceptually uniform color manipulation that modern CSS encourages.

All conversions happen in your browser using pure JavaScript color math. We don't hit a backend — no latency, no logging, fast enough that the four format inputs feel like one. The tool also shows you the closest Tailwind palette match (e.g., `text-zinc-700`) so you can drop the color into a Tailwind project without picking through documentation.

Common use cases

  • Translating a designer's HEX code into HSL so you can derive lighter/darker variants programmatically.
  • Converting brand colors into OKLCH — modern CSS's perceptually uniform colorspace, used by Tailwind 4 and shadcn/ui.
  • Spot-checking what a `rgb(...)` value actually looks like without firing up a design tool.
  • Finding the nearest Tailwind class for a given color so you can use a utility class instead of an arbitrary value.
  • Eye-dropping a color from your screen via the browser-native picker and getting all four formats at once.

Frequently asked questions

OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space — equal numerical changes correspond to equal perceptual changes, which is *not* true of HSL or RGB. Tailwind 4 and many design systems are moving to OKLCH because it makes generating palettes (lighten by 10, darken by 10, etc.) actually look right. If you're building a modern design system, OKLCH is worth learning.