example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hsl_0_100_10 {
color:hsl(0, 100%, 10%);
}
.hsl_0_100_50 {
color:hsl(0, 100%, 50%);
}
.hsl_0_100_90 {
color:hsl(0, 100%, 90%);
}
.hsl_90_100_10 {
color:hsl(90, 100%, 10%);
}
.hsl_90_100_50 {
color:hsl(90, 100%, 50%);
}
.hsl_90_100_90 {
color:hsl(90, 100%, 90%);
}
.hsl_180_100_10 {
color:hsl(180, 100%, 10%);
}
.hsl_180_100_50 {
color:hsl(180, 100%, 50%);
}
.hsl_180_100_90 {
color:hsl(180, 100%, 90%);
}
.hsl_270_100_10 {
color:hsl(270, 100%, 10%);
}
.hsl_270_100_50 {
color:hsl(270, 100%, 50%);
}
..hsl_270_100_90 {
color:hsl(270, 100%, 90%);
}
</style>
<meta charset="UTF-8">
<title>CSS Color using hsl</title>
</head>
<body>
<p class="hsl_0_100_10">color:hsl(0, 100%, 10%);</p>
<p class="hsl_0_100_50">color:hsl(0, 100%, 50%);</p>
<p class="hsl_0_100_90">color:hsl(0, 100%, 90%);</p>
<p class="hsl_90_100_10">color:hsl(90, 100%, 10%);</p>
<p class="hsl_90_100_50">color:hsl(90, 100%, 50%);</p>
<p class="hsl_90_100_90">color:hsl(90, 100%, 90%);</p>
<p class="hsl_180_100_10">color:hsl(180, 100%, 10%);</p>
<p class="hsl_180_100_50">color:hsl(180, 100%, 50%);</p>
<p class="hsl_180_100_90">color:hsl(180, 100%, 90%);</p>
<p class="hsl_270_100_10">color:hsl(270, 100%, 10%);</p>
<p class="hsl_270_100_50">color:hsl(270, 100%, 50%);</p>
<p class="hsl_270_100_90">color:hsl(270, 100%, 90%);</p>
</body>
</html>
No comments:
Post a Comment