CSS has an amazing variety of ways to choose colors for styling your pages – and this is already without hues. You’re probably using one of these ways to define a color in your CSS:
hotpink #ff0099 rgb(255 0 153)
That gives us hexadecimal values like #ff0000 and named colors like aliceblue or rebeccapurple. You might be using the rgb() function (or “functional notation”), which lets you set red, green, and blue values independently.
These common ways to set colors give us a great amount of flexibility through literally millions of colors (256 x 256 x 256). But what if you want variations of a certain color? Maybe you’d like to use aliceblue but a little less vibrant, or a color like #008000 but 50% darker. How can you get a color that’s 10% brighter than rgb(255 0 153)?
The great thing about hues is that you can choose a color and create variations of it using the other properties like saturation (how vibrant a color is), lightness (how light or dark a color is), and chroma (how intense a color is).
Another benefit of hues as angles is that you can find related colors based on where they are in the color wheel (e.g., three colors, each 10 degrees apart) or make a color palette based on related colors. We’ll see exactly how to do this later.