【2026年7月最新】CSS colorプロパティ完全ガイド｜文字色変更・HEX・RGB・HSL・ダークモードまで徹底解説

この記事の内容

1. 01CSSのcolorプロパティとは（テキスト色を変える基本）
2. 02カラー名（red, blue, white）での指定
3. 03HEX（#ffffff）での指定
4. 04RGB（rgb(255,0,0)）での指定
5. 05RGBA（rgba()）で透明度を設定
6. 06HSL（hsl()）での指定
7. 07主要カラーコード一覧表
8. 08colorプロパティの継承と特殊性（specificity）
9. 09テキスト装飾との組み合わせ
10. 10ダークモード対応（prefers-color-scheme）
11. 11アクセシビリティ：コントラスト比の重要性
12. 12Claude Codeで配色を自動生成
13. FAQよくある質問

📚 用語解説

CSSのcolorプロパティ：HTML要素内のテキスト（文字）の色を指定するCSSプロパティ。「color: 色の値;」の形式で記述し、赤・青・白などのカラー名、#333333のようなHEXコード、rgb()・hsl()などの関数形式で色を指定できます。Webサイトのデザインにおいて最も基本的なスタイル指定の一つです。

/* 基本的な使い方 */
p { color: red; }
h1 { color: #333333; }
a { color: rgb(0, 102, 204); }
.highlight { color: rgba(220, 38, 38, 0.9); }

colorプロパティはテキスト（文字）だけでなく、テキストの装飾線（text-decoration）やborder（境界線）の色にも影響します。ただし背景色はbackground-colorプロパティで別途指定します。

📚 用語解説

CSSカラー名：W3Cが定義した色の英語名。基本的な16色（basic color keywords）から、CSS3で追加された147色まで使用できます。ただし厳密な色指定には向かず、本番Webサイトではより精密なHEXやRGBを使うことが多いです。

/* カラー名での指定例 */
h1 { color: red; }         /* 赤 */
p { color: blue; }         /* 青 */
a { color: navy; }         /* ネイビー */
span { color: gray; }      /* グレー */
strong { color: darkred; } /* ダークレッド */
em { color: goldenrod; }   /* ゴールデンロッド（黄金色） */

カラー名は直感的ですが、ブラウザによってわずかに表示が異なることがあります。また「紺色」「エメラルド」のような日本語の感覚とズレがある名前もあります。デザインの精度が求められる場合はHEXやRGBでの指定を推奨します。

📚 用語解説

HEXカラーコード：16進数（hexadecimal）を使った色指定形式。#（ハッシュ）に続けて6桁（または3桁）の英数字で色を表現します。最初の2桁が赤（R）、次の2桁が緑（G）、最後の2桁が青（B）の強さを0〜255（16進数では00〜FF）で示します。Webデザインで最も広く使われる色指定方式です。

/* HEXカラーコードの指定例 */
body { color: #333333; }      /* ほぼ黒（本文テキスト用） */
h1 { color: #dc2626; }        /* 赤色（強調用） */
.subtitle { color: #6b7280; } /* グレー（サブテキスト用） */
a { color: #2563eb; }         /* 青（リンク色） */
.muted { color: #9ca3af; }    /* 薄いグレー（補足情報） */

#fff（#ffffff の省略形）のように、RR・GG・BBがそれぞれ同じ数字の繰り返しの場合は3桁に省略できます。#fff = #ffffff（白）、#000 = #000000（黒）、#f00 = #ff0000（赤）が代表例です。

📚 用語解説

RGB（Red Green Blue）：光の三原色（赤・緑・青）それぞれの強さを0〜255の数値で指定する色表現方式。rgb(赤, 緑, 青)の形式で書きます。すべて0なら黒（rgb(0,0,0)）、すべて255なら白（rgb(255,255,255)）になります。HEXコードと内部的には同じ色を表しています。

/* RGBカラーの指定例 */
p { color: rgb(0, 0, 0); }       /* 黒（全て0） */
h1 { color: rgb(255, 255, 255); } /* 白（全て255） */
a { color: rgb(0, 102, 204); }    /* 青（ウェブリンクの青） */
.error { color: rgb(220, 38, 38); } /* 赤（エラー表示） */
.success { color: rgb(22, 163, 74); } /* 緑（成功表示） */
.muted { color: rgb(107, 114, 128); } /* グレー（補足テキスト） */

HEX値はRGBに簡単に変換できます。#ff0000 は ff=255(赤), 00=0(緑), 00=0(青) なので rgb(255, 0, 0) と同じです。ブラウザの開発者ツールを開くと、HEXとRGBを相互に表示してくれるので活用しましょう。

📚 用語解説

RGBA（Red Green Blue Alpha）：RGBに透明度（Alpha）を追加した色指定方式。rgba(赤, 緑, 青, 透明度)の形式で書き、透明度は0（完全透明）〜1（完全不透明）の小数で指定します。「rgba(220, 38, 38, 0.5)」なら50%の透明度で赤色になります。

/* RGBAで透明度を指定 */
.highlight { color: rgba(220, 38, 38, 0.9); }  /* 赤90%不透明 */
.overlay { color: rgba(0, 0, 0, 0.7); }         /* 黒70%不透明（薄暗い文字） */
.ghost { color: rgba(100, 100, 100, 0.4); }     /* グレー40%不透明（薄いテキスト） */
.watermark { color: rgba(0, 0, 0, 0.2); }       /* 黒20%不透明（透かし文字） */

opacityプロパティはHTML要素全体（テキスト・背景・子要素全部）の透明度を変えます。rgbaは色の透明度だけを変えるので、背景は影響しません。テキスト色だけを半透明にしたい場合はrgbaを使いましょう。

📚 用語解説

HSL（Hue Saturation Lightness）：色相（H: 0〜360度）・彩度（S: 0〜100%）・明度（L: 0〜100%）で色を指定する方式。色相0度は赤、120度は緑、240度は青。彩度0%は無彩色（グレー）、100%は最も鮮やか。明度0%は黒、100%は白。同じ色相で明度を変えるだけで配色バリエーションが作りやすいのが特徴。

/* HSLカラーの指定例 */
h1 { color: hsl(0, 100%, 50%); }    /* 赤（色相0度、彩度100%、明度50%） */
.blue { color: hsl(217, 91%, 60%); } /* 青 */
.green { color: hsl(142, 71%, 45%); } /* 緑 */
.gray { color: hsl(220, 9%, 46%); }  /* グレー */

/* 同じ色相で明度を変えて配色バリエーションを作る */
.red-light { color: hsl(0, 100%, 80%); }  /* 薄い赤 */
.red-mid { color: hsl(0, 100%, 50%); }    /* 普通の赤 */
.red-dark { color: hsl(0, 100%, 30%); }   /* 濃い赤 */

rgbaと同様に hsla() で透明度も指定できます。hsla(0, 100%, 50%, 0.5) で50%透明の赤色になります。テーマカラーのアルファバリエーションを作るときに便利です。

📚 用語解説

CSSの継承（Inheritance）：親要素に設定したスタイルが子要素にも引き継がれる仕組み。colorプロパティは継承プロパティの一つで、bodyにcolor: #333333と設定すれば、特に指定がない限り子要素のテキストもすべてその色になります。

/* bodyに色を設定すると全テキストに継承 */
body {
  color: #333333; /* サイト全体のテキスト色 */
}

/* 個別指定で上書き */
h1 {
  color: #1a1a1a; /* 見出しはより濃く */
}

a {
  color: #2563eb; /* リンクはブルー */
}

.muted {
  color: #9ca3af; /* 補足テキストは薄いグレー */
}

📚 用語解説

CSSの特殊性（Specificity）：CSSルールが複数ある場合、どのルールが優先されるかを決める仕組み。セレクターの種類によって点数が決まり、点数が高いほど優先されます。IDセレクター（#）> クラスセレクター（.）> タグセレクター（p, h1など）の順で強力です。

/* 特殊性の比較 */
p { color: gray; }            /* 0,0,0,1 — タグセレクター（弱い） */
.text { color: blue; }        /* 0,0,1,0 — クラスセレクター */
#main { color: red; }         /* 0,1,0,0 — IDセレクター（強い） */
p { color: green !important; } /* 最強（できるだけ使わない） */

/* 同じ特殊性なら後に書いた方が優先 */
p { color: red; }
p { color: blue; } /* こちらが適用される */

!importantを多用するとCSSが複雑になり、後から修正が困難になります。「なぜかこの色が変わらない」という問題の多くは特殊性の問題です。まず開発者ツールで何のルールが適用されているか確認しましょう。

/* テキスト装飾との組み合わせ例 */

/* 太字 + 色 */
.emphasis {
  color: #dc2626;
  font-weight: 700; /* ボールド（太字） */
}

/* 下線 + 色 */
a {
  color: #2563eb;
  text-decoration: underline;
}

/* 下線なし + 色（モダンなリンクスタイル） */
a {
  color: #2563eb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline; /* ホバー時のみ下線 */
}

/* 取り消し線 + 色 */
.old-price {
  color: #9ca3af;
  text-decoration: line-through;
}

/* 大文字 + 色 */
.label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

/* リンクの状態別スタイル */
a:link    { color: #2563eb; }  /* 未訪問リンク */
a:visited { color: #7c3aed; }  /* 訪問済みリンク */
a:hover   { color: #1d4ed8; }  /* ホバー時 */
a:active  { color: #1e40af; }  /* クリック中 */

currentColorというキーワードを使うと、その要素のcolorプロパティ値を参照できます。border-color: currentColor; と書くと、テキストと同じ色のボーダーが自動で作れます。SVGアイコンの色をテキストに合わせたいときにも便利です。

📚 用語解説

prefers-color-scheme：ユーザーのOSまたはブラウザのカラーモード設定（ライト/ダーク）を検知するCSSメディアクエリ。@media (prefers-color-scheme: dark) 内にスタイルを書くと、ダークモード設定のユーザーに自動で適用されます。現代のWebサイトで必須の対応です。

/* ライトモード（デフォルト） */
body {
  color: #333333;
  background-color: #ffffff;
}

h1, h2, h3 {
  color: #1a1a1a;
}

a {
  color: #2563eb;
}

/* ダークモード（OSの設定がダークの場合） */
@media (prefers-color-scheme: dark) {
  body {
    color: #e5e7eb;         /* 明るいグレーのテキスト */
    background-color: #111827; /* 深いネイビー背景 */
  }

  h1, h2, h3 {
    color: #f9fafb;          /* ほぼ白の見出し */
  }

  a {
    color: #60a5fa;          /* 明るいブルーのリンク */
  }
}

:root {
  --color-text: #333333;
  --color-heading: #1a1a1a;
  --color-link: #2563eb;
  --color-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e5e7eb;
    --color-heading: #f9fafb;
    --color-link: #60a5fa;
    --color-bg: #111827;
  }
}

/* 本文では変数を参照するだけ */
body { color: var(--color-text); background-color: var(--color-bg); }
h1   { color: var(--color-heading); }
a    { color: var(--color-link); }

📚 用語解説

コントラスト比（Contrast Ratio）：テキスト色と背景色の明るさの差を数値化したもの。WCAG（Webコンテンツアクセシビリティガイドライン）では、通常テキストで4.5:1以上、大きなテキスト（18px以上）で3:1以上を推奨しています。コントラストが低いと視力の弱い方や高齢者が読みにくくなります。

/* NG：コントラスト不足の例 */
.bad-example {
  color: #999999;        /* ライトグレーのテキスト */
  background: #ffffff;   /* 白背景 */
  /* コントラスト比: 2.85:1 — WCAG AA不適合 */
}

/* OK：十分なコントラストの例 */
.good-example {
  color: #595959;        /* ダークグレーのテキスト */
  background: #ffffff;   /* 白背景 */
  /* コントラスト比: 7.0:1 — WCAG AAA適合 */
}

/* 白背景での本文テキスト定番 */
body {
  color: #333333; /* コントラスト比: 12.6:1 — 非常に高い */
}

WebAIM Contrast Checker（https://webaim.org/resources/contrastchecker/）にテキスト色と背景色のHEX値を入れるだけで、コントラスト比とWCAG適合レベルを確認できます。Figmaにも自動チェック機能があります。デザイン段階で確認する習慣をつけましょう。

📚 用語解説

Claude Code：Anthropic（クロード開発元）が提供するAIコーディングアシスタント。チャット形式でCSSの書き方を質問したり、カラーパレットの生成・コントラスト比チェック・ダークモード対応CSSの生成などをAIに依頼できます。非エンジニアでも使えるレベルの指示でプロレベルのCSSが生成されます。

プロンプト例：
「Webサイトのカラーパレットを作ってください。
メインカラーは赤系（#dc2626）。
ライトモードとダークモードに対応し、
WCAG AA基準をクリアするCSS変数セットを
作成してください。」

:root {
  /* ライトモード */
  --color-primary: #dc2626;
  --color-primary-dark: #991b1b;
  --color-primary-light: #fca5a5;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-border: #e5e7eb;
  --color-link: #2563eb;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #f87171;
    --color-primary-dark: #fca5a5;
    --color-primary-light: #991b1b;
    --color-text: #f3f4f6;
    --color-text-muted: #9ca3af;
    --color-bg: #111827;
    --color-bg-secondary: #1f2937;
    --color-border: #374151;
    --color-link: #60a5fa;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #f87171;
  }
}

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？