HSL
A way to describe color by hue, saturation and lightness, which is easier to adjust by hand than RGB.
Also called HSL color
HSL stands for hue, saturation and lightness. Hue is the angle on the color wheel (0 to 360), saturation is how vivid the color is, and lightness runs from black through the pure color to white.
Designers like HSL because it matches how we think: to make a lighter version of a color, raise the lightness and leave the rest alone.
Guides that cover HSL
- HSL What are HSL colors? HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
- Harmony What Is Color Harmony? Color harmony explained: complementary, analogous, triadic and other harmonies, and how balanced color relationships make a design feel right. Read on.
- Neutrals Understanding Neutral Colors Neutral colors explained: warm, cool and balanced grays, beiges and muted tones, plus how to build a neutral color palette for rooms, brands and UI.
- Mixing Additive vs Subtractive Color Additive vs subtractive color explained: how RGB light adds up to white, how CMYK ink subtracts toward black, and why screens and print differ. Read on.
- Value What Is Color Value and Why Does It Matter? Color value is how light or dark a color is. Learn why value drives contrast, readability and depth in design and art, and how to check it. Read the guide.
- Palettes What Is a Color Palette? What is a color palette? Learn the main palette types, how many colors to use and how to build one for your brand or website. Then try our palette tools.
- Color Wheel Primary, Secondary, and Tertiary Colors Explained Primary, secondary and tertiary colors explained across RYB, RGB and CMYK, with how each one is mixed on the color wheel. Learn the basics in 5 minutes.
- Tints & Shades Tints, Shades, and Tones Tint, shade and tone explained: see how adding white, black or gray changes a base color, and how to use each to build richer palettes. Read the quick guide.
- Pantone What Are Pantone Colors? Learn what Pantone colors are, how the Pantone Matching System and color codes work, and how Pantone compares to CMYK, RGB and HEX for print. Read on.
- Warm & Cool What Is Color Temperature? Color temperature explained: how Kelvin is measured, warm vs cool light and colors, and how temperature affects lighting, design and photos. Read the guide.
- HSL What are HSL colors? HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
- RGB What are RGB colors? RGB color explained: how red, green and blue - 255 values make every color on screen, how to read an RGB color code, RGB vs HEX, and RGBA. Learn it fast.
- HEX What are HEX Colors? Hex colors explained: how hex color codes like #FF5733 work, how #RRGGBB maps to RGB, what shorthand hex means and how to convert hex to RGB. Read on.