Putting it all together, using a CSS stylesheet, you can see how HSL colors are created. The following demonstrates the different HSL colors, with varied hues, saturations and lightnesses:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#p1 {background-color:hsl(0,100%,50%);} #p2 {background-color:hsl(0,100%,75%);} #p3 {background-color:hsl(0,100%,25%);color:white;} #p4 {background-color:hsl(0,60%,70%);} #p5 {background-color:hsl(60,100%,50%);} #p6 {background-color:hsl(60,100%,75%);} #p7 {background-color:hsl(60,100%,25%);color:white;} #p8 {background-color:hsl(60,60%,70%);} #p9 {background-color:hsl(120,100%,50%);} #p10 {background-color:hsl(120,100%,75%);} #p11 {background-color:hsl(120,100%,25%);color:white;} #p12 {background-color:hsl(120,60%,70%);} #p13 {background-color:hsl(180,100%,50%);} #p14 {background-color:hsl(180,100%,75%);} #p15 {background-color:hsl(180,100%,25%);color:white;} #p16 {background-color:hsl(180,60%,70%);} #p17 {background-color:hsl(235,100%,50%);color:white;} #p18 {background-color:hsl(235,100%,75%);} #p19 {background-color:hsl(235,100%,25%);color:white;} #p20 {background-color:hsl(235,60%,70%);} #p21 {background-color:hsl(290,100%,50%);} #p22 {background-color:hsl(290,100%,75%);} #p23 {background-color:hsl(290,100%,25%);color:white;} #p24 {background-color:hsl(290,60%,70%);} #p25 {background-color:hsl(340,100%,50%);} #p26 {background-color:hsl(340,100%,75%);} #p27 {background-color:hsl(340,100%,25%);color:white;} #p28 {background-color:hsl(340,60%,70%);} </style> <body> <p>HSL colors:</p> <p id="p1">Red</p> <p id="p2">Light red</p> <p id="p3">Dark red</p> <p id="p4">Pastel red</p> <p id="p5">Yellow</p> <p id="p6">Light yellow</p> <p id="p7">Dark yellow</p> <p id="p8">Pastel yellow</p> <p id="p9">Green</p> <p id="p10">Light green</p> <p id="p11">Dark green</p> <p id="p12">Pastel green</p> <p id="p13">Skyblue</p> <p id="p14">Light skyblue</p> <p id="p15">Dark skyblue</p> <p id="p16">Pastel skyblue</p> <p id="p17">Blue</p> <p id="p18">Light blue</p> <p id="p19">Dark blue</p> <p id="p20">Pastel blue</p> <p id="p21">Violet</p> <p id="p22">Light violet</p> <p id="p23">Dark Violet</p> <p id="p24">Pastel Violet</p> <p id="p25">Pink</p> <p id="p26">Light pink</p> <p id="p27">Dark pink</p> <p id="p28">Pastel pink</p> </body> |
HSL colors: Red Light red Dark red Pastel red Yellow Light yellow Dark yellow Pastel yellow Green Light green Dark green Pastel green Skyblue Light skyblue Dark skyblue Pastel skyblue Blue Light blue Dark blue Pastel blue Violet Light violet Dark Violet Pastel Violet Pink Light pink Dark pink Pastel pink |
