What Is HSL Hue from 0 to 360 Degrees? Explaining Its Relationship to the Color Wheel

Does a hue value from 0 to 360 degrees in HSL tell you how bright a color is? No. HSL describes a color through Hue (the color family, such as red or blue), Saturation (how vivid it is), and Lightness (how light or dark it is). This article focuses on the hue angle: how to read it on a color wheel and how to adjust it when choosing colors for a website.

Why do 0 degrees and 360 degrees represent the same red?

A color wheel arranges color families around a circle. In HSL, the circle starts with red at 0 degrees, passes through yellow, green, cyan, blue, and magenta, and returns to red at 360 degrees. The angle identifies the position of the color family. A larger number does not mean a lighter color.

In CSS (Cascading Style Sheets, the language used to style webpages), hsl(0 100% 50%) and hsl(360 100% 50%) both produce red ■#FF0000. A full turn returns to the same position; it does not add a new color. CSS also wraps angles outside that turn: 450 degrees is treated like 90 degrees, and -30 degrees like 330 degrees.

Compare three website blues by changing hue in 20-degree steps

Imagine selecting a blue for links and the main action button on an information page. Keep saturation at 65% and lightness at 45%, then change only the hue. This lets you see what the angle itself changes.

• 200°: hsl(200 65% 45%) → a cyan-leaning blue ■#288CBD
• 220°: hsl(220 65% 45%) → a central blue candidate ■#285ABD
• 240°: hsl(240 65% 45%) → a violet-leaning blue ■#2828BD

All three share the same numerical saturation and lightness, yet their appearance and contrast against a background differ. They are alternatives to compare, not necessarily three colors that should appear together on one page.

For a practical page design, try a very pale blue background ■#F3F7FA and dark blue-gray body text ■#202A3D. Choose the 220-degree blue ■#285ABD for links and the main button background. Underline the links so they do not rely on color alone to indicate that they can be opened. Use white button text ■#FFFFFF. The 200-degree blue ■#288CBD is a possible decorative rule next to a heading, rather than a normal-size text color. Assigning these distinct roles keeps the page from turning into a collection of competing blues.

/* Compare hue while keeping saturation and lightness fixed */
.hue-a { background-color: hsl(200 65% 45%); }
.hue-b { background-color: hsl(220 65% 45%); }
.hue-c { background-color: hsl(240 65% 45%); }

Changing only hue does not preserve text contrast

The pale background ■#F3F7FA and dark body text ■#202A3D have a contrast ratio of about 13.35:1. Against that same background ■#F3F7FA, the 220-degree blue text ■#285ABD has a ratio of approximately 5.93:1. The 200-degree blue text ■#288CBD, with the same saturation and lightness values, reaches only about 3.50:1. Under Web Content Accessibility Guidelines (WCAG) 2.2, normal-sized text generally needs at least 4.5:1: the 220-degree blue pair meets this threshold, but the 200-degree blue pair does not. White button text ■#FFFFFF on the chosen blue background ■#285ABD has a ratio of about 6.39:1. Always recheck contrast against the actual neighboring background after changing the hue.

At 0% saturation, changing hue still produces gray. At 0% or 100% lightness, the result is black or white, respectively, regardless of the hue angle. To make a useful visual comparison, start with meaningful saturation and lightness values, adjust hue in small steps, and then fine-tune brightness where needed.

HueRoll displays the HSL values of your selected color, but it does not accept direct HSL-number input. To explore a candidate, select the corresponding six-digit HEX (hexadecimal color code), then compare the displayed HSL values.