CSS色コード・カラーコード一覧！ホームページHTMLをコピペで色装飾

ホームページのHTML・CSSでそのまま使える、初心者向けのカラーコード見本帳です。

「文字の色を変えたい」「背景におしゃれな色をつけたい」というときに、視覚的にパッと色を選んでコードをコピーできます。

読者が直感的に選べるよう、色は6つの系統（各12色、合計72色）に分けて表で紹介しています。1行目の「色のエリア」を見て、気に入った色のコード（HEXやRGBなど）をコピーしてご使用ください。

色選びひとつでホームページの印象はガラリと変わります。デザインに迷ったときは、いつでも引き出せる辞書としてこのページをブックマーク（お気に入り登録）しておくのがおすすめです。

【系統別】ホームページを彩るカラーコード一覧

色を直感的に選べるよう、6つの系統（各12色、合計72色）に分けて表で紹介します。

赤・桃系（Red / Pink）

華やかさ、注目、可愛い雰囲気を演出する12色です。

青・水色系（Blue / Cyan）

信頼感、清潔感、爽やかさを与えるIT・ビジネスに必須の12色です。

緑・黄緑系（Green / Mint）

安心感、自然、リラックス空間を作る優しい12色です。

黄・オレンジ系（Yellow / Orange）

明るさ、元気、ポジティブな印象を与えるアクセント向きの12色です。

茶・ベージュ系（Brown / Beige）

ぬくもり、安心感、オーガニックな優しさを演出する落ち着いた12色です。

黒・白・グレー系（Black / White / Gray）

全体の引き締め、可読性の高い文字色、シンプルな背景に必須となる定番の12色です。

【直感で選ぶ】グラデーションカラーピッカー

「一覧表に好みの微妙なニュアンスの色がない」「グラデーションの装飾を作りたい」という場合は、以下のカラーピッカー（色選択ツール）を触って直感的に好きな色を作ってみてください。
スライダーを動かしてグラデーションを変化させることで、無限のカラーバリエーションからあなただけの理想の色コードを一瞬で抽出できます。

4つの色指定方法（HEX・RGB・英語・日本語）とは？

今回紹介した4つの表記法がそれぞれ何を意味しているのか、初心者の方向けに一言だけで分かりやすく解説します。
CSSで色を指定する方法にはいくつか種類がありますが、基本的には最も使われている「HEX」をコピペすれば間違いありません。

HEX（ヘックス）

● # から始まる6桁の英数字（例：#FF0000）
● 特徴：ホームページ制作で最も一般的に使われている指定方法です。迷ったらこれを使ってください。

RGB（アールジービー）

● 光の三原色（赤・緑・青）の割合を0〜255の数字で表したもの（例：rgb(255, 0, 0)）
● 特徴：後ろに数値を足して rgba(255, 0, 0, 0.5) とすることで、色を半透明（シースルー）にできるメリットがあります。

英語名（カラーネーム）

● ブラウザがあらかじめ理解できる英語の色名（例：red, blue, tomato）
● 特徴：コードが短く直感的ですが、指定できる色の種類（約140色）に限りがあります。

日本語名 (色のイメージ・JIS規格)

● 特徴：「トマト色」「空色」など、色の持つニュアンスを理解しやすくするための表記です。
● 注意：日本語のままではホームページのコード（CSS）として直接使うことはできません。 あくまで直感的に「どんな色か」をパッと判断するための参考としてご覧ください。

＞＞CSSカラーコードとは？カラーネーム･HEX･RGBホームページHTML色コードの意味･種類･仕組み･違い