WEBマスターの手帳 > Webサイト作成 > 色の豆知識「RGB」と「CMYK」ってなにが違うの?

2017年4月12日

色の豆知識「RGB」と「CMYK」ってなにが違うの?

色の豆知識「RGB」と「CMYK」ってなにが違うの?

普段、バナー画像を作ったり、Webサイトの素材を作ったりするときに、色で「RGB」や「CMYK」といった表示を目にすることがありますよね。またはCSSで「#CCCCCC」といった色指定をしていることと思います。

こういった表示や区別がどういうものなのか、違いは認識されていますか?よくわかってないなという方もいるかと思うので「RGB」「CMYK」「Webカラー」について紹介したいと思います。



RGB

RGB

RGBは次の3色を元にして色を表現します。

  • R(レッド:赤)
  • G(グリーン:緑)
  • B(ブルー:青)

赤、緑、青。いわゆる「光の3原色」です。Photoshopだと↓の表示ですね。

RGB_photoshop

PCやTVの液晶画面では、RGBによって色を作っていますね。

ちなみにRGBカラーモードを使って作成した画像を、PhotoshopのCMYKカラーモードに変更すると↓のように色合いが変わってしまいます(画像の真ん中にあるバーを左右にスライドさせてみて下さい)。

なので、RGBカラーモードで作成した画像はRGBカラーモードで、CMYKカラーモードで作成した画像はCMYKカラーモードで加工編集をする必要があります。

Photoshopのカラーモード変更

#ffffffはウェブカラー(16進数)

Web担当者の方であれば「#ffffff」など「#」から始まる色の表示を見たことがありますよね。これはウェブカラー(Webカラー)と呼ばれるものです。Photoshopだと↓の表示ですね。

webcolor_photoshop

「ff」がもっとも明るい色で「00」はもっとも暗い色になります。そのため#ffffffは「白」となり、#000000は「黒」となります。

このウェブカラーはRGBをもとにしており、左から2文字が「赤」、次の2文字が「緑」、最後の2文字が「青」を示しています。

Ff00cc

CMYK

Cmyk

CMYKは次の4色を元にして色を表現します。

  • C(Cyan:シアン)
  • M(Magenta:マゼンタ)
  • Y(Yellow:イエロー)
  • K(Key plate:キープレート、黒)

オフィスでも自宅でも「プリンター」を使ったことがある人なら、CMYKに馴染みがあると思います。

CMYKは紙媒体の印刷で使われます。名刺やチラシなどを発注したことがある方はおわかりですよね。Photoshopだと↓の表示ですね。

cmyk_photoshop

Webセーフカラー

Webには「Webセーフカラー」と呼ばれるものがあります。

これはPCの環境に影響されず(モニターやブラウザによって表示される色が異ならない)に、同じ色が表示されるようにと考えられたものです。

Webセーフカラーは#003366や#006699のように、赤、緑、青で同じ数字2桁(00、33、66、99、CC、FFのみで構成される)を使って指定されます。(全216色)

古いPCのモニターなどでは、表現できる色に限りがありましたが、今はPCも含めてモニターの性能が良くなっているので、絶対にWebセーフカラーを使わなければダメということはないでしょう。

色もいろいろあって面白い

WebデザイナーやWebサイト製作をしている人にとっては、一般常識かと思いますが、Web担当者のなかには、よくわからないけど使っているという人もいるでしょう。知らなくても業務はこなせますしね。

そうはいっても、こういう知識を知っていると、ちょっとした時に役立つこともあると思います。なにより、色々あるんだなーと面白いですよね。

今後もWeb担当者としての豆知識を紹介していこうと思います!

関連用語: ,

この記事をシェアして頂けると嬉しいです


【オンライン講座】会社の売り上げに貢献するSNS活用 基礎講座

会社の売り上げに貢献するSNS活用 基礎講座

企業が集客や売り上げUPに役立つためのFacebook、Twitter、Instagram、YouTube、企業ブログなどSNS(ソーシャルメディア)を活用するために必要や知識や理解を徹底解説!

企業ブログ(オウンドメディア)の重点解説も付いているので、SNS活用の初心者だけでなく、ビジネスでブログを活用したい!という方にもオススメの講座です!

WEBマスターの手帳をフォローして最新情報をゲットしよう!

あなたにオススメする記事

この記事を書いた人

遠藤 聡

中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。
無料のメール相談も受け付けております。詳細は無料メール相談ページをご覧ください。

コメント

最新記事一覧

カテゴリー

ピックアップ記事

寄稿記事

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事