Color Converter for CSS Custom Properties
Quick Answer: CSS custom properties work best with HSL or OKLCH values for flexible theming. Enter any color to get --color: hsl(220 90% 56%) format. HSL makes it easy to create hover states (adjust lightness) and variants (adjust saturation) programmatically.
rgb(109, 40, 217)
hsl(263, 70%, 50%)
CSS Values
color: #6d28d9;
color: rgb(109, 40, 217);
color: hsl(263, 70%, 50%);
FAQ
Why use HSL for CSS variables?
HSL separates hue, saturation, and lightness. This makes it easy to create color variants: lighter (increase L), muted (decrease S), or complementary (rotate H by 180).
How do I add opacity to a CSS variable color?
Store the raw values: --brand: 220 90% 56%. Use as: hsl(var(--brand) / 0.5). This allows opacity control without redefining the color.