HEX to OKLCH Converter
Instantly convert HEX ↔ OKLCH ↔ RGB ↔ HSL. Generate palettes, export as CSS variables or Tailwind config. Free, in your browser.
#6b21a8
complementary
analogous
triadic
split Complementary
shades
tints
HEX to OKLCH
OKLCH is the modern CSS color space with perceptually uniform lightness — supported in Chrome 111+, Safari 15.4+, and Firefox 113+.
OKLCH to HEX
Paste any oklch() value into the input above — the HEX, RGB, and HSL equivalents appear instantly for use as fallbacks.
HSL to OKLCH
Switching from HSL to OKLCH produces more predictable shades and tints — the lightness axis is visually uniform across every hue.
RGB to OKLCH
Convert rgb() values to OKLCH for modern design systems — RGB is still shown as a fallback alongside the OKLCH output.
:root {
--color-primary: #6b21a8;
--color-complementary-1: #6a21a6;
--color-complementary-2: #5da621;
--color-analogous-1: #2721a6;
--color-analogous-2: #6a21a6;
--color-analogous-3: #a6219f;
}Color Formats
Color Harmonies
Complementary — Opposite on the wheel, strong contrast.
Analogous — Adjacent colors, harmonious and cohesive.
Triadic — Three equally spaced, balanced and vibrant.
Split-complementary — High contrast with less tension.
Why OKLCH?
OKLCH is a perceptually uniform color space — equal steps in lightness look equal to the human eye, unlike HSL where the same L value can look wildly different across hues. This makes it ideal for generating shades, tints, and accessible palettes.
It's supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+. For older browsers, ship a HEX or RGB fallback — this tool shows both so you can layer them in your CSS.
Pair this converter with the WCAG Contrast Checker to verify your palette meets accessibility standards before shipping.
Where to Find Color Palettes & UI Kits
Need a starting palette for your next project? These marketplaces have thousands of curated color systems, Tailwind UI kits, and Figma design files — convert and export them with this tool.
Envato Elements
AdUnlimited downloads of Figma UI kits, Tailwind themes, and brand color systems. Commercial license, one subscription.
Browse UI kitsExtract from any website
MiroMiro's Chrome extension pulls the complete color palette from any live site — HEX, RGB, OKLCH for every color used.
Learn morePick colors from any live website
The MiroMiro Chrome extension extracts complete palettes from any page — paste them straight back into this converter to generate harmonies and export.
Frequently Asked Questions
How do I convert HEX to OKLCH?
Paste or type your HEX code (e.g. #6B21A8) into the input field — the tool instantly shows OKLCH, RGB, and HSL equivalents. Click any format card to copy it to your clipboard. OKLCH is the modern CSS color space with perceptually uniform lightness, now supported in all major browsers.
What is the difference between HEX, RGB, HSL, and OKLCH?
HEX is a compact 6-digit representation widely used in web design. RGB expresses the same color as red/green/blue channels (0–255). HSL separates hue, saturation, and lightness — easier for building palettes. OKLCH is a perceptually uniform color space: moving the lightness value produces visually even steps, unlike HSL which can look patchy.
How do I generate a color palette from a single color?
Enter any color and the tool automatically generates complementary, analogous, triadic, and split-complementary palettes based on color theory. It also produces 5 shades (darker) and 5 tints (lighter). Click any swatch in the palette to copy its HEX value.
Can I export my palette as CSS variables or Tailwind config?
Yes. Switch between the CSS Variables and Tailwind Config tabs at the bottom of the tool and click Copy. CSS output is ready to paste into your :root block; Tailwind output is a drop-in for your tailwind.config.js colors object.
Is OKLCH supported in all browsers?
Yes. OKLCH is supported in Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+. For older browsers, use the HEX or RGB fallback — this tool always shows both so you can provide a fallback in your CSS.
What is a complementary color?
Complementary colors sit opposite each other on the color wheel (180° apart). They produce the strongest contrast and are great for call-to-action buttons against a dominant brand color. The tool calculates complementary pairs automatically.
What is a triadic color scheme?
A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). Triadic palettes feel balanced and vibrant — commonly used in illustration, children's products, and playful brand systems.
How do I pick an accessible color combination?
Use this converter to generate your palette, then test any pair in the WCAG Contrast Checker (linked in Related Tools). You need a 4.5:1 ratio for normal text and 3:1 for large text to meet WCAG AA. OKLCH's lightness value is a great starting point — pick two colors whose L values differ by at least 0.4.
Can I share a specific color via URL?
Yes. The URL updates live as you type (e.g. /tools/color-converter?color=6B21A8). Share the link with a teammate and they'll land on the exact same color and palette. Great for design handoff.
Is this color converter free?
Yes. All format conversion, palette generation, and CSS/Tailwind export is free with no signup, no watermark, and no usage limits. Your input never leaves your browser.