OKLCH → HEX Converter + Picker for Designers

oklch(0.8815 0.275 138.49)
#66ff00
Color Conversion
OKLCH
HEX (3, 4, 6 or 8 characters)
Lightness
0.8815
Chroma
0.275
Hue
138.49
Alpha
1
Color Harmonies
Contrast (WCAG)
Loading... -
Design Tokens
/* CSS Custom Properties */ :root { --color-primary: oklch(0.58 0.236 29.54); --color-primary-hover: oklch(0.62 0.236 29.54); --color-primary-active: oklch(0.52 0.236 29.54); --color-primary-light: oklch(0.85 0.15 29.54); --color-primary-dark: oklch(0.35 0.236 29.54); --color-primary-text: oklch(0.95 0.02 29.54); --color-secondary: oklch(0.58 0.236 209.54); --color-background: oklch(0.95 0.02 29.54); --color-surface: oklch(0.98 0.01 29.54); --color-border: oklch(0.85 0.05 29.54); }
Figma Export
{ "colorPrimary": { "value": "oklch(0.58 0.236 29.54)", "type": "color", "description": "text_brand_here" }, "colorPrimaryHover": { "value": "oklch(0.62 0.236 29.54)", "type": "color", "description": "text_hover_here" }, "colorPrimaryActive": { "value": "oklch(0.52 0.236 29.54)", "type": "color", "description": "text_active_here" }, "colorPrimaryText": { "value": "oklch(0.95 0.02 29.54)", "type": "color", "description": "text_main_bg_here" } }

OKLCH: The Digital Color Revolution

OKLCH is a modern color model changing web design approach. Based on human perception. Why OKLCH became 2026 standard: Predictability, Naturalness, Performance, Flexibility. Perfect for CSS and modern browsers. Bookmark this page — we update tools regularly!
Format Settings