カラーコードの読み方と色がズレない使い方（RGB・CMYK・HEX）

「#4A90D9」みたいな文字列を見て、意味が分からないまま貼りつけていませんか？

カラーコードは色を数字で書いたものです。読み方さえ分かれば、コピーしなくても「この色は青寄りで少し暗い」と当てられるようになります。
このレッスンでは、HEX・RGB・CMYKの3つの書き方と、グレースケールやインデックスカラーの意味、そして色がズレる指定ミスの防ぎ方まで扱います。手元で色を採取して変換するところまでやりますよ。

カラーコードは色を数字で指定する書き方

カラーコードは、色を数字と記号で表したものです。「青」と言葉で伝えると人ごとに違う青を思い浮かべますが、「#4A90D9」なら誰の画面でも同じ色が出ます。

書き方は用途で分かれます。よく使うのは次の3つです。

書き方	使う場所	表記の例
HEX（16進数）	Web・アプリ・デザインツール	#4A90D9
RGB	画面用。Photoshopなどの数値入力	R74 G144 B217
CMYK	印刷物	C70 M35 Y0 K0

HEXとRGBは中身が同じです。書き方が違うだけで、どちらも画面の色を表します。CMYKだけは別物で、インクの量を表します。ここを混同すると印刷で事故が起きます。

RGBは光の色、CMYKはインクの色

RGBは赤（Red）・緑（Green）・青（Blue）の3色です。パソコンやスマホの画面は、この3色の光を混ぜて色を出します。3つとも最大にすると白、3つとも0にすると黒です。光なので、重ねるほど明るくなります。

CMYKはシアン・マゼンタ・イエロー・ブラックの4色のインクです。紙に刷るときはこの4色を掛け合わせます。インクを重ねるほど暗くなるので、RGBとは逆の動きをします。各色0〜100%で指定します。

この違いが、印刷でいちばん多いトラブルの原因です。画面で鮮やかに見えた色は、印刷するとくすみます。RGBで出せる色の範囲のほうが広いからです。特に鮮やかな青・緑・オレンジは、印刷すると別の色に見えるほど落ちます。
コンビニのコピー機で資料を刷ったとき、画面より色が沈んで見えた経験があるはずです。あれと同じことが起きています。

防ぎ方はひとつ。印刷物は最初からCMYKで作り始めます。RGBで作って最後に変換すると、想定と違う色になってから直すことになります。名刺やチラシを作るときは、新規作成の時点でカラーモードをCMYKにしてください💡

HEXカラーコードの読み方

HEXカラーコードは「#」に続く6桁です。この6桁は2桁ずつ3つに分かれていて、順に赤・緑・青の強さを表します。

各2桁は16進数で、いちばん弱いのが00、いちばん強いのがffです。数字が9まで来たら、そのあとはa・b・c・d・e・fと続きます。fが最大なので、fに近いほど強いと覚えれば十分です。

この仕組みが分かると、コードを見ただけで色を当てられます。

コード	読み方	色
#ffffff	3つとも最大	白
#000000	3つとも0	黒
#ff0000	赤だけ最大	純粋な赤
#4A90D9	青がいちばん強く赤が弱い	やや明るい青
#888888	3つとも同じ値	グレー

覚えておくと便利な見分け方が2つあります。
3つの値が同じならグレー。#333333も#ccccccもグレーで、値が大きいほど明るくなります。
3つの値が全体に大きければ明るい色、小さければ暗い色。#e8f1ecは全部が大きいので淡い色、#2b3a55は全部が小さいので濃い色です。

3桁の書き方も見かけます。#fffは#ffffffの省略形で、各桁を2回繰り返した形です。#39fなら#3399ffと同じ色になります。同じ文字が並ぶときだけ使える書き方です。

8桁のときは、最後の2桁が透明度です。#4A90D980なら、#4A90D9を約50%の透明度で表示します。00で完全に透明、ffで完全に不透明です。

HEXとRGBを手で変換する

ツールを使えば一瞬ですが、一度手で計算すると仕組みが頭に入ります。やることは掛け算と足し算だけです。

まず、a〜fを数に置き換えます。a=10／b=11／c=12／d=13／e=14／f=15。
次に、2桁を「左の桁×16＋右の桁」で計算します。

#4A90D9はRGBでR74 G144 B217です。最大のffは15×16＋15＝255なので、RGBの各値は0〜255の範囲に収まります。

逆向きも同じ考え方です。RGBの値を16で割って、商が左の桁、余りが右の桁。217なら217÷16＝13あまり9で、13＝d、あまり9でd9になります。

グレースケールとインデックスカラー

もう2つ、書き出しの場面で出てくる言葉があります。

グレースケール

グレースケールは、色みを持たず明るさだけで色を表す方式です。白から黒までの段階だけで画像を作ります。新聞の写真がこれです。色がなくても、明るさの差だけで何が写っているか分かります。
使う場面は、モノクロ印刷の原稿や、色を抜いて明暗のバランスを確認したいとき。作ったバナーを一度グレースケールにしてみると、コントラスト（明るさの差）が足りているかすぐ分かります。文字が背景に沈んで読めなくなったら、明るさの差が足りていません。

インデックスカラー

インデックスカラーは、使う色をあらかじめ一覧に登録して、その番号で色を持たせる方式です。登録できるのは最大256色までです。
色数が少ないので、データが軽くなります。アイコンや単色のイラスト、GIF画像で使います。
写真には向きません。写真は数万色を使うので、256色に減らすと空のグラデーションが縞になります。写真はJPEGなど、色数を減らさない形式で書き出してください。

ミニ実践：好きなサイトから色を採取する

10分の課題です。無料のツールだけで進められます。

検証画面の使い方が難しければ、画面を撮影してCanvaに読み込み、スポイト機能で色を拾う方法でも構いません。目的はコードを読む練習なので、採取の手段はどちらでも大丈夫です◎

3〜4サイトぶんやると、好きな色の傾向が見えてきます。「自分は青緑と暗い紺をよく選ぶ」と分かれば、次からトンマナを決めるのが速くなります。

指定ミスを防ぐ3つの習慣

色は必ずコードで伝える

「もう少し濃い青で」というやり取りは、往復が増えるだけです。#2B5C8Aと書けば一度で終わります。修正依頼を出すときも受けるときも、コードで話すと早いです。
Googleが公開しているMaterial Designでも、使う色はすべてコードで並べてあります。名前ではなくコードで決めるのが基本です。

用途を決めてから新規作成する

Web用ならRGB、印刷用ならCMYK。ファイルを作る最初の画面で決めます。作り終わってから変換すると、色を選び直すことになります。

黒はK100、白は#ffffffで統一する

印刷の黒は、4色すべてを100%にすると乾かずにインクが移ります。文字の黒はK100（黒インクだけを100%、他は0%）にしてください。
画面の白も、#fefefeと#ffffffが混ざると、並べたときに片方が汚れて見えます。白と黒こそコードを固定します。

よくある質問

HEXとRGBはどちらを使えばいいですか？

中身は同じなので、場面で使い分けます。
Webサイトやアプリの指定、デザイナー同士のやり取りではHEXが主流です。6桁1つで済むので、伝えるのが速いからです。
RGBは、色を少しずつ調整したいときに便利です。「赤を10だけ足す」のような操作は、0〜255の数字のほうが感覚をつかみやすくなります。

画面で見た色と印刷した色が違います

RGBとCMYKで出せる色の範囲が違うのが原因です。画面のほうが広い範囲を出せるので、鮮やかな色ほど印刷で落ちます。
対策は3つ。印刷物は最初からCMYKで作る、鮮やかすぎる色を主役に選ばない、大事な仕事なら印刷会社に色見本を出してもらう。この3つで、想定とのズレはかなり減らせます。

カラーコードを覚える必要はありますか？

暗記は要りません。読み方だけ分かれば十分です。
覚えるとしたら#ffffff（白）と#000000（黒）の2つだけ。あとは「3つの値が同じならグレー」「全体に値が大きければ明るい」の2つのルールで、だいたい当たります。
実務では色見本のサイトから選んでコピーするので、正確な数値を暗記する場面はありません。

#4A90D9と#4a90d9は違う色ですか？

同じ色です。大文字と小文字の区別はありません。
ただしチーム内では、どちらかに揃えておくと管理が楽になります。検索したときに同じ色が2種類の表記で出てくると、数え違いのもとになります。小文字で統一するのがよく見る書き方です。

次に学ぶこと

今回の要点をまとめます。

• HEXは6桁を2桁ずつ、赤・緑・青の強さで読む。00が最小、ffが最大
• 3つの値が同じならグレー、全体に大きければ明るい色
• RGBは画面の光、CMYKは印刷のインク。印刷物は最初からCMYKで作る
• グレースケールは明るさだけ、インデックスカラーは最大256色。写真には向かない

読み方が分かったら、次は色の選び方です。数字で指定できても、選ぶ色が合っていないと形になりません。配色の基本で色の三属性とトーンを、トンマナの決め方で色を含めたルールの作り方を扱っています。

ここで第3章の配色は終わりです。次の章は文字の話。フォントと書体の基本から始まります。コース全体の流れはデザインの基本コース目次で確認できます。