CSS Color Converter
Convert between different CSS color formats including modern LCH and OKLCH
Input Color
Enter a color in any CSS format
Supports HEX, RGB, HSL, LCH, OKLCH and more
Converted Formats
Click to copy any format to clipboard
#3b82f6rgb(59, 130, 246)rgb(59, 130, 246)hsl(217, 91.2%, 59.8%)hsl(217, 91.2%, 59.8%)lch(54.6 66.4 277.6)oklch(0.62 0.188 259.8)Example Inputs
About the CSS Color Converter
The CSS Color Converter instantly translates any CSS color value into every other supported format — all in your browser, with no server requests and no install required. Whether you're working in a legacy codebase that uses HEX values or building a modern design system with OKLCH, this tool bridges the gap in one click.
Supported color formats
- HEX — e.g.
#3b82f6 - RGB — e.g.
rgb(59, 130, 246) - RGBA — e.g.
rgba(59, 130, 246, 0.5) - HSL — e.g.
hsl(217, 91%, 60%) - HSLA — e.g.
hsla(217, 91%, 60%, 0.5) - LCH — e.g.
lch(54.29 80.62 262.36) - OKLCH — e.g.
oklch(0.63 0.23 253)
Common use cases
- Converting design tokens from Figma (HEX) into CSS custom properties (OKLCH)
- Adding alpha transparency to an existing color for overlays or shadows
- Translating Tailwind CSS color values for use in raw CSS stylesheets
- Cross-checking color fidelity when migrating between color spaces
OKLCH and LCH are modern CSS color formats built on perceptual uniformity — meaning equal numeric steps in lightness look equally different to the human eye. This makes them superior to HSL for generating accessible, visually consistent palettes and design tokens.