HSL Colors

Lesson in the CSS Roadmap · Stage 12: Padding

Last updated 14 September 2026

What is HSL Colors?

HSL (Hue, Saturation, Lightness) is a way to define colors in CSS using three components: Hue, which represents the color type on a color wheel (0-360 degrees); Saturation, which indicates the intensity of the color (0-100%); and Lightness, which determines how bright or dark the color is (0-100%). This model offers a more intuitive way to adjust colors compared to RGB, allowing developers to easily create variations of a color by modifying its hue, saturation, or lightness values.

Study this in the interactive course See the whole CSS roadmap

Free resources to learn HSL Colors

Articlehsl function
ArticleCSS HSL Colors
VideoHow to Create RELATIVE Colors with hsl(from...) CSS Tutorial

HSL Colors: common questions

Can I learn HSL Colors in Hindi?

This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain HSL Colors in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.

Is this HSL Colors tutorial for beginners?

It is lesson 59 of 104 in the free CSS roadmap, in stage 12, Padding. If you are new to CSS, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.