CANVAS要素を使ってCSS向けの色表現からRGB値を得る

html5 javascript

CSS向けの色表現はいろいろある

  • red
  • ActiveBorder
  • #123
  • #112233
  • rgb(11,22,33)
  • rgb(11%,22%,33%)
  • rgba(11,22,33,0.4)
  • rgba(11%,22%,33%,0.4)
  • hsl(11,22%,33%)
  • hsla(11,22%,33%,0.4)

これからRGBの値を取得したかったので、解析して割り出すコードを書いたりしたけれども、とても面倒くさい。特にHSLからRGBにするところとか。それにActiveBorderみたいなシステム色はたぶん無理。

でも、canvas要素を使うと簡単に取得できることに気づいた。

function getColor(color) {
  var cv = document.createElement('CANVAS');
  var cx = cv.getContext('2d');
  cv.width = cv.height = 1;
  cx.fillStyle = color;
  cx.fillRect(0, 0, 1, 1);
  var d = cx.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2]];
}

単にcanvas要素を作って指定色で描画して、ImageDataを取ってくるだけ。これは便利。

追記

createElement('CANVAS')とCANVASが大文字だとXHTMLでうまく動かなくなるとの指摘を受けたので修正。id:os0xさんありがとうございます。ついでに透明度も返してなかったのも修正。

function getColor(color) {
  var cv = document.createElement('canvas');
  var cx = cv.getContext('2d');
  cv.width = cv.height = 1;
  cx.fillStyle = color;
  cx.fillRect(0, 0, 1, 1);
  var d = cx.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2], d[3]];
}