Webデザインに便利！カラーコード一覧と選び方のポイント

ホームページ作成やブログカスタマイズ、資料作りで「もっと色を工夫したい」と思ったことはありませんか？

そんなときに役立つのが**カラーコード（色コード）**です。

カラーコードを使うと、HTMLやCSS、PowerPointで思い通りの色を正確に指定できます。

この記事では、よく使われるカラーコード一覧を紹介するとともに、目的に合った色選びのポイントもわかりやすく解説します。

カラーコードとは？

そもそもカラーコードって何？

カラーコードとは、色を「#」から始まる文字列（16進数）で表したものです。たとえば次のような形で表現されます。

#FF0000 → 赤
#00FF00 → 緑
#0000FF → 青

このように、数字とアルファベットで色を指定できます。これにより、デザインを数字で正確に指定できるため、ブラウザやソフトで同じ色が再現されます。

16進数の仕組み

カラーコードは、赤・緑・青の3つの色（RGB）を16進数で表現しています。

最初の2桁：赤の強さ（00〜FF）
中間の2桁：緑の強さ（00〜FF）
最後の2桁：青の強さ（00〜FF）

たとえば#FF0000は「赤が最大、緑と青が0」なので純粋な赤色になります。

カラーコードの利用場面

カラーコードは次のような場面で活用できます。

HTML・CSS：ウェブサイトのデザイン
PowerPoint：プレゼン資料の配色
Excel：グラフやセルの色分け
Photoshop・Illustrator：デザイン作業
WordPressテーマ：ブログカスタマイズ

よく使われるカラーコード一覧

基本色（プライマリーカラー）

以下に代表的な色をまとめました。コピペしてすぐ使えます。

色名	カラーコード	用途・特徴
黒	`#000000`	文字色、境界線
白	`#FFFFFF`	背景色、余白
赤	`#FF0000`	注意、エラー表示
緑	`#00FF00`	成功、自然をイメージ
青	`#0000FF`	信頼、冷静なイメージ
黄色	`#FFFF00`	警告、注目を集める
シアン（水色）	`#00FFFF`	爽やか、清涼感
マゼンタ	`#FF00FF`	個性的、アクセント

実用的なグレー系

グレー系は文字色や背景色でよく使われます。

色名	カラーコード	明度	用途
黒	`#000000`	0%	見出し、本文
濃いグレー	`#333333`	20%	本文、サブテキスト
中間グレー	`#808080`	50%	補助テキスト
薄いグレー	`#CCCCCC`	80%	境界線、背景
非常に薄いグレー	`#F5F5F5`	96%	ページ背景
白	`#FFFFFF`	100%	コンテンツ背景

ビジネス・プロフェッショナル系

ビジネス資料やコーポレートサイトでよく使われる色です。

色名	カラーコード	イメージ
ネイビー	`#000080`	信頼、安定
ダークブルー	`#003366`	企業的、堅実
ミッドナイトブルー	`#191970`	高級、上品
ダークグレー	`#404040`	モダン、洗練
チャコールグレー	`#36454F`	落ち着き、品格

暖色系（温かみのある色）

親しみやすさや温かさを演出したいときに使います。

色名	カラーコード	効果
オレンジ	`#FFA500`	元気、活発
トマトレッド	`#FF6347`	情熱、食欲
コーラル	`#FF7F50`	優しさ、女性的
ゴールド	`#FFD700`	豪華、成功
桃色	`#FFC0CB`	可愛らしさ、柔らか

寒色系（クールな印象）

落ち着きや信頼感を演出したいときに使います。

色名	カラーコード	効果
スカイブルー	`#87CEEB`	開放感、清涼
ティール	`#008080`	落ち着き、知的
ロイヤルブルー	`#4169E1`	高貴、権威
インディゴ	`#4B0082`	神秘的、深み
ターコイズ	`#40E0D0`	爽快、リゾート

自然・アースカラー

自然や環境をイメージした色です。

色名	カラーコード	用途
フォレストグリーン	`#228B22`	環境、自然
オリーブ	`#808000`	落ち着き、有機的
ブラウン	`#A52A2A`	温かみ、安定
ベージュ	`#F5F5DC`	上品、ナチュラル
サンド	`#F4A460`	温和、親しみ

実際の使用例とコードサンプル

HTMLでの使用例

<div style="background-color: #F5F5F5; padding: 20px;">
  <h2 style="color: #333333;">見出しテキスト</h2>
  <p style="color: #666666;">本文テキストです。</p>
  <a href="#" style="color: #007ACC;">リンクテキスト</a>
</div>

CSSでの使用例

/* メインカラー */
.main-color {
  background-color: #007ACC;
  color: #FFFFFF;
}

/* サブカラー */
.sub-color {
  background-color: #F5F5F5;
  color: #333333;
}

/* アクセントカラー */
.accent-color {
  background-color: #FF6B35;
  color: #FFFFFF;
}