RGBのカラーチャート(Webセーフカラーだけでなく,それ以外の色も載っている)が見られるサイトを教えて下さい.できればRGBの値の他に,Labの値も載っていると理想です.

よろしくお願いします.

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/09/28 22:43:31
  • 終了:2014/10/05 22:45:05

回答(2件)

id:sasada No.1

sasada回答回数1482ベストアンサー獲得回数1332014/09/29 07:21:49

ポイント50pt

 残念ながらLab色空間との対比をしているサイトは見つかりませんでした。
 以下、Webカラーの色見本です。

色見本のページです。Webセーフカラーの他、CSS3の拡張色等が掲載されています。
http://www.tohoho-web.com/css/value/color.htm

マウスクリックで色を選べるサイトです。
http://html-color-codes.info/japanese/

Web色見本。原色のほか、和色、洋色等の色見本があります。
http://www.colordic.org/

 以上、ご参考になれば幸いです。

id:salon_hiyake

うーん,理想を言うときりがないのですが,AdobeRGBをほぼ網羅したサイトとかはないのでしょうか? 英語でもかまわないので.

id:a-kuma3 No.2

a-kuma3回答回数4363ベストアンサー獲得回数18002014/09/29 16:46:44

ポイント50pt

「原色大辞典」というサイトがあります。
http://www.colordic.org/

色のタイルの上に、タブチックなリンクがあり、和色大辞典とか、洋色大辞典といった色の一覧もあります。

それぞれの色のタイルをクリックすると、詳細ページに飛んで、HSB や Lab などの値が確認できます。
例えば、「黄金色」 とか。

  • id:jislotz
    どういう色のリストがいいのかなーって思って様子を見てたけど、CSS3の138色みたいなのでいいんですか?
    Photoshopのカラーライブラリに入ってるパントンとかDICの一覧みたいなのがいい!みたいな
    拘りみたいなものがもしあるんだったら、教えていただけたら、もしかしたら回答するかもしれません。

    CSS3の138色でいいんだったら、その一覧にCIELab値を載せるのは、そんなに手間がかからずに作れそうかなーとは思います。
  • id:jislotz
    色の指定をCSSに頼っている時点でsRGBになっちゃうので、
    AdobeRGBの色をちゃんと出すページを作るなら、
    カラープロファイルを埋め込んだ画像を使わないといけないのかな…
  • id:jislotz
    http://w3.kcua.ac.jp/~fujiwara/infosci/colorspace/colorspace2.html
    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];
    }
  • id:jislotz
    カラーチャートというよりはカラーピッカーに近い感じになっちゃいましたが、
    試しにこういうのを作ってみました。
    http://fiddle.jshell.net/jislotz/c1o5hv3a/show/
    テキスト表示される数字はAdobeRGBのものですが、やはり発色はその数字のsRGBの色になってしまいます。
    (CSSに頼っているので。)
  • id:salon_hiyake
    ジント兄さん、素晴らしいです。これで、数字だけ参考にして、これをPhotoshopに入れて見ればいいですね。
  • id:jislotz
    少し改良しました。
    http://fiddle.jshell.net/c1o5hv3a/1/show/

    しかしPhotoshopに数字を入れて確かめるのでしたら、
    カラーピッカーのプラグインを探して、もしちょうどよいものが見つかれば、
    そっちを導入した方が便利そうですね。
    Coolorusというものが凄そうですが
    http://3dnchu.com/archives/coolorus-2-0-for-photoshop/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません