CSSカラーコード一覧＆カラーピッカー！HTMLで使えるHEX･RGB･色名対応の色コード見本表

ホームページのデザインやコーディングをしていると、「イメージにぴったりの色がすぐに見つからない」「HEXやRGBの変換が面倒」「英語の色名をいちいち調べるのが大変」と感じることが多くあります。

Webサイトの印象を大きく左右するカラー選びは重要である一方で、理想の色コードにたどり着くまでに意外と時間がかかってしまう作業でもあります。

そこで、ここでは、ホームページ制作やWebデザインですぐに使えるカラーコード見本表を、一挙に掲載します。さらに、マウスを動かすだけで直感的に好みの色を作れる「高機能カラーピッカー（色選択ツール）」も完全装備しました。

すべての色について、以下の3要素をセットで整理しています。
・HEX（16進数カラーコード）：HTML・CSSで最も一般的に使われる形式
・RGB（光の三原色）：デザインツールやRGBA指定にも便利な数値形式
・色名（カラーネーム）：CSSで直接指定できる英語の色名

赤・青・緑・黄色・茶色・ベージュなどの11のカラー別に整理された見やすい一覧とともににホバー（hover）用も掲載していますので、膨大な色数の中からでも目的の色を視覚で素早く見つけることができます。最上部のカラーピッカーを使えば、11の基本色以外の中間色もホバーするだけで一瞬でコードが割り出せます。

また、HTML・CSSでそのままコピーして使える形式で掲載しているため、コーディング中の色指定や、デザインの配色検討にもそのまま活用できます。

「デザインのインスピレーションを得たいとき」や「コーディング中にカラーコードをすぐコピーしたいとき」など、ぜひ本記事をブックマークして、色選びの辞書として活用してください。

カラーピッカー！ホバー（hover）で選べるHEX･RGB･（日本語・英語）色名対応色コード

色コードを知りたい色の上にマウスカーソルを合わせる（スマホはタップする）と、HEX、RGB、英語名、日本語名がその場に表示されます。
そのまま左クリックすると情報が固定され、コードを簡単にコピーできます。

HEX･RGB･色名対応の色コード一覧

赤色系（Red系）カラーコード一覧

力強さや情熱、目を引くアクセントに最適な純粋な赤・深みのある赤の10色です。
💡 選ぶ際の注意点：
非常に目立つ色なので、文字全体ではなく「重要なボタン」や「ここぞという警告・アクセント」に部分使いするのがおすすめです。

ピンク色系（Pink）

可愛い雰囲気、女性向けサイト、優しさや華やかさを表現できる10色です。赤系から独立させました。
💡 選ぶ際の注意点：
彩度（鮮やかさ）が高すぎるピンクは目が疲れやすくなります。背景に広く使う場合は、ラベンダーブラッシュなどの淡い「極薄ピンク」がおすすめです。

オレンジ色系（Orange）

元気、健康的、親しみやすさを与えるオレンジ系の10色です。
💡 選ぶ際の注意点：
親しみやすさを出すのに最適ですが、白文字を上に重ねると見づらくなります。オレンジ色のボタンを作る際は、上に乗せる文字を「濃い茶色」や「黒」にすると読みやすくなります。

黄色・黄緑色系（Yellow / Light Green）

明るさ、元気、ポジティブな印象を与えるアクセントや背景向けの12色です。
💡 選ぶ際の注意点：
白背景の上に薄い黄色で文字を書くと、同化して完全に消えてしまいます。文字色として使う場合は、必ず「ゴールド」や「マスタード」などの濃い色をコピペしてください。

緑色系（Green）

安心感、ナチュラル、リラックスした印象を演出する10色です。
💡 選ぶ際の注意点：
企業のコーポレートサイトやブログで最も失敗しにくい安心の色です。今っぽいおしゃれな雰囲気を出すなら、オリーブなどの少し「くすんだ緑」がトレンドです。

水色・シアン色系（Cyan / Light Blue）

爽やかさ、清潔感、透明感を演出する背景・アクセント向きの10色です。
💡 選ぶ際の注意点：
清潔感や爽やかさを演出できますが、薄い水色は背景向きです。文字やリンク色として使う場合は、少し濃いめのターコイズ（SeaGreen調など）を選ぶと視認性が保てます。

青色・紺色系（Blue / Navy）

信頼感、誠実さ、知的な印象を与える、Webデザインで最も人気が高い王道の12色です。
💡 選ぶ際の注意点：
ホームページ制作で最も信頼感を与えられる王道カラーです。文字色を真っ黒（#000000）ではなく、濃い「ネイビー（MidnightBlueなど）」にするだけで一気にあか抜けたデザインになります。

紫色系（Purple）

ミステリアス、上品、エレガント、高級感を演出する大人の女性向けサイトなどに選ばれる10色です。
💡 選ぶ際の注意点：
高級感やエレガントさを出せる反面、使いすぎるとサイト全体が暗く怪しい印象になります。薄い「ラベンダー」を背景にし、アクセントで濃い紫を絞って使うのがコツです。

茶色系（Brown）

チョコレートやコーヒーのような、温かみ、安心感、リッチな高級感を演出する10色です。
💡 選ぶ際の注意点：
ぬくもりやオーガニック感を表現できます。真っ黒な文字の代わりに「ダークブラウン」を文字色として指定すると、読者に優しく読みやすいブログに仕上がります。

ベージュ・アイボリー系（Beige / Ivory）

ナチュラル、オーガニック、カフェ風サイトのベース色や、目への刺激を抑える優しい背景色向けの10色です。
💡 選ぶ際の注意点：
ホームページの「全体の背景色」として最も優秀な系統です。真っ白の背景よりも、アイボリーやリネンを薄く敷くことで、画面の眩しさが抑えられて読者の滞在時間が伸びます。

白・黒・グレー系（Monotone）

文字色、全体の背景、区切り線など、すべてのWebサイト構築で必ず用いられる基本の12色です。背景用の極薄グレーから文字用の濃いグレーまで幅広く選定しています。
💡 選ぶ際の注意点：
ホームページの「文字」「枠線」「背景」のすべてを司る基本色です。文字には真っ黒ではなく「チャコール」、枠線には「ライトグレー」を使うと、プロっぽい洗練されたサイトになります。

＞＞ホームページHTML･CSS色コード（カラーコード）とは？HEX･RGB･色名の意味･違い･書き方