Skip to content
OKLCH → HSLA

OKLCH to HSLA Converter

Convert from OKLCH into HSLA on a focused landing page with a single conversion intent.

Strict landing page Demo input Mismatch warning Universal fallback
Current color
Default sample
Detected format
OKLCH
Target format
OKLCH
Resolved color name
Emerald Green
Input
oklch(0.5355, 0.1318, 139.77)
Target
hsla(108, 45.98%, 34.12%, 1)

Formats

The same color in different formats:

Export formats

Ready-to-copy snippets for developers, apps, frameworks, and design systems.

#3F7F2F
Design tokens
Tokens
CSS variable
Tokens
JSON token
Tokens
Tailwind config
Tokens
SCSS variable
Tokens
Web / frontend
Frontend
JavaScript
Frontend
TypeScript
Frontend
Inline style
Frontend
CSS class
Frontend
Mobile / app
Mobile
Android XML
Mobile
SwiftUI
Mobile
Swift UIColor
Mobile
Kotlin
Mobile
Flutter
Mobile
React Native
Mobile
SVG / graphics
Graphics
SVG fill
Graphics
SVG stroke
Graphics

Color Variations

tint / shade
Tint
Lightened version
#3f7f2f
Shade
Darkened version
#2d5a22
Tone
Muted version
#5f8b57
Monochrome
Single-hue family
#24471c

Popular conversion pairs

HEX → RGB HEX → RGBA HEX → HSL HEX → HSLA HEX → CMYK HEX → LAB HEX → LCH HEX → OKLCH RGB → HEX RGB → RGBA RGB → HSL RGB → HSLA RGB → CMYK RGB → LAB RGB → LCH RGB → OKLCH RGBA → HEX RGBA → RGB RGBA → HSL RGBA → HSLA RGBA → CMYK RGBA → LAB RGBA → LCH RGBA → OKLCH HSL → HEX HSL → RGB HSL → RGBA HSL → HSLA HSL → CMYK HSL → LAB HSL → LCH HSL → OKLCH HSLA → HEX HSLA → RGB HSLA → RGBA HSLA → HSL HSLA → CMYK HSLA → LAB HSLA → LCH HSLA → OKLCH CMYK → HEX CMYK → RGB CMYK → RGBA CMYK → HSL CMYK → HSLA CMYK → LAB CMYK → LCH CMYK → OKLCH LAB → HEX LAB → RGB LAB → RGBA LAB → HSL LAB → HSLA LAB → CMYK LAB → LCH LAB → OKLCH LCH → HEX LCH → RGB LCH → RGBA LCH → HSL LCH → HSLA LCH → CMYK LCH → LAB LCH → OKLCH OKLCH → HEX OKLCH → RGB OKLCH → RGBA OKLCH → HSL OKLCH → HSLA OKLCH → CMYK OKLCH → LAB OKLCH → LCH