Tbpgr Blog

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

デザイン | コンプリメンタリーカラースキーム

デザイン

概要

コンプリメンタリーカラースキーム

詳細

コンプリメンタリーカラースキームとは主色相を決め、その補色となる
色相でレイアウトを組み合わせるレイアウト手法。
コンプリメンタリー＝complementary＝補足的な、の意。

補色＝＞色彩環で向かいに位置する色。
この組み合わせはちらつきを生む場合があるため、グレー等の無色系の色を
間に取り入れることでちらつきを中和出来ます。

css3

css3ではhslで色相を指定出来るため、カラースキームの指定がわかりやすいです。
ちょうど、180度ずれるように指定します。

サンプル

<!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%);
  }
  tr.even td {
    background-color:hsl(270,50%,75%);
  }

  tr.odd td {
    background-color:hsl(270,75%,90%);
  }
  </style>
</head>
<body style="background-color:hsl(270,25%,270%);">
  <div style="background-color:hsl(270,50%,75%);"><h1>Title</h1></div>
  <div style="background-color:hsl(270,75%,75%);"><h2>Summary</h2></div>
  <table>
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
    </tr>
    <tr class="odd">
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
      <td>column4</td>
    </tr>
    <tr class="even">
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
      <td>column4</td>
    </tr>
    <tr class="odd">
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
      <td>column4</td>
    </tr>
    <tr class="even">
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
      <td>column4</td>
    </tr>
  </table>
</body>
</html>

結果画像