Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

デザイン | HSL

デザイン

概要

HSL

詳細

HSLとは色相（Hue）、彩度（Saturation）、輝度（Lightness）からなる色空間。

種別 内容
色相 色の種類。0-360度で表す。0〜100%の範囲に平準化されるケースもある。
彩度 色の鮮やかさ。0〜100%の範囲
輝度 色の明るさ。0〜100%の範囲。

CSS3サンプル

サンプル作成用のRubyスクリプト
# encoding: utf-8
require "erb"

(0..4).each do |h_cnt|
  h = 90 * h_cnt
  (0..4).each do |s_cnt|
    s = 25 * s_cnt
    (0..4).each do |l_cnt|
      l = 25 * l_cnt
      template = "<span style=\"background-color:hsl(<%= h%>,<%= s%>%,<%= l%>%);\">hsl(<%= h%>,<%= s%>%,<%= l%>%)</span>"
      erb = ERB.new(template)
      ret = erb.result(binding)
      puts ret
    end
    puts "<br />"
  end
  puts "<br />"
end
サンプルhtml＋CSS3
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span {
    border-style: solid;
  }
  </style>
</head>
<body>
  <div id="contents">
    <span style="background-color:hsl(0,0%,0%);">hsl(0,0%,0%)</span>
    <span style="background-color:hsl(0,0%,25%);">hsl(0,0%,25%)</span>
    <span style="background-color:hsl(0,0%,50%);">hsl(0,0%,50%)</span>
    <span style="background-color:hsl(0,0%,75%);">hsl(0,0%,75%)</span>
    <span style="background-color:hsl(0,0%,100%);">hsl(0,0%,100%)</span>
    <br />
    <span style="background-color:hsl(0,25%,0%);">hsl(0,25%,0%)</span>
    <span style="background-color:hsl(0,25%,25%);">hsl(0,25%,25%)</span>
    <span style="background-color:hsl(0,25%,50%);">hsl(0,25%,50%)</span>
    <span style="background-color:hsl(0,25%,75%);">hsl(0,25%,75%)</span>
    <span style="background-color:hsl(0,25%,100%);">hsl(0,25%,100%)</span>
    <br />
    <span style="background-color:hsl(0,50%,0%);">hsl(0,50%,0%)</span>
    <span style="background-color:hsl(0,50%,25%);">hsl(0,50%,25%)</span>
    <span style="background-color:hsl(0,50%,50%);">hsl(0,50%,50%)</span>
    <span style="background-color:hsl(0,50%,75%);">hsl(0,50%,75%)</span>
    <span style="background-color:hsl(0,50%,100%);">hsl(0,50%,100%)</span>
    <br />
    <span style="background-color:hsl(0,75%,0%);">hsl(0,75%,0%)</span>
    <span style="background-color:hsl(0,75%,25%);">hsl(0,75%,25%)</span>
    <span style="background-color:hsl(0,75%,50%);">hsl(0,75%,50%)</span>
    <span style="background-color:hsl(0,75%,75%);">hsl(0,75%,75%)</span>
    <span style="background-color:hsl(0,75%,100%);">hsl(0,75%,100%)</span>
    <br />
    <span style="background-color:hsl(0,100%,0%);">hsl(0,100%,0%)</span>
    <span style="background-color:hsl(0,100%,25%);">hsl(0,100%,25%)</span>
    <span style="background-color:hsl(0,100%,50%);">hsl(0,100%,50%)</span>
    <span style="background-color:hsl(0,100%,75%);">hsl(0,100%,75%)</span>
    <span style="background-color:hsl(0,100%,100%);">hsl(0,100%,100%)</span>
    <br />
    <br />
    <span style="background-color:hsl(90,0%,0%);">hsl(90,0%,0%)</span>
    <span style="background-color:hsl(90,0%,25%);">hsl(90,0%,25%)</span>
    <span style="background-color:hsl(90,0%,50%);">hsl(90,0%,50%)</span>
    <span style="background-color:hsl(90,0%,75%);">hsl(90,0%,75%)</span>
    <span style="background-color:hsl(90,0%,100%);">hsl(90,0%,100%)</span>
    <br />
    <span style="background-color:hsl(90,25%,0%);">hsl(90,25%,0%)</span>
    <span style="background-color:hsl(90,25%,25%);">hsl(90,25%,25%)</span>
    <span style="background-color:hsl(90,25%,50%);">hsl(90,25%,50%)</span>
    <span style="background-color:hsl(90,25%,75%);">hsl(90,25%,75%)</span>
    <span style="background-color:hsl(90,25%,100%);">hsl(90,25%,100%)</span>
    <br />
    <span style="background-color:hsl(90,50%,0%);">hsl(90,50%,0%)</span>
    <span style="background-color:hsl(90,50%,25%);">hsl(90,50%,25%)</span>
    <span style="background-color:hsl(90,50%,50%);">hsl(90,50%,50%)</span>
    <span style="background-color:hsl(90,50%,75%);">hsl(90,50%,75%)</span>
    <span style="background-color:hsl(90,50%,100%);">hsl(90,50%,100%)</span>
    <br />
    <span style="background-color:hsl(90,75%,0%);">hsl(90,75%,0%)</span>
    <span style="background-color:hsl(90,75%,25%);">hsl(90,75%,25%)</span>
    <span style="background-color:hsl(90,75%,50%);">hsl(90,75%,50%)</span>
    <span style="background-color:hsl(90,75%,75%);">hsl(90,75%,75%)</span>
    <span style="background-color:hsl(90,75%,100%);">hsl(90,75%,100%)</span>
    <br />
    <span style="background-color:hsl(90,100%,0%);">hsl(90,100%,0%)</span>
    <span style="background-color:hsl(90,100%,25%);">hsl(90,100%,25%)</span>
    <span style="background-color:hsl(90,100%,50%);">hsl(90,100%,50%)</span>
    <span style="background-color:hsl(90,100%,75%);">hsl(90,100%,75%)</span>
    <span style="background-color:hsl(90,100%,100%);">hsl(90,100%,100%)</span>
    <br />
    <br />
    <span style="background-color:hsl(180,0%,0%);">hsl(180,0%,0%)</span>
    <span style="background-color:hsl(180,0%,25%);">hsl(180,0%,25%)</span>
    <span style="background-color:hsl(180,0%,50%);">hsl(180,0%,50%)</span>
    <span style="background-color:hsl(180,0%,75%);">hsl(180,0%,75%)</span>
    <span style="background-color:hsl(180,0%,100%);">hsl(180,0%,100%)</span>
    <br />
    <span style="background-color:hsl(180,25%,0%);">hsl(180,25%,0%)</span>
    <span style="background-color:hsl(180,25%,25%);">hsl(180,25%,25%)</span>
    <span style="background-color:hsl(180,25%,50%);">hsl(180,25%,50%)</span>
    <span style="background-color:hsl(180,25%,75%);">hsl(180,25%,75%)</span>
    <span style="background-color:hsl(180,25%,100%);">hsl(180,25%,100%)</span>
    <br />
    <span style="background-color:hsl(180,50%,0%);">hsl(180,50%,0%)</span>
    <span style="background-color:hsl(180,50%,25%);">hsl(180,50%,25%)</span>
    <span style="background-color:hsl(180,50%,50%);">hsl(180,50%,50%)</span>
    <span style="background-color:hsl(180,50%,75%);">hsl(180,50%,75%)</span>
    <span style="background-color:hsl(180,50%,100%);">hsl(180,50%,100%)</span>
    <br />
    <span style="background-color:hsl(180,75%,0%);">hsl(180,75%,0%)</span>
    <span style="background-color:hsl(180,75%,25%);">hsl(180,75%,25%)</span>
    <span style="background-color:hsl(180,75%,50%);">hsl(180,75%,50%)</span>
    <span style="background-color:hsl(180,75%,75%);">hsl(180,75%,75%)</span>
    <span style="background-color:hsl(180,75%,100%);">hsl(180,75%,100%)</span>
    <br />
    <span style="background-color:hsl(180,100%,0%);">hsl(180,100%,0%)</span>
    <span style="background-color:hsl(180,100%,25%);">hsl(180,100%,25%)</span>
    <span style="background-color:hsl(180,100%,50%);">hsl(180,100%,50%)</span>
    <span style="background-color:hsl(180,100%,75%);">hsl(180,100%,75%)</span>
    <span style="background-color:hsl(180,100%,100%);">hsl(180,100%,100%)</span>
    <br />
    <br />
    <span style="background-color:hsl(270,0%,0%);">hsl(270,0%,0%)</span>
    <span style="background-color:hsl(270,0%,25%);">hsl(270,0%,25%)</span>
    <span style="background-color:hsl(270,0%,50%);">hsl(270,0%,50%)</span>
    <span style="background-color:hsl(270,0%,75%);">hsl(270,0%,75%)</span>
    <span style="background-color:hsl(270,0%,100%);">hsl(270,0%,100%)</span>
    <br />
    <span style="background-color:hsl(270,25%,0%);">hsl(270,25%,0%)</span>
    <span style="background-color:hsl(270,25%,25%);">hsl(270,25%,25%)</span>
    <span style="background-color:hsl(270,25%,50%);">hsl(270,25%,50%)</span>
    <span style="background-color:hsl(270,25%,75%);">hsl(270,25%,75%)</span>
    <span style="background-color:hsl(270,25%,100%);">hsl(270,25%,100%)</span>
    <br />
    <span style="background-color:hsl(270,50%,0%);">hsl(270,50%,0%)</span>
    <span style="background-color:hsl(270,50%,25%);">hsl(270,50%,25%)</span>
    <span style="background-color:hsl(270,50%,50%);">hsl(270,50%,50%)</span>
    <span style="background-color:hsl(270,50%,75%);">hsl(270,50%,75%)</span>
    <span style="background-color:hsl(270,50%,100%);">hsl(270,50%,100%)</span>
    <br />
    <span style="background-color:hsl(270,75%,0%);">hsl(270,75%,0%)</span>
    <span style="background-color:hsl(270,75%,25%);">hsl(270,75%,25%)</span>
    <span style="background-color:hsl(270,75%,50%);">hsl(270,75%,50%)</span>
    <span style="background-color:hsl(270,75%,75%);">hsl(270,75%,75%)</span>
    <span style="background-color:hsl(270,75%,100%);">hsl(270,75%,100%)</span>
    <br />
    <span style="background-color:hsl(270,100%,0%);">hsl(270,100%,0%)</span>
    <span style="background-color:hsl(270,100%,25%);">hsl(270,100%,25%)</span>
    <span style="background-color:hsl(270,100%,50%);">hsl(270,100%,50%)</span>
    <span style="background-color:hsl(270,100%,75%);">hsl(270,100%,75%)</span>
    <span style="background-color:hsl(270,100%,100%);">hsl(270,100%,100%)</span>
    <br />
    <br />
    <span style="background-color:hsl(360,0%,0%);">hsl(360,0%,0%)</span>
    <span style="background-color:hsl(360,0%,25%);">hsl(360,0%,25%)</span>
    <span style="background-color:hsl(360,0%,50%);">hsl(360,0%,50%)</span>
    <span style="background-color:hsl(360,0%,75%);">hsl(360,0%,75%)</span>
    <span style="background-color:hsl(360,0%,100%);">hsl(360,0%,100%)</span>
    <br />
    <span style="background-color:hsl(360,25%,0%);">hsl(360,25%,0%)</span>
    <span style="background-color:hsl(360,25%,25%);">hsl(360,25%,25%)</span>
    <span style="background-color:hsl(360,25%,50%);">hsl(360,25%,50%)</span>
    <span style="background-color:hsl(360,25%,75%);">hsl(360,25%,75%)</span>
    <span style="background-color:hsl(360,25%,100%);">hsl(360,25%,100%)</span>
    <br />
    <span style="background-color:hsl(360,50%,0%);">hsl(360,50%,0%)</span>
    <span style="background-color:hsl(360,50%,25%);">hsl(360,50%,25%)</span>
    <span style="background-color:hsl(360,50%,50%);">hsl(360,50%,50%)</span>
    <span style="background-color:hsl(360,50%,75%);">hsl(360,50%,75%)</span>
    <span style="background-color:hsl(360,50%,100%);">hsl(360,50%,100%)</span>
    <br />
    <span style="background-color:hsl(360,75%,0%);">hsl(360,75%,0%)</span>
    <span style="background-color:hsl(360,75%,25%);">hsl(360,75%,25%)</span>
    <span style="background-color:hsl(360,75%,50%);">hsl(360,75%,50%)</span>
    <span style="background-color:hsl(360,75%,75%);">hsl(360,75%,75%)</span>
    <span style="background-color:hsl(360,75%,100%);">hsl(360,75%,100%)</span>
    <br />
    <span style="background-color:hsl(360,100%,0%);">hsl(360,100%,0%)</span>
    <span style="background-color:hsl(360,100%,25%);">hsl(360,100%,25%)</span>
    <span style="background-color:hsl(360,100%,50%);">hsl(360,100%,50%)</span>
    <span style="background-color:hsl(360,100%,75%);">hsl(360,100%,75%)</span>
    <span style="background-color:hsl(360,100%,100%);">hsl(360,100%,100%)</span>
    <br />
    <br />
  </div>
</body>
</html>
結果画像