概要
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>