2014/10/06現在のこのウェブサイトのカラースキーム。

カラースキームはPhotoshopのスウォッチで管理する事がほとんど。多くのツールで対応されている業界標準というだけの理由で、特にこの形式そのものがすごく便利というわけじゃない。とりあえずどう表示させても潰れることがまずないSVGで作ってみたけど、あまり意味なさそう。

rect要素の幅・高さ・水平位置・垂直位置の全てで%を使って自在に拡大縮小できるようにした上で、shape-renderingプロパティーでcrispEdgesを指定することで境界のシャープさを維持させ、色が潰れないように。

<svg>
  <defs>
    <style><![CDATA[
      rect {
        shape-rendering: crispEdges;
      }
    ]]></style>
  </defs>
  <rect style="fill:#3C3330" width="20%" height="12.5%"  x="0%"  y="0%"/>
  ...
</svg>

簡単なHTMLにインライン・スタイルで表を作って、開発者ツールで開くとかのが良さそうな気がしてきた。