解説
以前、RGBを紹介しましたが、色の表現方法は他にもいろいろあります。その中で、パソコンを使っていてよく出てくるのは、HSVとCMYKです。
HSVは、色相(Hue)、彩度(Saturation)、明度(Value)の略です。この色の表現方法は、人間にとって直感的で、画像の色を変える場合に、よく利用されます。
RGBとHSVは、計算式に従って機械的に変換可能なため、プログラム内でも、よく相互変換されます。
CMYKは、シアン(Cyan 水色)、マゼンタ(Magenta 赤紫色)、イエロー(Yellow 黄色)、キー・プレート(Key Plate 黒色)の略です。こちらは印刷でよく用いられます。
RGBのように、発光体の色の合成ではなく、インクなどの反射光による色の合成なので、若干くすんで色あせたような感じになります。そしてRGBとHSVのように、機械的に相互変換することはできません。変換すると色が変わります。
他にも色を表現する方法は多数ありますが、パソコンでよく使うこの2つを覚えておくとよいと思います。
サンプル
HSVを使用したコードを、JavaScriptで簡単に書いてみます。
<html> <head> <title>「HSV」のサンプル</title> <!-- https://github.com/bgrins/TinyColor --> <script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"> </script> </head> <body> <pre><script type="text/javascript"> // 元の色 document.writeln("元の色"); var r = 200, g = 100, b = 50; out(r, g, b); document.writeln(""); // 色相を +30 ずつ document.writeln("色相を +30 ずつ"); for (var i = 0; i <= 360; i += 30) { var hsv = tinycolor({r: r, g: g, b: b}).toHsv(); hsv.h = (hsv.h + i) % 360; var rgb = tinycolor(hsv).toRgb(); out(rgb.r, rgb.g, rgb.b); } document.writeln(""); // 彩度を 1/n ずつ document.writeln("彩度を 1/n ずつ"); for (var i = 1; i < 6; i ++) { var hsv = tinycolor({r: r, g: g, b: b}).toHsv(); hsv.s /= i; var rgb = tinycolor(hsv).toRgb(); out(rgb.r, rgb.g, rgb.b); } document.writeln(""); // 明度を 1-0.2*n 倍ずつ document.writeln("明度を 1-0.2*n 倍ずつ"); for (var i = 1; i < 6; i ++) { var hsv = tinycolor({r: r, g: g, b: b}).toHsv(); hsv.v *= 1 - 0.2 * i; var rgb = tinycolor(hsv).toRgb(); out(rgb.r, rgb.g, rgb.b); } // 出力関数 function out(r, g, b) { var col = "rgb(" + r + "," + g + "," + b + ")"; var style = "color: " + col; document.writeln( '<span style="' + style + '">■' + col+ '</span>' ); } </script></pre> </body> </html>