Color Picker

Drag on the HSL wheel, tune lightness, and export harmonies as CSS variables — free, no account.

Open hex converter Build tint & shade scale Edit in OKLCH picker Check contrast

#F54927

:root {
  --color-primary: #900000;
  --color-primary-rgb: 144, 0, 0;
  --color-primary-oklch: oklch(41.0% 0.168 29);
  --color-secondary: #DE5A3F;
  --color-secondary-rgb: 222, 90, 63;
  --color-secondary-oklch: oklch(63.4% 0.171 33);
  --color-accent: #F54927;
  --color-accent-rgb: 245, 73, 39;
  --color-accent-oklch: oklch(64.9% 0.214 33);
  --color-surface: #34CBEA;
  --color-surface-rgb: 52, 203, 234;
  --color-surface-oklch: oklch(77.9% 0.127 215);
  --color-highlight: #29D3F5;
  --color-highlight-rgb: 41, 211, 245;
  --color-highlight-oklch: oklch(80.1% 0.135 216);
}

/* Harmony: complementary · Color space: sRGB */

Using the color wheel

Drag on the wheel to set hue and saturation, then tune lightness on the slider below. Type a hex code to sync every control instantly.

Harmony modes — complementary, analogous, triadic, and more — reposition partner swatches around your base color using standard HSL geometry.

Copy hex, RGB, HSL, OKLCH, or LAB values, or export the full harmony as CSS custom properties.

When to use this vs OKLCH or the generator

This picker is ideal for quick exploration and classic color-theory harmonies in HSL.

For perceptually uniform ramps and design-token authoring, open the OKLCH picker or the full palette generator with export to Tailwind, ASE, and Figma formats.