Color Tools

Convert colors between HEX, RGB, HSL, HWB and OKLCH, check WCAG contrast, and generate perceptually even 50–950 scales and harmonious palettes — ready to paste into CSS, SCSS or Tailwind.

Color

#007bff

HEX	#007bff
RGB	rgb(0 123 255)
HSL	hsl(211 100% 50%)
HWB	hwb(211 0% 0%)
OKLCH	oklch(60.5% 0.217 257.2)
CMYK (approx.)	cmyk(100% 52% 0% 0%)

Contrast checker (WCAG 2.x)

Text color

Background

Large text sample — 24px

Normal body text looks like this. The quick brown fox jumps over the lazy dog.

Small print: 12px helper text and captions.

5.50:1contrast ratio

AA normal ✓AA large ✓AAA normal ✗AAA large ✓UI components ✓

Nearest text colors that pass (same hue, adjusted lightness):

Tints & shades (50–950)

Click a swatch to copy · built with even OKLCH lightness steps

Color harmonies

Hues are rotated in OKLCH, so lightness and chroma stay consistent across the palette.

Export scale

NameFormat

:root {
  --brand-50: #f2f7ff;
  --brand-100: #dfecff;
  --brand-200: #bfdaff;
  --brand-300: #94c0ff;
  --brand-400: #60a2ff;
  --brand-500: #1c81ff;
  --brand-600: #0066d6;
  --brand-700: #0051ac;
  --brand-800: #003f89;
  --brand-900: #002d67;
  --brand-950: #00193e;
}