Instant two-way conversion between HEX ↔ OKLCH ↔ RGB ↔ HSL with live L/C/H sliders. Generate palettes, export as CSS variables or Tailwind config. No signup, runs in your browser.
#6b21a8
OKLCH is the modern, perceptually uniform CSS color function — Chrome 111+, Safari 15.4+, Firefox 113+.
Switch to OKLCH mode above to drag L/C/H sliders or paste a full oklch() string. HEX updates live.
Switching from HSL to OKLCH produces more predictable shades and tints — lightness is visually uniform across every hue.
Convert rgb() to OKLCH for modern design systems — RGB is still emitted as a fallback.
:root {
--color-primary: #6b21a8;
--color-primary-oklch: oklch(43.8% 0.1983 303.7);
--color-complementary-1: #6a21a6;
--color-complementary-2: #5da621;
--color-analogous-1: #2721a6;
--color-analogous-2: #6a21a6;
--color-analogous-3: #a6219f;
--color-shade-100: #6a21a6;
--color-shade-200: #411466;
--color-shade-300: #180826;
--color-shade-400: #0e0415;
--color-shade-500: #0e0415;
}OKLCH stands for Oklab Lightness, Chroma, Hue — a cylindrical form of the Oklab color space designed to match human vision. It was added to CSS Color Module Level 4 and has been shipping in all major browsers since 2023.
/* Syntax */
color: oklch(L% C H);
color: oklch(70% 0.15 280);
color: oklch(0.7 0.15 280); /* 0-1 also valid */HSL looks uneven: a 50% lightness yellow looks far brighter than a 50% lightness blue. OKLCH fixes this — equal L steps look equal to the human eye across every hue. That's why OKLCH is the modern choice for generating accessible shades, tints, and design-system scales.
OKLCH is supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+. For older browsers, layer a HEX fallback:
.brand {
color: #6b21a8; /* fallback */
color: oklch(37% 0.12 305);
}OKLCH's L axis is perceptually uniform, which makes it the color space for generating design-system scales. Pick your brand hue, hold C roughly constant, and step L by 0.1 to produce 10 visually even shades — no more "the 500 looks too dark for yellow but fine for blue" problems.
/* Uniform lightness scale at constant hue + chroma */
--brand-100: oklch(95% 0.08 280);
--brand-300: oklch(80% 0.15 280);
--brand-500: oklch(65% 0.22 280); /* base */
--brand-700: oklch(45% 0.18 280);
--brand-900: oklch(25% 0.10 280);Complementary — Opposite (180°), maximum contrast.
Analogous — Adjacent (±30°), harmonious.
Triadic — Three at 120° apart, balanced.
Split-complementary — High contrast, less tension.
Paste or type your HEX code (e.g. #6B21A8) into the input field — this tool instantly shows the equivalent OKLCH, RGB, and HSL values. Click any format card to copy it. OKLCH is the modern CSS color function with perceptually uniform lightness, supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+.
Switch to the OKLCH tab in the input bar and drag the L (lightness), C (chroma), and H (hue) sliders, or paste a full oklch() string. The HEX, RGB, and HSL fallbacks update live. If the OKLCH color falls outside the sRGB gamut, the HEX output will be clamped to the closest representable color.
HEX is a compact 6-digit hex code (#6B21A8). RGB expresses the same color as red/green/blue channels 0–255. HSL separates hue, saturation, and lightness — easier for building palettes. OKLCH is the modern, perceptually uniform color space: moving the lightness value produces visually even steps across all hues, unlike HSL where the same L value can look wildly different across the wheel.
HSL is perceptually inconsistent — a 50% lightness yellow looks much brighter than a 50% lightness blue. OKLCH fixes this: it is built on the Oklab color space where equal lightness steps look equal to the human eye, regardless of hue. This makes OKLCH ideal for generating accessible shades, tints, and gradient stops in design systems.
OKLCH is supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+ (all major browsers from 2023 onwards). For older browsers, ship a HEX or RGB fallback — this tool always shows both so you can layer them in a progressive-enhancement pattern with @supports (color: oklch(0% 0 0)).
Tailwind v3.3+ accepts OKLCH in arbitrary values: bg-[oklch(70%_0.15_280)] works out of the box. For a Tailwind config, wrap the oklch() string in quotes inside your colors object. Switch the Export panel on this page to Tailwind to copy a ready-to-paste theme snippet.
Enter any color and this tool automatically generates complementary (180°), analogous (±30°), triadic (120° apart), and split-complementary palettes using color-theory math. It also produces 5 shades and 5 tints based on the OKLCH lightness axis for perceptually uniform steps. Click any swatch to copy its HEX.
Yes. Switch between the CSS Variables and Tailwind Config tabs in the Export panel and click Copy. CSS output is ready to paste into your :root block as custom properties; Tailwind output is a drop-in for your tailwind.config.js colors object.
Complementary colors sit opposite each other on the color wheel (180° apart in hue). They produce maximum contrast and are perfect for call-to-action buttons against a dominant brand color. This tool calculates complementary pairs automatically using the HSL hue value.
A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). Triadic palettes feel balanced yet vibrant — commonly used in illustration, children's products, and playful brand systems like Duolingo or Slack.
Generate your palette here, then test any pair in the WCAG Contrast Checker. You need a 4.5:1 ratio for normal text and 3:1 for large text to meet WCAG AA. As a rule of thumb in OKLCH: pick two colors whose L (lightness) values differ by at least 0.4 — that almost always produces sufficient contrast.
Yes. The URL updates live as you edit (e.g. /tools/color-converter?color=6B21A8). Share the link with a teammate and they land on the same color, palette, and format breakdown. Great for design handoff and cross-team reviews.
Yes — fully free with no signup, no watermark, no usage limits. All conversion and palette math runs in your browser, so your inputs never leave your device.
The MiroMiro Chrome extension extracts complete palettes from any page — HEX, RGB, and OKLCH for every color used. Paste them back here to generate harmonies.