【HEX/RGB対応表】カラーコード一覧 | 色の調べ方完全ガイド

はじめに

Web制作やデザイン作業で「この色のカラーコードは何だろう?」と悩んだ経験はありませんか？HTMLやCSSで色を指定する際、正確なカラーコードを知らないと思い通りの色を表現できません。

本記事では、よく使われる色のカラーコード一覧をHEX・RGB・色名の対応表で網羅的に紹介します。

さらに、カラーコードの基礎知識から、効率的な調べ方、実務で使えるツール、HTML/CSSでの実装方法までを解説します。初心者からプロまで、この記事一つでカラーコードに関する疑問がすべて解決します。ブックマーク必須の完全ガイドです。

カラーコードとは?基礎知識と種類を理解しよう

カラーコードは、デジタル環境において色を正確に指定するための識別コードです。

カラーコードの定義と役割

カラーコードとは、コンピュータ上で色を数値的に表現するための符号体系です。色の正確な再現、効率的なコミュニケーション、ブランドカラーの一貫性維持といったメリットがあります。

Web制作では、HTMLやCSSでカラーコードを記述することで、テキスト色、背景色、ボーダー色などの要素を正確に指定できます。

HEX・RGB・色名の違いと使い分け

Web制作で主に使用されるカラーコード形式は、HEX、RGB、色名の3種類です。それぞれに特徴と適した使用場面があります。

HEX（16進数表記）

HEXカラーコードは 「#」記号に続く6桁の16進数で色を表現します（例：#FF0000は赤色）。 形式は#RRGGBB（RR=赤、GG=緑、BB=青）で、00〜FFの256段階で指定します。コンパクトで記述しやすく、CSSで最も一般的に使用されます。

RGB（10進数表記）

RGBは赤（Red）、緑（Green）、青（Blue）の光の三原色を0〜255の数値で指定します（例：rgb(255, 0, 0)）。直感的に理解しやすく、透明度を追加したRGBA表記も可能です。

色名（Named Colors）

「red」「blue」「white」など英語の色名で指定する方式です。覚えやすく記述が簡単ですが、使用できる色は基本140色程度に限定されます。

実務ではHEXコードが最も頻繁に使用されますが、透明度が必要な場合はRGBA、プロトタイピングや学習段階では色名を使うなど、状況に応じた使い分けが推奨されます。

Web制作で知っておくべき色の表現方法

カラーコード以外にも、Web制作では様々な色表現方法が存在します。

HSL（色相・彩度・明度）は、色の調整が直感的で同系色のバリエーション作成に適しています（例：hsl(0, 100%, 50%)）。CSS変数を使用すると、カラーコードを一箇所で定義しサイト全体で再利用できるため、ブランドカラーの一括変更や保守性の向上が実現できます。

また、linear-gradientやradial-gradientを使用することで、複数の色を滑らかに混合したグラデーション表現も可能です。

カラーコード一覧【用途別・完全対応表】

主要な色のカラーコードをHEX・RGB・色名で対応表形式にまとめました。実務での参照用としてご活用ください。

基本16色のカラーコード一覧(HEX/RGB対応)

HTML/CSSで標準的に定義されている基本16色の対応表です。これらはすべてのブラウザで色名での指定が可能です。

これらの基本色は学習用途やプロトタイプ制作で特に有用です。

よく使われる定番カラーコード

実務で高い頻度で使用される定番カラーコードを系統別に紹介します。

青系

#3498db（明るい青）、#2980b9（標準的な青）、#1abc9c（ターコイズ）

緑系

#2ecc71（明るい緑）、#27ae60（標準的な緑）、#1e8449（深い緑）

赤・オレンジ系

#e74c3c（赤）、#c0392b（深い赤）、#e67e22（オレンジ）、#d35400（深いオレンジ）

紫系

#9b59b6（紫）、#8e44ad（深い紫）

グレー系

#ecf0f1（明るいグレー）、#bdc3c7（ライトグレー）、#95a5a6（ミディアムグレー）、#7f8c8d（グレー）、#34495e（ダークグレー）、#2c3e50（濃いグレー）

その他

#f39c12（黄色）、#f1c40f（明るい黄色）、#ffffff（白）、#000000（黒）

これらのカラーコードは、Webサイトのボタン、リンク、背景色などで頻繁に使用されており、実務での活用度が高いものばかりです。

グレースケール・モノトーンのカラーコード表

モノトーン配色はモダンで洗練された印象を与えるため、コーポレートサイトやポートフォリオサイトで人気です。

カラーコードを調べる方法とおすすめツール

カラーコードを素早く調べるには、ブラウザの標準機能や無料のオンラインツールが便利です。目的別に使い分けることで、作業効率を大幅に高められます。

ブラウザ標準のカラーピッカーの使い方

Google ChromeやFirefoxなどの主要ブラウザには、開発者ツールにカラーピッカー機能が標準搭載されています。

使用手順(Chrome)

1.調べたい色が使われているWebページで右クリック→「検証」を選択

2.Elements（要素）タブでHTML要素を選択

3.Stylesパネルで色指定部分の色見本をクリック

4.HEX/RGB/HSLの値を確認・コピー

スポイトツールで画面上の任意の色を抽出したり、コントラスト比チェックでアクセシビリティ検証も可能です。ブラウザの開発者ツールは追加インストール不要で、実際のWebサイトから色を抽出できる点が大きな利点です。

オンラインで使える無料カラーコード検索ツール5選

実務で活用できる高機能な無料ツールを厳選しました。

Adobe Color

配色パターンの自動生成、カラーホイールによる直感的な操作、Adobe製品との連携が可能です。

Coolors

スペースキーでランダム配色を生成したり、配色のエクスポート機能、URLで配色を共有することができます。

Color Hunt

トレンドカラーパレットのギャラリーを見ることができ、いいね順・新着順での検索や、配色のワンクリックコピーができます。

Paletton

補色・類似色の自動提案をしてくれたり、シミュレーション機能、色盲シミュレーション対応も可能です。

HTML Color Codes

シンプルなカラーピッカーやHEX/RGB/HSLの即時変換が可能で、カラーチャート一覧も使うことができます。

これらのツールを用途に応じて使い分けることで、効率的に理想の配色を見つけることができます。

デザインツール(Photoshop/Figma)での色抽出方法

プロのデザインツールでは、高度な色管理機能が提供されています。

Photoshop

スポイトツール（I）を選択し、画像上の任意の箇所をクリックすることで、カラーパネルでHEX/RGBを確認できます。カラーサンプラーツールを使用すると、最大10箇所の色を同時に記録可能です。

Figma

オブジェクトを選択し、右パネルのFill（塗り）セクションで色見本をクリックすると、HEX/RGB/HSL/CSSコードが表示されます。ブラウザベースのため、チーム間での色情報共有がスムーズに行えます。また、スタイル機能を使用することで、プロジェクト全体で統一されたカラーパレットを管理できます。

HTML・CSSでのカラーコード実装方法

カラーコードの知識を実際のコーディングで活かすための実装方法を、基本から応用まで解説します。

HTMLでの色指定の基本構文と記述例

HTMLで色を指定する主な方法は、インラインスタイルとstyle属性を使用する方法です。

<div style="background-color: #e2e2e2;">
  <p style="color: #FC557C;">この文字はピンク色です</p>
</div>

HTMLファイル内でstyle要素を使用する方法は、小規模なプロジェクトやプロトタイプ制作に適しています。ただし、大規模サイトでは外部CSSファイルでの管理が推奨されます。

CSSでカラーコードを使う実践テクニック

CSSでは様々なプロパティでカラーコードを活用できます。

• 影をつける

.element {
  background-color: #74E5C5;
  border: 2px solid #21B98E;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

• グラデーション

.gradient {
  background: linear-gradient(to right, #FFB2C4, #74E5C5);
}

• CSS変数の活用

:root {
  --primary: #74E5C5;
  --secondary: #ffa0b6;
}

.button-primary {
  background-color: var(--primary);
}

RGBとHEXの変換方法と使い分けのコツ

RGBとHEXは相互に変換可能です。

HEXからRGBへは「#47d3ab」の47・d3・abをそれぞれ16進数から10進数に変換してrgb(71, 211, 171)となります。RGBからHEXへはrgb(252, 85, 124)の各数値を16進数に変換して#FC557Cとなります。

実務では、プロジェクトのコーディング規約に従って統一的な形式を使用することが推奨されます。

カラーコード活用のベストプラクティス

カラーコードを正しく扱うだけでなく、アクセシビリティやブランド一貫性の観点も押さえておくことで、より品質の高い制作物を生み出せます。

アクセシビリティを考慮した色選びのポイント

コントラスト比の確保

WCAG（Web Content Accessibility Guidelines）では、通常テキストで4.5:1以上、大きなテキスト（18pt以上）で3:1以上のコントラスト比が推奨されています。

例えば、#2c3e50（濃いグレー）の文字と#ffffff（白）の背景はコントラスト比12.63:1で適切ですが、#95a5a6（ミディアムグレー）と#ffffffはコントラスト比2.32:1で不適切です。

色覚異常への対応

色のみに依存した情報伝達は避け、形状やテキストラベルを併用します。リンクには下線を付ける、エラーメッセージにはアイコンを追加する、グラフには模様やラベルを組み合わせるなどの工夫が必要です。

ブランドカラーの統一管理とカラーパレットの作り方

ブランドの一貫性を保つためには、カラーパレットの体系的な管理が必要です。

カラーパレットの基本構成

1.プライマリーカラー：ブランドを代表するメインカラー（1色）

2.セカンダリーカラー：サブカラー（1〜2色）

3.アクセントカラー：CTAボタンなどに使う強調色（1色）

4.ニュートラルカラー：グレースケール（5〜10段階）

5.セマンティックカラー：成功、警告、エラーなど状態を示す色（3〜4色）

CSS変数で管理することで、ブランドカラーの一括変更が容易になります。カラーパレットは、デザインシステムとして文書化し、チーム全体で共有することが重要です。

よくあるミスの主な原因と解決法

• 記述ミス

HEXコードは必ず6桁（または3桁の省略形）で記述する。

• プロパティ名の誤り

background-color: #3498db;と明示的に記述する。

• 詳細度の問題

開発者ツールで適用されているスタイルを確認し、詳細度を調整する。

• キャッシュの影響

スーパーリロード（Ctrl+Shift+R）でキャッシュクリアを行う。

• 継承の問題

対象要素に明示的に色を指定する。

• !importantの乱用

!importantの使用を最小限に抑え、詳細度で制御する。

ブラウザ開発者ツールのComputedタブで実際に適用されている値を確認し、CSSの構文エラーチェッカーでコードを検証することで、トラブルを迅速に解決できます。

まとめ

本記事では、カラーコードの基礎知識から実践的な活用方法まで、Web制作に必要な情報を網羅的に解説しました。

HEX・RGB・色名など複数の形式があり、用途に応じた使い分けが重要です。

プログラミングやWeb制作を体系的に学びたい方は、WEBMASTERSの無料カウンセリングをご活用ください。HTMLやCSSを基礎からしっかり習得できる環境で、カラー設計やコーディングのスキルを身につけることができます。本記事をブックマークして、日々のWeb制作の参考資料としてご活用ください。