rgbカラーコード（rgbカラーチャート）｜Web用カラー一覧・配色の基本

このページは、Web制作・デザインで使う RGBカラーコード（RGB値） を
すぐ確認できる RGBカラーチャート です。
「この色のRGBはいくつ？」「CSSで正確に色指定したい」
「HEX（#xxxxxx）との違いも知りたい」
そんな実務ニーズに合わせて、よく使う色を一覧でまとめました。

RGBカラーコードは、色を“感覚”ではなく“数値”で扱うための共通言語です。
バナー、LP、UI、資料の配色まで、同じ色をブレなく再現したいときに役立ちます。

“光の三原色”と“色の三原色”

私たちが日頃使っているテレビ、パソコン、スマホなどのモニターは、赤（Red）、緑（Green）、青（Blue）というRGBの3色で色を出しています。

「光の三原色」というもので、光の反射量の違いによってすべての色を出すことができます。
３色すべての光が反射した場合には白になり、反対に反射がなければ黒になります。

ホームページやバナーなどを作成する時には、基本的に色はRGBで指定されています。

RGBカラーコード一覧（RGBカラーチャート）

以下はRGBカラーコード（RGB値）の一覧です。
目的の色を探して、RGB値をそのまま制作・実装に使ってください。

色名／表示／RGB／HEX

色の指定方法には、主に２通りの方法があります。

1. RGBそれぞれに0～255の数値を指定する　⇒　rgb(n, n, n)
2. RGBそれぞれを16進数で指定する（HTMLカラーコード）　⇒　#rrggbb

RGB指定　rgb(n, n, n)		HTML指定　#rrggbb
rgb(255, 0, 0)		#ff0000
rgb(255, 153, 0)		#ff9900
rgb(255, 255, 0)		#ffff00
rgb(51, 153, 51)		#339933
rgb(102, 204, 255)		#66ccff
rgb(0, 0, 255)		#0000ff
rgb(255, 0, 255)		#ff00ff
rgb(255, 255, 255)		#ffffff
rgb(0, 0, 0)		#000000

RGBでもカラーコードでも、どちらでも自分がわかりやすい方で大丈夫です。

RGBの数値で指定する場合は、rgb(n, n, n)形式に透明度（alpha）を加えてrgba(n, n, n, a)で指定することもできます。
alphaの数値は、不透明の場合：１、半透明：0.5、透明：0と指定します。
例）赤の場合　rgba(255, 0, 0, 1)　ですが、rgba(255, 0, 0, 0)と指定すると、色がなく透明になります。

※色指定の方法は他に、色名で指定する方法や、色相・彩度・明度で指定するHSBという方法もありますが、色名を覚えて入力するのも大変ですし、HSBは感覚的に難しいので省略します。

RGBカラーコードとは（RGB値の意味）

RGBカラーコードは、赤（R）・緑（G）・青（B）の光を混ぜて色を作る「加法混色」の考え方です。
各数値は一般的に 0〜255 の範囲で表され、たとえば rgb(255, 0, 0) は赤、rgb(0, 0, 0) は黒、rgb(255, 255, 255) は白になります。

Web（画面上）の色は、基本的にRGBで扱われます。
だからこそ、デザイン側でも実装側でも「同じ色を同じ数値で共有できる」ことがRGBカラーコードの強みです。

RGBカラーコードとHEXカラーコードの違い

Web制作では RGB と HEX（#RRGGBB） の両方が登場します。
結論から言うと、表記が違うだけで同じ色を指しているケースが多いです。

• RGB：数値が直感的（R/G/Bをそのまま指定）
  例：rgb(34, 139, 34)
  
• HEX：短く書ける（コードとして扱いやすい）
  例：#228B22

制作チーム内で「RGBで指定するか／HEXで指定するか」が混ざりやすいので、
このページでは RGBカラーコードを軸に、必要に応じてHEXも併記できる形が実務的です。

CSSでRGBカラーコードを指定する方法（rgbaも）

CSSではRGBカラーコードを次のように指定します。

• RGB指定：color: rgb(0, 0, 0);
• 透明度あり（rgba）：background: rgba(0, 0, 0, 0.5);

rgba の最後の値（アルファ値）は 0〜1 で透明度を表します。
たとえば 0.2 はかなり薄く、0.8 は濃く見えます。
UIの影・重なり・ガラスっぽい表現など、透明度が必要な場面では rgba が便利です。

WebデザインでRGBカラーコードを使うときの注意点

RGBカラーコードは便利ですが、数値が正しくても“印象が正しい”とは限りません。
特にWebでは、背景色・文字量・余白・面積によって色の見え方が変わります。

• 同じRGBでも「面積」で印象が変わる
  小さなアクセントなら上品でも、背景一面に敷くと強すぎることがあります。
• 彩度が高いほど“安っぽさ”に転びやすい
  目立たせたい時ほど、彩度を上げすぎないほうが整います。
• 白背景との相性で“チープ”に見えることがある
  背景が真っ白（#fff）だと、派手な色は浮きやすいです。
  必要なら白を少しだけ落として（わずかに色味を入れて）全体をなじませます。

色は「選ぶ」より、使い方（量・距離・背景）で格が決まる。
ここを押さえるだけで、RGBカラーコードの活用精度が一段上がります。

よくある質問（RGBカラーコード／RGBカラーチャート）

Q. RGBカラーコードは印刷にも使えますか？
A. 印刷は基本的にCMYKなので、RGBのままでは同じ色にならないことがあります。Web用はRGB、印刷はCMYK（または特色）で考えるのが安全です。

Q. RGBとカラーコードは同じ意味？
A. 会話上「RGBのカラーコード」と言うことは多いですが、厳密には「RGB値」「HEXコード」など表記が複数あります。このページは RGBカラーコード（RGB値） を中心に扱います。

Q. 目的の色が見つからない時は？
A. 近い色を選び、微調整するのが早いです。まずはR/G/Bのどれを増減させると狙いの方向に寄るかを見ると作業がスムーズになります。

Q. RGBカラーコードはスマホとPCで同じ色に見えますか？
A. 基本的には同じRGB値なら同じ色ですが、画面の明るさ・色調整・機種差で多少見え方は変わります。重要なデザインでは、複数デバイスで確認するのがおすすめです。

Q. RGBカラーコードで「高級感」を出すことはできますか？
A. できますが、ポイントは色そのものより使う量と組み合わせです。彩度を抑え、余白を多く取り、強い色はアクセントに限定すると、RGBでも落ち着いた印象になります。

“RGB” と “CMYK”の違い

「光の三原色」対して「色の三原色」とは、シアン（Cyan）、
マゼンタ（Magenta）、イエロー（Yellow）の３色のことです。
「色の三原色」インクのように色を混ぜることでいろいろな色を出すことができます。

印刷の場合は、それにブラックを加えて、CMYKの４色で色を出しています。
（ちなみに、Kのブラックは、Blackのkだと思っていたのですが、
Key Plate（意味：基本的な、重要な）のKのことのようです。）

シアン、マゼンタ、イエローの３色では、印刷で完全な黒を出すことが
技術的に難しく、ブラックを加える必要があったようです。

ホームページで使っている画像を印刷用にしようとCMYKに変換すると、
たいていが濁った色になってしまいます。
少しだけ彩度を上げるなど色の調整をした方がいいと思います。

できれば、印刷用のデータにするには、
WEBとは画像解像度も違うので、改めて作ることをおすすめします。

WEBセーフカラーについて

WEBセーフカラーとは、HTMLカラーコードを
6段階（00、33、66、99、CC、FF）に分けて、
その組み合わせでできる216色のことです。

どの環境でもほぼ同じ色で表示されるので、
パソコンやスマホなどの端末による色の違いを
気にする必要がなく使える色です。

はっきりした色を使いたいときは、
この中から選ぶのも１つの方法です。

WEBセーフカラー一覧

※各色、上段はRGB指定、下段はHTMLカラーコード指定です。

WEBセーフカラーを選ばなくても問題ない

とはいえ、このWEBセーフカラーが決められたのは、
数十年も前の話で、「Netscape Navigator」というブラウザソフトの表示で保証したものだとか。
「Netscape Navigator」懐かしい～！昔、私も使ってました。今はサポート終了しています。

それにWEBセーフカラーは、はっきりした色が多く、
淡い色を使いたい時にイメージが合わない場合も多いです。
グラデーションを使う時は、
中間色のところではRGBセーフカラーにはならないので、意味がありません。

しかも液晶画面もどんどん進化していて、
色の再現性も高くなっています。

RGBセーフカラーではなくても、
イメージに合う色を使って大丈夫です。

WEBセーフカラーではない色の例

濃いめの赤やオレンジ、落ち着いたピンク、金色に近い色、
抹茶色、藤色など、素敵な色を出すことができます。

※各色、上段はRGB指定、下段はHTMLカラーコード指定です。

（まとめ）RGBカラーコードを正しく使うために

RGBカラーコードは、Web制作やデザインの現場で
色を正確に共有・再現するための共通言語です。
RGB値を知っていれば、デザインからCSS実装まで、
色のズレを最小限に抑えることができます。

一方で、RGBは「数値が合っていれば安心」
というものでもありません。
背景色・余白・使用面積によって、
同じRGBカラーコードでも印象は大きく変わります。
色は選ぶことより、どう使うかが重要です。

また、Webセーフカラーは、かつて表示環境の違いによる
色ズレを防ぐために重要な考え方でした。
現在では端末性能の向上により必須ではありませんが、
・色数を抑えたい
・シンプルで安定した配色にしたい
といった場面では、今でも考え方として役立ちます。

このRGBカラーチャートは、
「RGBカラーコードをすぐ確認したい人」
「Webで失敗しにくい色指定をしたい人」
のための実用資料です。

数値としての色と、印象としての色。
その両方を意識しながら、
RGBカラーコードを活用してみてください。

（執筆者：ころまるん）