Tbpgr Blog

元エンジニア 人事 tbpgr(てぃーびー) のブログ

デザイン | 暖色・寒色・中性色(Warm Color,Cool Color,Neutral Color)

概要

暖色・寒色・中性色(Warm Color,Cool Color,Neutral Color)

詳細

対象
暖色 赤、オレンジ、黄色
寒色
中性色 緑系、紫系

サンプル

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span {
    border-style: solid;
  }
  th {
     background-color:hsl(90,50%,50%);
  }
  </style>
</head>
<body style="background-color:whitesmoke">
  <div style="background-color:hsl(90,50%,50%);"><h1>Title</h1></div>
  <div style="background-color:hsl(90,50%,50%);"><h2>Summary</h2></div>
  <table width="500px">
    <tr>
      <th>header</th>
    </tr>
    <tr style="background-color:hsl(0,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(15,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(30,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(45,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(60,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(75,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(90,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(105,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(120,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(135,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(150,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(165,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(180,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(195,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(210,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(225,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(240,100%,50%);"><td>寒色</td></tr>
    <tr style="background-color:hsl(255,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(270,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(285,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(300,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(315,100%,50%);"><td>中性色</td></tr>
    <tr style="background-color:hsl(330,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(345,100%,50%);"><td>暖色</td></tr>
    <tr style="background-color:hsl(360,100%,50%);"><td>暖色</td></tr>
  </table>
</body>
</html>

色相htmlテーブル作成作業用RubyScript

# encoding: utf-8
require "pp"

str="<tr style=\"background-color:hsl($h$,100%,50%);\"><td>$v$</td></tr>"

(0..360).step(15) {|color|
  case color
  when 0..60, 330..360
    puts str.gsub("$h$", color.to_s).gsub("$v$", "暖色")
  when 61..130
    puts str.gsub("$h$", color.to_s).gsub("$v$", "中性色")
  when 131..240
    puts str.gsub("$h$", color.to_s).gsub("$v$", "寒色")
  when 241..329
    puts str.gsub("$h$", color.to_s).gsub("$v$", "中性色")
  end
}

結果画像