Color Converter

Convert between hex, RGB, HSL, OKLCH, and OKLAB while checking contrast and exporting CSS-ready tokens.

Current color

#953769

Suggested foreground

#FFFFFF

Complementary color

#007653

Hex

RGB(A)

HSL(A)

OKLCH

OKLAB

Alpha

Tailwind theme

Generate a full brand palette for Tailwind CSS 4 or 3 from the current color.

@theme {
  --color-brand-50: oklch(94.5% 0.0212 350.46);
  --color-brand-100: oklch(89.49% 0.0339 350.46);
  --color-brand-200: oklch(81.48% 0.0542 350.46);
  --color-brand-300: oklch(72.47% 0.0771 350.46);
  --color-brand-400: oklch(61.46% 0.105 350.46);
  --color-brand-500: oklch(48.44% 0.138 350.46);
  --color-brand-600: oklch(43.57% 0.1236 350.46);
  --color-brand-700: oklch(38.7% 0.1093 350.46);
  --color-brand-800: oklch(33.22% 0.0932 350.46);
  --color-brand-900: oklch(27.74% 0.077 350.46);
  --color-brand-950: oklch(23.48% 0.0644 350.46);
}

oklch(94.5% 0.0212 350.46)

100

oklch(89.49% 0.0339 350.46)

200

oklch(81.48% 0.0542 350.46)

300

oklch(72.47% 0.0771 350.46)

400

oklch(61.46% 0.105 350.46)

500

oklch(48.44% 0.138 350.46)

600

oklch(43.57% 0.1236 350.46)

700

oklch(38.7% 0.1093 350.46)

800

oklch(33.22% 0.0932 350.46)

900

oklch(27.74% 0.077 350.46)

950

oklch(23.48% 0.0644 350.46)

CSS variables

:root {
  --brand: oklch(48.44% 0.138 350.46);
  --brand-rgb: rgb(149, 55, 105);
  --brand-foreground: #ffffff;
}