CSSで色を指定する方法【カラーコード解説】

CSS 色の指定方法：4つの書き方

CSSで色を指定する方法はいくつかあります。「どれを使えばいいの？」と迷う初心者も多いですが、それぞれに特徴があります。

この記事では、CSS 色の指定方法を4種類に分けてわかりやすく解説します。カラーコード（16進数）・rgb・hsl・色名の違いと使い分けを覚えましょう。

① 色名で指定する

英語の色名をそのまま書く方法です。シンプルで覚えやすいですが、使える色の種類が限られます。

h1 { color: red; }
p  { color: blue; }
body { background-color: lightyellow; }

よく使う色名：red・blue・green・white・black・gray・orange・pink など。

練習や簡単なページには便利ですが、細かい色の調整には向きません。

② カラーコード（16進数）で指定する

カラーコードとは、色を # から始まる6桁の英数字で表す方法です。#RRGGBB の形式で、RR・GG・BBはそれぞれ赤・緑・青の強さを16進数で表します。

h1 { color: #ff0000; }        /* 赤 */
p  { color: #0000ff; }        /* 青 */
body { background-color: #f0f9ff; } /* 薄い水色 */
.btn { background-color: #0d9488; } /* ティール */

3桁に省略できる場合もあります。#ff0000 → #f00、#ffffff → #fff。

カラーコードはデザインツール（Figmaなど）でコピーして使えるので、実際の開発で最もよく使われます。

🔥 CSSグリッドレイアウト入門で実践してみましょう。

③ rgb()で指定する

rgb() は赤・緑・青の強さを0〜255の数値で指定します。カラーコードと同じ仕組みですが、数値で直感的に調整できます。

h1 { color: rgb(255, 0, 0); }   /* 赤 */
p  { color: rgb(0, 0, 255); }   /* 青 */
.box { background-color: rgb(240, 249, 255); } /* 薄い水色 */

透明度を指定する：rgba()

rgba() を使うと、4番目の値（0〜1）で透明度を指定できます。

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 黒の50%透明 */
}

.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 薄い影 */
}

💡 CSSでフォントを変える方法で基礎を確認できます。

④ hsl()で指定する

hsl() は色相（H）・彩度（S）・明度（L）で色を指定します。同じ色の明るさだけを変えたいときに便利です。

/* hsl(色相0-360, 彩度%, 明度%) */
.btn         { background-color: hsl(174, 84%, 32%); } /* ティール */
.btn:hover   { background-color: hsl(174, 84%, 25%); } /* 少し暗く */
.btn-light   { background-color: hsl(174, 84%, 90%); } /* 薄い色 */

明度の数値だけを変えることで、同じ色調のバリエーションを簡単に作れます。

4つの書き方の使い分け

🔗 あわせて擬似クラス完全解説もチェックしてみましょう。

配色を選ぶときのコツ

色の指定方法がわかっても、「どの色を組み合わせればいいかわからない」と悩む人は多いです。配色を選ぶときのコツを紹介します。

コツ1：使う色は3色までにする

メインカラー（一番目立つ色）、サブカラー（補助的な色）、アクセントカラー（ボタンなどに使う強調色）の3色で十分です。色が多すぎると、ごちゃごちゃして見にくくなります。

コツ2：背景は薄い色、文字は濃い色にする

白や薄いグレーの背景に、黒や濃いグレーの文字が一番読みやすいです。逆に、暗い背景に明るい文字（ダークモード）も人気があります。大切なのは、背景と文字のコントラスト（明暗の差）を十分に確保することです。

コツ3：カラーパレットツールを使う

自分で色を選ぶのが難しければ、無料のカラーパレットツールを使いましょう。「Coolors」や「Color Hunt」で検索すると、プロが作った配色の組み合わせを見つけられます。気に入った配色の16進数コードをコピーして使えます。

コツ4：同じ色の濃淡を使う

たとえば青系なら、濃い青（#1e40af）、普通の青（#3b82f6）、薄い青（#dbeafe）のように、同じ色相の濃淡を使うと統一感が出ます。

色をCSS変数で管理する

サイト全体で同じ色を何度も使う場合、CSS変数（カスタムプロパティ）を使うと便利です。色の値を変数に入れておけば、あとから一箇所変えるだけで全体の色を変更できます。

たとえばメインカラーを変数にしておけば、デザインを変えたくなったときに変数の値を1つ変えるだけで済みます。CSS変数の使い方は「CSSカスタムプロパティ入門」で詳しく解説しています。

CSSの基本的な書き方がまだ不安な人は「CSSとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。セレクタやプロパティの書き方がわかっていれば、色の指定もスムーズに進みます。

色のアクセシビリティにも気を配りましょう。色覚に特性がある人は、赤と緑の区別が難しいことがあります。色だけで情報を伝えるのではなく、文字や記号も併用するのが親切です。たとえばエラーメッセージは赤色にするだけでなく、先頭に「エラー：」と文字でも示しましょう。誰にとっても使いやすいデザインを心がけることが大切です。

まとめ

まずはカラーコードと rgba() を覚えておけば、ほとんどの場面に対応できます。レッスンでさらに詳しく学んでみましょう。