Skip to content
Data & Time

Color Toolkit

Convert colors, build shade scales and check contrast.

Convert

HEX

#ff8f3f

RGB

rgb(255, 143, 63)

HSL

hsl(25, 100%, 62.35%)

OKLCH

oklch(0.7581 0.1631 52.65)

Tailwind-style scale (50–950)

Click a swatch to copy its hex. The scale ramps oklch lightness while keeping your color’s hue.

WCAG contrast checker

18.78: 1

AA normal passesAA large passesAAA normal passesAAA large passes

WCAG 2.1: AA requires 4.5:1 for normal text and 3:1 for large text (≥ 24 px, or 18.66 px bold). AAA requires 7:1 and 4.5:1.

About this tool

Convert colors between HEX, RGB, HSL and OKLCH, build a 50–950 shade scale from any base with a perceptual lightness ramp, and check WCAG contrast with AA/AAA.

  • 1Enter a color as HEX, RGB, HSL or OKLCH and see every other format instantly.
  • 2Generate a 50–950 shade scale built on a perceptual OKLCH lightness ramp.
  • 3Check foreground/background contrast with WCAG AA and AAA verdicts.
  • 4All conversions run locally with the culori color library.

Private by design

Everything runs locally in your browser. Your text, files and images are never uploaded to a server — the entire tool works offline once the page has loaded.

Keep going

Related tools