よろしくお願いします.
残念ながらLab色空間との対比をしているサイトは見つかりませんでした。
以下、Webカラーの色見本です。
色見本のページです。Webセーフカラーの他、CSS3の拡張色等が掲載されています。
http://www.tohoho-web.com/css/value/color.htm
マウスクリックで色を選べるサイトです。
http://html-color-codes.info/japanese/
Web色見本。原色のほか、和色、洋色等の色見本があります。
http://www.colordic.org/
以上、ご参考になれば幸いです。
「原色大辞典」というサイトがあります。
http://www.colordic.org/
色のタイルの上に、タブチックなリンクがあり、和色大辞典とか、洋色大辞典といった色の一覧もあります。
それぞれの色のタイルをクリックすると、詳細ページに飛んで、HSB や Lab などの値が確認できます。
例えば、「黄金色」 とか。
コメント(6件)
Photoshopのカラーライブラリに入ってるパントンとかDICの一覧みたいなのがいい!みたいな
拘りみたいなものがもしあるんだったら、教えていただけたら、もしかしたら回答するかもしれません。
CSS3の138色でいいんだったら、その一覧にCIELab値を載せるのは、そんなに手間がかからずに作れそうかなーとは思います。
AdobeRGBの色をちゃんと出すページを作るなら、
カラープロファイルを埋め込んだ画像を使わないといけないのかな…
http://w3.kcua.ac.jp/~fujiwara/infosci/colorspace/colorspace3.html
を参考にCIELab値からRGBの値を計算するJavaScriptの関数を作ってみました。
書き殴って汚いコードだし、内容をあまり理解していないので間違ってるかもしれません。
function lab2rgb(lab_l, lab_a, lab_b) {
var xn = 0.9642, yn = 1.0, zn = 0.8249;
var fy = (lab_l + 16) / 116;
var fx = fy + (lab_a / 500);
var fz = fy - (lab_b / 200);
var y50 = (29 * fy > 6) ? (fy * fy * fy * yn) : ((27 / 24389) * (116 * fy - 16) * yn);
var x50 = (29 * fx > 6) ? (fx * fx * fx * xn) : ((27 / 24389) * (116 * fx - 16) * xn);
var z50 = (29 * fz > 6) ? (fz * fz * fz * zn) : ((27 / 24389) * (116 * fz - 16) * zn);
var srgb_r = 3.134187 * x50 - 1.617209 * y50 - 0.490694 * z50;
var srgb_g = -0.978749 * x50 + 1.916130 * y50 + 0.033433 * z50;
var srgb_b = 0.071964 * x50 - 0.228994 * y50 + 1.405754 * z50;
var srgb_R = (srgb_r > 0.0031308) ? (1.055 * Math.pow(srgb_r, (1 / 2.4)) - 0.055) * 255
: 12.92 * srgb_r * 255;
var srgb_G = (srgb_g > 0.0031308) ? (1.055 * Math.pow(srgb_g, (1 / 2.4)) - 0.055) * 255
: 12.92 * srgb_g * 255;
var srgb_B = (srgb_b > 0.0031308) ? (1.055 * Math.pow(srgb_b, (1 / 2.4)) - 0.055) * 255
: 12.92 * srgb_b * 255;
srgb_R = Math.round(srgb_R);
srgb_G = Math.round(srgb_G);
srgb_B = Math.round(srgb_B);
var arr_srgb;
if (srgb_R < 0 || 255 < srgb_R || srgb_G < 0 || 255 < srgb_G || srgb_B < 0 || 255 < srgb_B) {
arr_srgb = false;
} else {
arr_srgb = [srgb_R, srgb_G, srgb_B];
}
var adobe_r = 1.962517 * x50 - 0.610651 * y50 - 0.341384 * z50;
var adobe_g = -0.978749 * x50 + 1.916130 * y50 + 0.033433 * z50;
var adobe_b = 0.028715 * x50 - 0.140696 * y50 + 1.349266 * z50;
var adobe_R = (adobe_r > 0.00174) ? Math.pow(adobe_r, (1 / 2.2)) * 255
: 32 * adobe_r * 255;
var adobe_G = (adobe_g > 0.00174) ? Math.pow(adobe_g, (1 / 2.2)) * 255
: 32 * adobe_g * 255;
var adobe_B = (adobe_b > 0.00174) ? Math.pow(adobe_b, (1 / 2.2)) * 255
: 32 * adobe_b * 255;
adobe_R = Math.round(adobe_R);
adobe_G = Math.round(adobe_G);
adobe_B = Math.round(adobe_B);
var arr_adobe;
if (adobe_R < 0 || 255 < adobe_R || adobe_G < 0 || 255 < adobe_G || adobe_B < 0 || 255 < adobe_B) {
arr_adobe = false;
} else {
arr_adobe = [adobe_R, adobe_G, adobe_B];
}
return [arr_srgb, arr_adobe];
}
試しにこういうのを作ってみました。
http://fiddle.jshell.net/jislotz/c1o5hv3a/show/
テキスト表示される数字はAdobeRGBのものですが、やはり発色はその数字のsRGBの色になってしまいます。
(CSSに頼っているので。)
http://fiddle.jshell.net/c1o5hv3a/1/show/
しかしPhotoshopに数字を入れて確かめるのでしたら、
カラーピッカーのプラグインを探して、もしちょうどよいものが見つかれば、
そっちを導入した方が便利そうですね。
Coolorusというものが凄そうですが
http://3dnchu.com/archives/coolorus-2-0-for-photoshop/