RGB to LCH Converter
Free, accurate, and instant conversion. Preview your color in real-time on digital and print mockups.
Source Input RGB
/* CSS Variable */ --color-primary: #000000; /* Standard */ color: #000000; background-color: #000000;
LCH: The "Fixed" HSL
Designers love HSL because it is easy to understand. But HSL is a lie. It tells you that Yellow and Blue have the same "Lightness" (50%), which is visually false (Yellow looks much brighter).
LCH (Lightness, Chroma, Hue) solves this. It takes the perceptual accuracy of CIELAB and wraps it into the intuitive user interface of Cylindrical coordinates. It is widely considered the best color model for modern UI design.
L (Lightness)
A truthful measure of brightness. L=50 yellow is just as bright as L=50 blue.
C (Chroma)
How "rich" is the color? Similar to saturation, but describes intensity.
H (Hue)
Angle (0-360). Just like standard color wheels, but spaced based on perception.
The "Grey Dead Zone" in Gradients
Why RGB Gradients Look Muddy
When you fade from Blue to Yellow in RGB, the middle color is often a muddy grey. This is because the math just draws a straight line through the cube, passing through the desaturated center. In LCH, the math moves *around* the loop of pure colors. The midpoint between Blue and Yellow in LCH might be a vibrant Magenta or Green. LCH creates "rich" gradients that never look washed out.
Pro Tips for Accessible Palettes
- • Contrast guarantee: ΔL of 50+ between foreground/background ensures WCAG AA compliance.
- • Equal weight: Keep chroma consistent across palette colors for visual balance.
- • Semantic colors: Use fixed hue angles (0°=red, 120°=green, 240°=blue) for meaning.
- • Dark mode: Invert L values (L → 100-L) while keeping C and H for perfect dark themes.
Accessibility Superpower
Because L (Lightness) in LCH is perceptually uniform:
- You can pick ANY two colors with a Lightness difference of 50 (e.g., L=30 and L=80).
- They are guaranteed to pass WCAG contrast guidelines, regardless of their Hue.
- This allows you to generate random accessible palettes programmatically.
Who Uses RGB to LCH?
Accessibility Specialists
Build contrast-compliant palettes with guaranteed readability.
Data Visualization Designers
Create chart color scales with equal visual weight.
Design System Architects
Define systematic color scales with predictable behavior.
CSS Gradient Artists
Create vibrant, muddy-free color transitions.
Frequently Asked Questions
What is LCH?
LCH stands for Lightness, Chroma, and Hue. It is essentially the CIELAB space but mapped to a Cylinder (like HSL) instead of a Cube (like Lab). It is intuitive like HSL but perceptually accurate like Lab.
Why is LCH better than HSL?
In HSL, 'Yellow' and 'Blue' at 50% Lightness have vastly different perceived brightness. In LCH, 50% Lightness means physically 50% brightness for ALL focus. This makes it perfect for maintaining contrast ratios.
What is Chroma?
Chroma is 'colorfulness'. It is similar to Saturation, but unlike Saturation (which is capped at 100%), Chroma is theoretically unlimited. Neon colors have very high Chroma (>132).
Does CSS support LCH?
Yes! Safari, Chrome, and Firefox now support lch(50% 132 180). It is the first CSS color space capable of displaying Wide Gamut (P3) colors natively.
Why use LCH for gradients?
RGB gradients often pass through a 'grey zone' (muddy middle). LCH gradients interpolate via Hue angle, creating vibrant, clean transitions (e.g., Blue → Purple → Red instead of Blue → Grey → Red).
Is Hue the same in LCH and HSL?
No. The hues are rotated differently. 0 degrees is roughly red in both, but the spacing of green/blue is different to account for human perception sensitivity.
What is OKLCH and how is it different?
OKLCH is an improved version with better hue linearity. In LCH, blues can appear purple when lightness changes. OKLCH fixes this. Both are now supported in CSS.
How do I interpolate hue correctly?
Use 'shorter' or 'longer' hue interpolation methods. CSS in lch shorter hue takes the shorter path around the color wheel, avoiding unexpected color shifts.
What happens at the gamut boundary?
sRGB has an irregular boundary in LCH space. High chroma colors at certain hues exceed sRGB. Reduce chroma (not lightness) to bring colors into gamut.
What's the maximum chroma in sRGB?
It varies by hue and lightness. Pure red (#FF0000) has chroma ~104. Pure cyan (#00FFFF) reaches ~132. Greys have chroma 0.
Can I use LCH with Tailwind CSS?
Yes! Define LCH colors in your tailwind.config.js using CSS custom properties or the lch() function. Modern browsers will render them correctly.
How do I generate accessible chart colors?
Fix lightness (e.g., L=60), keep chroma consistent, and space hues evenly (e.g., every 30°). This ensures equal visual weight and accessibility.