Skip to content

Instantly share code, notes, and snippets.

@ckazu

ckazu/hsl_example2.html

Created April 6, 2017 03:15
Show Gist options
  • Save ckazu/006626fa04167eafe685e53a3f133dab to your computer and use it in GitHub Desktop.
Save ckazu/006626fa04167eafe685e53a3f133dab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hsl_example2.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::after { content: " "attr(style); }
</style>
<body>
<div class="row">
<h2>パステルカラーでいろんな色を使いたい！</h2>
<p>彩度 80%, 輝度 80% 固定するだけ</p>
<div class="rect" style="background: hsl(0, 80%, 80%);"></div>
<div class="rect" style="background: hsl(30, 80%, 80%);"></div>
<div class="rect" style="background: hsl(60, 80%, 80%);"></div>
<div class="rect" style="background: hsl(90, 80%, 80%);"></div>
<div class="rect" style="background: hsl(120, 80%, 80%);"></div>
<div class="rect" style="background: hsl(180, 80%, 80%);"></div>
<div class="rect" style="background: hsl(240, 80%, 80%);"></div>
<div class="rect" style="background: hsl(270, 80%, 80%);"></div>
<div class="rect" style="background: hsl(300, 80%, 80%);"></div>
<div class="rect" style="background: hsl(0, 0%, 80%);"></div>
</div>
<div class="row">
<h2>色の組み合わせを作るのも簡単</h2>
<h3>赤ベースのビビッドなやつ</h3>
<div class="rect" style="background: hsl(340, 100%, 50%);"></div>
<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(200, 100%, 50%);"></div>
<div class="rect" style="background: hsl( 65, 100%, 50%);"></div>
<h2>彩度, 輝度を決めて、色相を選ぶ。</h2>
<a href="http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html" target="_BLANK">統一感の感じられる色の選び方にはルールがある</a>
<h3>トライアド</h3>
<div class="rect" style="background: hsl( 60, 70%, 70%);"></div>
<div class="rect" style="background: hsl(180, 70%, 70%);"></div>
<div class="rect" style="background: hsl(300, 70%, 70%);"></div>
<h3>スプリットコンプリメンタリー</h3>
<div class="rect" style="background: hsl( 60, 50%, 50%);"></div>
<div class="rect" style="background: hsl(120, 50%, 50%);"></div>
<div class="rect" style="background: hsl(270, 50%, 50%);"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment