DTP→WEB

RGBカラー基礎まとめ/疑問スッキリDTP→Webデザイン違い

DTP・Web両方できるよう、すきま時間にジワジワとやり方を調べています。「WebはRGBを使う」という点について、疑問点をMEMOします!

[DTP・Web違い]RGBはCMYKより発色が良い

RGBは、CMYKより発色の良い色を出せます。

  • RGBは光(虹のイメージ)
  • CMYKはインク(絵の具のイメージ)

また、RGBにしか出せない色、CMYKにしか出せない色もあって、RGB⇔CNYKに変換した時は色がくすみます。色がない時は「似た色」に自動的に変換される為でした。RGBの方が表現できる色の幅が広いので、RGB→CMYKに変換した時はガラッと色が変わってしまいます。

CMYK、sRGB、AdobeRGB、表現できる色の多さ

[色表現できる多さ]CMYK< sRGB< AdobeRGB

RGBにも2種類あって、一般的なモニターで使われているsRGBと、もっと鮮やかなAdobeRGBがあります。

スマホなどで撮影した写真はほとんどsRGBです。プロのカメラマンが撮影するような写真はAdobeRGBの事も多いです。

AdobeRGBで写せるモニタもずいぶんお手頃価格になっていますが、一般的なモニタは「sRGBの90%を表現できます」といった具合。

Photoshopなどでホームページ案を作る時は、一般的なモニタに合わせてsRGBの設定で制作しています。Photoshopの「編集>カラー設定」を見ると、sRGBがデフォルトになっているので、設定はそのままで大丈夫です。

一般的なモニタはsRGBを使っている

Photoshopのデフォルト設定も、sRGBなので問題なし。

CMYKの写真をRGBに変換すると彩度が落ちる。ネガ反転もする?

「CMYKのデータしかない」「切り抜き済写真を、急ぎで使いたい」

ポスターやパンフレット等で使った写真を、ホームページ用でRGBに変換し使うこともあります。CMYKはRGBより再現できる色合いが極端に少ないので、RGBに変換してもくすんだままです。

Web用なら厳密には元データから処理すること。その方がキレイです。

ただ、CMYKの写真を流用しても大きく問題が出るわけではありません。昔の写真データだと変換時にネガ反転する事もあったようですが。CMYK→RGBに変換後は、明るさ等をプラスしてキレイに仕上げます。特に人の顔色は慎重に整えます。

CMYKの写真をRGBに変換できる

出来るだけ元データから処理。CMYKの写真を使うときは、明るさや鮮やかさをプラスしくすみをカバー。

コーダーさんもRGBで色指定するの?

HTMLやCSSでの色指定は、カラーコードが使われます。カラーパレットで確認できる「#FFFFF」という数値で、コンピューター言語としてRGBを16進法で言い換えた物です。

  • コーダー⇒カラーコードで指定(画像だけはRGB)
  • デザイナー⇒PhotoshopやIllustratorでは全てRGBで指定
HTMLやCSSでの色指定はカラーコード

コーダーさんに伝える時は「#FFFFF」で。

以上です!

ううう・・・独学ってむずかしい・・