HSL to OKLCH
Color Converter
press down arrow to get a random color
Convert HSL to OKLCH
What is HSL color code?
A HSL color code, which stands for Hue, Saturation, Lightness, is a color representation system used in digital design and computing. Unlike RGB, which is based on the red, green, and blue primary colors, HSL focuses on different aspects of color.
- Hue: Represents the type of color, ranging from 0 to 360 degrees around the color wheel, where red is 0, green is 120, and blue is 240, for example.
- Saturation: Measures the purity of the color, with 0% being grayscale and 100% being fully saturated.
- Lightness: Specifies the brightness of the color, with 0% being black, 100% being white, and 50% being the original color.
HSL color codes provide a more intuitive and user-friendly way to work with colors, making it easier to adjust color attributes like hue, saturation, and lightness for various design purposes in web and graphic design.
What is OKLCH color code?
OKLCH is a color space that combines the perceptual uniformity of OKLAB with the intuitive cylindrical coordinates of LCH (Lightness, Chroma, Hue). It is increasingly becoming the preferred color space for modern web design and CSS because it allows for predictable color manipulation—such as creating harmonious palettes or adjusting lightness without shifting the perceived hue—better than HSL or standard LCH. It is natively supported in modern CSS Color Module Level 4, enabling more vibrant and accessible color schemes.