CSS Color Keywords

暗い煤けた緑もDarkOliveGreenで一発！

CSSでは色の値として#RRGGBBやrgb(r, g, b)等の他にキーワードでも指定できる。CSS3では大幅に拡充され、140種類のキーワードのサポートが明記された。今まであまり使ったことがなかった上に、英語力の欠如からDarkOrangeやLavenderとかならまだしもBlanchedAlmondとか言われてもどんな色か想像すらできないので、一覧してクリックで背景色としてプレビューできる簡単なツール、CSS Color Keywordsを作った。DarkOliveGreenとかRGBで考えるとなかなか大変だけどキーワードなら簡単！

ページを開くと色のキーワードを背景色としたブロックが並ぶ。最初のbodyの背景色はランダムに決定されるが、その後はそれぞれの色のブロックをクリックするとその色が背景色になり、プレビュー出来る。

見出しや色のキーワードのフォントはYanone Kaffeesatz。日本語のサイトだとちょっと使いにくいフォントだけど、こういうページでは結構綺麗に見える気がする。

色の明るさを調べる

色の明るさの調査にはTechniques For Accessibility Evaluation And Repair Toolsに掲載されているアルゴリズムをいつも使っている。0-255で明るさが返ってくるので、127.5を境界にして明るい色と暗い色に分けた。それに応じてブロックの影や枠線、文字色などを調節している。

function calculateBrightness (color) {
  var c = [];

  if (color.match(/^#/)) {
    c = color.match(/#(.{2})(.{2})(.{2})/);
    color = "rgb(" + parseInt(c[1], 16) + ", " + parseInt(c[2], 16) + ", " + parseInt(c[3], 16) + ")";
  }

  c = color.match(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
  var b = ((c[1] * 299) + (c[2] * 587) + (c[3] * 114)) / 1000;

  return b;
}

Operaが#RRGGBBで計算済みスタイルの色を返すようなので、アドホックにその対策だけちょっとした。

色の並び順をランダムにした方が面白いかもしれない。もうちょっといじってみよう。