What HSL means
HSL stands for hue, saturation, and lightness. Hue is an angle around the color wheel, saturation controls color intensity, and lightness controls how dark or bright the color appears.
Why designers use HSL
HSL makes it easier to create related colors. You can keep the hue the same while changing lightness for shades and tints, or rotate the hue to create harmonies.
HSL in CSS
Modern CSS supports space-separated hsl() syntax and optional alpha transparency. HSL is practical for theme systems, hover states, and quick palette adjustments.
Related color tools
Use these tools to pick, convert, test, and export the color values described in this guide.
More color guides
Color GuidesPractical guides for HTML color codes, Hex values, RGB, HSL, CSS colors, palettes, web safe colors, and shades.HTML Color CodesLearn how HTML color codes work and copy Hex, RGB, HSL, OKLCH, named colors, and CSS-ready color values.Hex Color CodesA guide to Hex color codes, six-digit #RRGGBB values, shorthand Hex colors, and Hex to RGB conversion.RGB Color CodesUnderstand RGB color codes, convert RGB to Hex, and use rgb() values in CSS.CSS Color CodesUse CSS color codes in stylesheets, gradients, borders, shadows, SVG, and interface design.Color Palette GeneratorGenerate color palettes from a base color, image, color wheel, harmony, shades, tints, and tones.Web Safe ColorsExplore web safe colors, classic browser-safe palettes, Hex values, and modern alternatives.Color Shades GeneratorCreate color shades, tints, tones, and variations from any Hex, RGB, HSL, or OKLCH color.