カラースキームは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にインライン・スタイルで表を作って、開発者ツールで開くとかのが良さそうな気がしてきた。