Skip to content

Instantly share code, notes, and snippets.

@ckazu

ckazu/hsl_example01.html

Last active April 6, 2017 02:10
Show Gist options
  • Save ckazu/76776cf4aaa804cd01d4a32c2a571b83 to your computer and use it in GitHub Desktop.
Save ckazu/76776cf4aaa804cd01d4a32c2a571b83 to your computer and use it in GitHub Desktop.
Download ZIP
hsl chart example
Raw
hsl_example01.html
<!DOCTYPE html>
<html>
<style>
.row div {
display: inline-block;
margin-bottom: 6px;
}
.rect {
font-size: 1em; font-family: monospace;
width: 150px;
height: 150px;
display: inline-block;
border: black 1px solid;
}
.rect::before { content: attr(style); }
</style>
<body>
<div class="row">
<h2>色相を 360度変化させる。彩度 100%, 輝度 50%</h2>
<div class="rect" style="background: hsl(0, 100%, 50%);"></div>
<div class="rect" style="background: hsl(30, 100%, 50%);"></div>
<div class="rect" style="background: hsl(60, 100%, 50%);"></div>
<div class="rect" style="background: hsl(90, 100%, 50%);"></div>
<div class="rect" style="background: hsl(120, 100%, 50%);"></div>
<div class="rect" style="background: hsl(150, 100%, 50%);"></div>
<div class="rect" style="background: hsl(180, 100%, 50%);"></div>
<div class="rect" style="background: hsl(210, 100%, 50%);"></div>
<div class="rect" style="background: hsl(240, 100%, 50%);"></div>
<div class="rect" style="background: hsl(270, 100%, 50%);"></div>
<div class="rect" style="background: hsl(300, 100%, 50%);"></div>
<div class="rect" style="background: hsl(330, 100%, 50%);"></div>
<div class="rect" style="background: hsl(360, 100%, 50%);"></div>
<h2>色相を 360度変化させる。彩度 50%, 輝度 50%</h2>
<div class="rect" style="background: hsl(0, 50%, 50%);"></div>
<div class="rect" style="background: hsl(30, 50%, 50%);"></div>
<div class="rect" style="background: hsl(60, 50%, 50%);"></div>
<div class="rect" style="background: hsl(90, 50%, 50%);"></div>
<div class="rect" style="background: hsl(120, 50%, 50%);"></div>
<div class="rect" style="background: hsl(150, 50%, 50%);"></div>
<div class="rect" style="background: hsl(180, 50%, 50%);"></div>
<div class="rect" style="background: hsl(210, 50%, 50%);"></div>
<div class="rect" style="background: hsl(240, 50%, 50%);"></div>
<div class="rect" style="background: hsl(270, 50%, 50%);"></div>
<div class="rect" style="background: hsl(300, 50%, 50%);"></div>
<div class="rect" style="background: hsl(330, 50%, 50%);"></div>
<div class="rect" style="background: hsl(360, 50%, 50%);"></div>
</div>
<hr />
<div class="row">
<h2>彩度を変化させる。輝度 50%</h2>
<div class="rect" style="background: hsl(0, 100%, 50%);"></div>
<div class="rect" style="background: hsl(0, 75% , 50%);"></div>
<div class="rect" style="background: hsl(0, 50% , 50%);"></div>
<div class="rect" style="background: hsl(0, 25% , 50%);"></div>
<div class="rect" style="background: hsl(0, 0% , 50%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(90, 100%, 50%);"></div>
<div class="rect" style="background: hsl(90, 75% , 50%);"></div>
<div class="rect" style="background: hsl(90, 50% , 50%);"></div>
<div class="rect" style="background: hsl(90, 25% , 50%);"></div>
<div class="rect" style="background: hsl(90, 0% , 50%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(180, 100%, 50%);"></div>
<div class="rect" style="background: hsl(180, 75% , 50%);"></div>
<div class="rect" style="background: hsl(180, 50% , 50%);"></div>
<div class="rect" style="background: hsl(180, 25% , 50%);"></div>
<div class="rect" style="background: hsl(180, 0% , 50%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(270, 100%, 50%);"></div>
<div class="rect" style="background: hsl(270, 75% , 50%);"></div>
<div class="rect" style="background: hsl(270, 50% , 50%);"></div>
<div class="rect" style="background: hsl(270, 25% , 50%);"></div>
<div class="rect" style="background: hsl(270, 0% , 50%);"></div>
</div>
<hr />
<div class="row">
<h2>輝度を変化させる。彩度 100%</h2>
<div class="rect" style="background: hsl(0, 100%, 100%);"></div>
<div class="rect" style="background: hsl(0, 100%, 75%);"></div>
<div class="rect" style="background: hsl(0, 100%, 50%);"></div>
<div class="rect" style="background: hsl(0, 100%, 25%);"></div>
<div class="rect" style="background: hsl(0, 100%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(0, 75%, 100%);"></div>
<div class="rect" style="background: hsl(0, 75%, 75%);"></div>
<div class="rect" style="background: hsl(0, 75%, 50%);"></div>
<div class="rect" style="background: hsl(0, 75%, 25%);"></div>
<div class="rect" style="background: hsl(0, 75%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(0, 50%, 100%);"></div>
<div class="rect" style="background: hsl(0, 50%, 75%);"></div>
<div class="rect" style="background: hsl(0, 50%, 50%);"></div>
<div class="rect" style="background: hsl(0, 50%, 25%);"></div>
<div class="rect" style="background: hsl(0, 50%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(0, 25%, 100%);"></div>
<div class="rect" style="background: hsl(0, 25%, 75%);"></div>
<div class="rect" style="background: hsl(0, 25%, 50%);"></div>
<div class="rect" style="background: hsl(0, 25%, 25%);"></div>
<div class="rect" style="background: hsl(0, 25%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(0, 0%, 100%);"></div>
<div class="rect" style="background: hsl(0, 0%, 75%);"></div>
<div class="rect" style="background: hsl(0, 0%, 50%);"></div>
<div class="rect" style="background: hsl(0, 0%, 25%);"></div>
<div class="rect" style="background: hsl(0, 0%, 0%);"></div>
</div>
<hr />
<div class="row">
<div class="rect" style="background: hsl(180, 100%, 100%);"></div>
<div class="rect" style="background: hsl(180, 100%, 75%);"></div>
<div class="rect" style="background: hsl(180, 100%, 50%);"></div>
<div class="rect" style="background: hsl(180, 100%, 25%);"></div>
<div class="rect" style="background: hsl(180, 100%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(180, 75%, 100%);"></div>
<div class="rect" style="background: hsl(180, 75%, 75%);"></div>
<div class="rect" style="background: hsl(180, 75%, 50%);"></div>
<div class="rect" style="background: hsl(180, 75%, 25%);"></div>
<div class="rect" style="background: hsl(180, 75%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(180, 50%, 100%);"></div>
<div class="rect" style="background: hsl(180, 50%, 75%);"></div>
<div class="rect" style="background: hsl(180, 50%, 50%);"></div>
<div class="rect" style="background: hsl(180, 50%, 25%);"></div>
<div class="rect" style="background: hsl(180, 50%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(180, 25%, 100%);"></div>
<div class="rect" style="background: hsl(180, 25%, 75%);"></div>
<div class="rect" style="background: hsl(180, 25%, 50%);"></div>
<div class="rect" style="background: hsl(180, 25%, 25%);"></div>
<div class="rect" style="background: hsl(180, 25%, 0%);"></div>
</div>
<div class="row">
<div class="rect" style="background: hsl(180, 0%, 100%);"></div>
<div class="rect" style="background: hsl(180, 0%, 75%);"></div>
<div class="rect" style="background: hsl(180, 0%, 50%);"></div>
<div class="rect" style="background: hsl(180, 0%, 25%);"></div>
<div class="rect" style="background: hsl(180, 0%, 0%);"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment