解説
以前、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>
出力結果
