CSSの色指定まとめ｜rgb・hsl・カラーコードと透明度の書き方

CSSの色は、色名（tomato）・カラーコード（#ff6347）・rgb()・hsl() などの関数のどれで書いても同じ色を表せます。透明度は、色の値に「/ 50%」やカラーコード末尾2桁を足す方法と、要素ごと透かす opacity プロパティの2系統があります。

この記事では、同じ1色を9通りの書き方で書き比べた対応表を最初に置き、rgb(0 0 0 / 50%) という空白区切りの書き方と、カンマ区切りの rgba() の関係を整理します。さらに「背景だけ透明にしたいのに文字まで薄くなる」という定番の悩みを、実際に描画されたピクセルの色を測って比べました。掲載した出力はすべて Chromium 141（Playwright 経由）で動かして得たものです。Firefox と Safari では動かしていないため、その点は各所で明記します。

CSSの色指定の早見表

同じ色を9通りで書き比べた対応表

色の書き方は「表し方が違うだけ」で、ブラウザの中では同じ色として扱われます。 色名の tomato を基準に、同じ色になる書き方を並べ、ブラウザが計算した値（getComputedStyle の結果）と、白い背景に描いたときのピクセルの色を測りました。

読み取れることは3つあります。

• 色名・カラーコード・rgb・hsl・hwb は、計算後にすべて rgb(255, 99, 71) へそろいます。 どれで書いても表示は同じなので、読みやすさで選んで構いません。
• oklch は計算後も oklch のまま残ります。小数第3位までに丸めて書いたため、青が 71 ではなく 68 になりました。桁数を増やす（oklch(0.696216 0.195561 32.3195)）と差は縮まります。
• 3桁の #f64 は #ff6644 に展開され、ピクセルは rgb(255, 102, 68) でした。#ff6347 を3桁で正確に表すことはできません。3桁に短縮できるのは #ffcc00 → #fc0 のように各色が同じ文字の繰り返しのときだけです。

書き比べを自分で確かめるコード

次のHTMLを保存してブラウザで開くと、各書き方が有効かどうかと計算後の値が一覧で出ます。調べたい色を list に足して使ってください。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>色の書き方を比べる</title>
<pre id="out"></pre>
<script>
const list = [
  "tomato", "#ff6347", "#ff6347ff", "rgb(255 99 71)", "rgb(255, 99, 71)",
  "hsl(9 100% 64%)", "hwb(9 28% 0%)", "oklch(0.696 0.196 33.3)",
  "rgb(255 99 71 / 50%)", "rgba(255, 99, 71, 0.5)", "#ff634780",
  "hsl(9 100% 64% / 50%)", "color-mix(in srgb, tomato, white)",
  "transparent", "rgb(255 99 71, 0.5)"
];
const box = document.createElement("div");
document.body.append(box);
const lines = list.map((c) => {
  box.style.backgroundColor = "";          // いったん消す
  box.style.backgroundColor = c;           // 無効な値は入らない
  const ok = CSS.supports("color", c) ? "有効" : "無効";
  return c.padEnd(36) + ok + "  " + getComputedStyle(box).backgroundColor;
});
document.getElementById("out").textContent = lines.join("\n");
</script>
</html>

Chromium 141 で開いたときの表示です。

tomato                              有効  rgb(255, 99, 71)
#ff6347                             有効  rgb(255, 99, 71)
#ff6347ff                           有効  rgb(255, 99, 71)
rgb(255 99 71)                      有効  rgb(255, 99, 71)
rgb(255, 99, 71)                    有効  rgb(255, 99, 71)
hsl(9 100% 64%)                     有効  rgb(255, 99, 71)
hwb(9 28% 0%)                       有効  rgb(255, 99, 71)
oklch(0.696 0.196 33.3)             有効  oklch(0.696 0.196 33.3)
rgb(255 99 71 / 50%)                有効  rgba(255, 99, 71, 0.5)
rgba(255, 99, 71, 0.5)              有効  rgba(255, 99, 71, 0.5)
#ff634780                           有効  rgba(255, 99, 71, 0.5)
hsl(9 100% 64% / 50%)               有効  rgba(255, 99, 71, 0.5)
color-mix(in srgb, tomato, white)   有効  color(srgb 1 0.694118 0.639216)
transparent                         有効  rgba(0, 0, 0, 0)
rgb(255 99 71, 0.5)                 無効  rgba(0, 0, 0, 0)

最後の行 rgb(255 99 71, 0.5) は空白区切りとカンマ区切りを混ぜた書き方で、無効と判定されました。無効な値は宣言ごと読み飛ばされるため、背景は初期値の透明（rgba(0, 0, 0, 0)）のままです。

色の書き方7種の特徴と選び方

色名（キーワード）で指定する

red、white、tomato など、名前で書ける色が用意されています。 試作や説明用のコードで手早く使えます。大文字と小文字は区別されず、Tomato でも同じ色になりました。

green は #008000（暗めの緑）で、明るい緑は lime です。名前から想像する色と数値がずれることがあるため、デザインで決まった色はカラーコードや rgb で書くと確実です。

カラーコード（HEX）で指定する：3桁・4桁・6桁・8桁

# に続けて16進数（0〜9 と a〜f）で赤・緑・青を書く方法です。デザインツールからそのままコピーできるため、最もよく使われます。

大文字（#FF6347）でも小文字でも同じです。5桁や7桁は無効になります。また、6桁のつもりで2文字足りない #ff63 を書くと、4桁の書き方として解釈され rgba(255, 255, 102, 0.2)（薄い黄色）になりました。エラーにならず別の色が出るので、桁数は数えて確認すると安心です。

rgb() で指定する：空白区切りとカンマ区切り

赤・緑・青をそれぞれ 0〜255（または 0%〜100%）で指定します。 現在の書き方は空白区切りで、透明度は / の後ろに書きます。

.box {
  color: rgb(255 99 71);            /* 不透明 */
  background: rgb(255 99 71 / 50%); /* 半透明。0.5 と書いても同じ */
}

範囲を超えた値は、範囲内に収められます。rgb(300 -20 71) は rgb(255, 0, 71) に、透明度 150% は不透明（100%）になりました。

hsl() で指定する：色相・彩度・明度

色相（0〜360 の角度）・彩度（%）・明度（%）で指定します。 「同じ色みのまま明るくする」「彩度だけ落とす」といった調整を、数値を1つ変えるだけで行えるのが利点です。

:root {
  --main:       hsl(9 100% 64%);  /* 基準の色 */
  --main-light: hsl(9 100% 85%);  /* 明度だけ上げる */
  --main-dark:  hsl(9 100% 40%);  /* 明度だけ下げる */
  --main-mute:  hsl(9 30% 64%);   /* 彩度だけ下げる */
}

明度は 0% で黒、100% で白、50% がその色相でいちばん鮮やかな状態です。

hwb() で指定する：色相・白の量・黒の量

色相に、白と黒をどれだけ混ぜるかで指定します。 絵の具に白や黒を足す感覚に近く、hwb(9 28% 0%) は「色相9の純色に白を28%混ぜ、黒は混ぜない」という意味です。hwb には空白区切りの書き方だけがあり、カンマ区切りはありません。

oklch() で指定する：見た目の明るさをそろえやすい

明るさ（L：0〜1 または 0%〜100%）・鮮やかさ（C：0〜0.4 程度）・色相（H：角度）で指定します。 hsl では、明度を同じ 50% にしても黄色は明るく青は暗く見えます。oklch の L は人の目で感じる明るさに沿って作られているため、L をそろえると色相が違っても明るさの印象がそろいやすくなります。配色を数値で組み立てたいときに向いています。

:root {
  --tag-red:   oklch(0.7 0.15 30);
  --tag-green: oklch(0.7 0.15 150);
  --tag-blue:  oklch(0.7 0.15 260);  /* L と C を固定して色相だけ変える */
}

Chromium 141 では有効な値として扱われ、計算後の値も oklch のまま返りました（Firefox・Safari では未実行です）。

color-mix() で2色を混ぜる

2つの色を、指定した色空間で混ぜた結果を返す関数です。 基準の色から薄い色・濃い色を作るのに便利です。MDN では、2023年5月から主要ブラウザで広く使える機能（Baseline Widely available）と案内されています。

.btn {
  background: tomato;
}
.btn:hover {
  /* tomato に黒を 15% 混ぜて少し暗くする */
  background: color-mix(in srgb, tomato, black 15%);
}

混ぜた結果を Chromium 141 で測った値です。

比率のルールは次のとおりです（MDN の color-mix() のページで確認しました）。

• 両方の比率を省略すると 50% ずつ
• 片方だけ書くと、もう片方は 100% から引いた残り
• in srgb などの色空間は混ぜ方を決めるもので、色空間が変わると結果の色も少し変わる（上の表の1行目と2行目）

transparent と混ぜると半透明になります。変数に入った色を半透明にしたいときに使える書き方です。

:root { --brand: #ff6347; }
.overlay {
  /* 変数の色を 50% の濃さにする */
  background: color-mix(in srgb, var(--brand) 50%, transparent);
}

どの書き方を選ぶかの判断表

1つのサイトの中では書き方をそろえると、検索や置換がしやすくなります。色は CSS 変数（カスタムプロパティ）にまとめ、使う側は var(--main) と書く形にすると、書き方を後から変えるのも1か所で済みます。

rgb(0 0 0 / 50%) と rgba() の関係

現在の仕様では rgba() は rgb() の別名で、どちらも同じ結果になります。 違いは「区切りの書き方」だけです。

ポイントを整理します。

• rgb() と rgba() は名前が違うだけで、どちらにも透明度を書けます。hsl と hsla も同じ関係です。
• 区切りは「全部空白＋透明度はスラッシュ」か「全部カンマ」のどちらかにそろえます。混ぜると無効です。
• 計算後の値（getComputedStyle）は、どの書き方でもカンマ区切りの rgba(255, 99, 71, 0.5) で返ります。 JavaScript で色を文字列比較するときは、この形で返る点を覚えておくと役立ちます。
• hwb・oklch・color-mix などの新しい関数は空白区切りだけです。新しく書くコードは空白区切りにそろえておくと、関数を変えても書き方が変わりません。

既存のカンマ区切りの rgba() は今後もそのまま動くので、書き直す必要はありません。

元の色から透明度だけ変える（相対色構文）

from を使うと、既存の色を取り込んで一部だけ変えられます。 変数の色を半透明にする、もう1つの方法です。

:root { --brand: tomato; }
.overlay {
  background: rgb(from var(--brand) r g b / 50%);
}

Chromium 141 では rgb(from tomato r g b / 50%) が有効で、白背景でのピクセルは #ffb1a3（rgb(255 99 71 / 50%) と同じ）でした。Firefox・Safari での動作は未実行のため、広い環境に向けるなら前述の color-mix(in srgb, var(--brand) 50%, transparent) と並べて検討してください。

明るさを変えた色も、相対色構文で作れます。hsl(from tomato h s calc(l + 20))（明度を20足す）は Chromium 141 で有効で、白背景でのピクセルは #ffb9ad でした。oklch(from tomato l c h / 0.5) のように、oklch で取り込んで透明度だけ変える書き方も有効でした。

表のうち、明るい色・暗い色の color-mix の行と、暗い色の相対色構文の行は書き方の紹介で、個別の測定は未実行です。

背景だけ透明にする方法と opacity の違い

背景色の値に透明度を入れると背景だけが透け、opacity を使うと子要素まで含めて丸ごと透けます。 写真の上に半透明の帯を置いて白い文字を載せる、といった場面で差が出ます。

次のHTMLで、青い土台の上に2つの箱を置きました。A は背景色に透明度を入れ、B は黒い背景に opacity: 0.5 を付けています。どちらも中に白い子要素があります。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<style>
  body { margin: 0; }
  .stage { position: relative; width: 300px; height: 200px; background: rgb(0 0 255); }
  .a, .b { position: absolute; top: 10px; width: 100px; height: 100px; }
  .a { left: 10px;  background: rgb(0 0 0 / 50%); }          /* 背景だけ半透明 */
  .b { left: 150px; background: rgb(0 0 0); opacity: 0.5; }  /* 要素ごと半透明 */
  .child { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; background: #fff; }
</style>
<div class="stage">
  <div class="a"><div class="child"></div></div>
  <div class="b"><div class="child"></div></div>
</div>
</html>

Chromium 141 でスクリーンショットを撮り、ピクセルの色を測った結果です。

箱の背景はどちらもほぼ同じ濃さですが、B は子要素の白まで半分透けて、下の青と混ざりました。 文字や画像をくっきり見せたいときは A の書き方を選びます。

文字まで薄くなったときの直し方

直す前（文字も一緒に薄くなる）：

.caption {
  background: #000;
  color: #fff;
  opacity: 0.6;
}

直した後（背景だけ透ける）：

.caption {
  background: rgb(0 0 0 / 60%);
  color: #fff;
}

opacity を消して、透明度を背景色の値の中へ移すのが直し方です。背景画像そのものを薄くしたい場合は、疑似要素（::before）に画像を置いてそちらにだけ opacity を付けると、文字に影響しません。

.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("photo.jpg") center / cover;
  opacity: 0.4;         /* 画像だけ薄くする */
  z-index: -1;
}
.hero { isolation: isolate; } /* z-index: -1 を .hero の内側に留める */

この疑似要素の例は構文の紹介で、画像ファイルを用意しての表示確認は未実行です。

透明度%と8桁HEX末尾2桁の変換早見表

8桁カラーコードの末尾2桁は、透明度（0〜100%）を 0〜255 に換算して16進数にしたものです。計算式は「255 × 透明度% ÷ 100 を四捨五入して16進数へ」です。

表の値のうち 0D・1A・33・40・4D・66・80・99・B3・BF・CC・E6・F2 は、#000000 の末尾に付けて Chromium 141 で計算後の値を確かめました（例：#00000080 → rgba(0, 0, 0, 0.5)、#0000004d → rgba(0, 0, 0, 0.3)、#000000b3 → rgba(0, 0, 0, 0.7)）。残りは同じ計算式で求めた値です。

覚えておくと便利な目安は、80 が約50%、40 が約25%、BF が約75%、CC が80%、33 が20% の5つです。JavaScript で求める場合は次の1行で計算できます。

const alphaHex = (percent) =>
  Math.round(255 * percent / 100).toString(16).padStart(2, "0");

console.log(alphaHex(50)); // "80"
console.log(alphaHex(30)); // "4d"

末尾2桁は「不透明度」なので、00 が完全に透明、FF が完全に不透明です。「透明度80%にしたい（＝ほとんど透けている）」という意味なら、不透明度は 20% で末尾は 33 になります。言葉の向きに注意してください。

transparent と currentColor の使いどころ

transparent：完全に透明な色

transparent は「透明」を表すキーワードで、計算後の値は rgba(0, 0, 0, 0) でした。 色が必要な場所に「色なし」を置きたいときに使います。

.tab {
  border-bottom: 3px solid transparent;  /* 最初から3px分の場所を取っておく */
}
.tab[aria-selected="true"] {
  border-bottom-color: tomato;           /* 色だけ変える。高さは変わらない */
}

currentColor：その要素の文字色を使う

currentColor は、その要素の color の値を指すキーワードです。 文字色を変えると、枠線やアイコンの色も一緒に変わる仕組みを作れます。

.badge {
  color: tomato;
  border: 2px solid currentColor;   /* 枠線も tomato になる */
}
.badge:hover {
  color: navy;                      /* 文字も枠線も navy に変わる */
}
.icon {
  fill: currentColor;               /* SVG アイコンを文字色に合わせる */
}

color: tomato; border: 2px solid currentColor; を指定した要素の計算後の値は、border-top-color も rgb(255, 99, 71) でした。border で色を省略した場合の初期値も currentColor なので、border: 2px solid; と書くだけでも文字色の枠線になります。

色を指定できる主なプロパティとコピペ用テンプレート

ここまでの書き方は、色を受け取るプロパティならどこでも同じように使えます。

影や区切り線は、黒に低い透明度を付ける（rgb(0 0 0 / 10%) など）と、背景色が変わってもなじみやすくなります。

色を変数にまとめておくテンプレートです。基準の色を1つ決め、濃淡と半透明は color-mix で作っています。

:root {
  /* 基準の色 */
  --brand: #ff6347;
  --text: #222222;
  --bg: #ffffff;

  /* 基準の色から作る色 */
  --brand-soft:  color-mix(in srgb, var(--brand), white 80%);        /* 薄い背景用 */
  --brand-hover: color-mix(in srgb, var(--brand), black 15%);        /* ホバー用 */
  --brand-alpha: color-mix(in srgb, var(--brand) 50%, transparent);  /* 半透明 */

  /* 影と線は黒の半透明 */
  --line:   rgb(0 0 0 / 12%);
  --shadow: rgb(0 0 0 / 20%);
}

.card {
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px var(--shadow);
}
.card .tag {
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid currentColor;
}

このテンプレートは書き方の例で、表示確認は未実行です（使っている color-mix(in srgb, 色 50%, transparent) と rgb(0 0 0 / N%)、currentColor の個々の動作は前述のとおり確認済みです）。

よくあるつまずきと直し方

実際に Chromium 141 で試して確かめた結果です。

最後の行は構文上の一般的な注意で、個別の検証は未実行です。

色が付かないときは、ブラウザの開発者ツールで該当の宣言に取り消し線や警告マークが出ていないかを見ると、無効な値かどうかがすぐに分かります。JavaScript では CSS.supports("color", "値") で有効かどうかを調べられます。

console.log(CSS.supports("color", "rgb(255 99 71 / 50%)")); // true
console.log(CSS.supports("color", "rgb(255 99 71, 0.5)"));  // false

読みやすさのためのコントラスト確認

色を決めたら、文字色と背景色の差が十分かどうかも確かめておくと、多くの人にとって読みやすいページになります。半透明の色は下にある色と混ざるため、見た目の色は重ねた結果で決まります。この記事の測定でも、rgb(255 99 71 / 50%) を白の上に置くと #ffb1a3 になりました。同じ指定でも背景が暗ければ別の色になるので、半透明の背景に文字を載せるときは、実際に重なった状態でコントラストを確認するのがおすすめです。ブラウザの開発者ツールには、要素を選ぶとコントラスト比を表示する機能があります。

よくある質問

Q. rgba() は今後使えなくなりますか？ A. 使えます。現在の仕様では rgba() は rgb() の別名として扱われ、Chromium 141 でもカンマ区切りの rgba(255, 99, 71, 0.5) と空白区切りの rgb(255 99 71 / 50%) は同じ計算結果になりました。既存のコードを書き直す必要はなく、新しく書く部分から空白区切りにしていけば十分です。

Q. 透明度は 0.5 と 50% のどちらで書けばよいですか？ A. どちらでも同じ結果です。rgb(255 99 71 / 0.5) と rgb(255 99 71 / 50%) はどちらも rgba(255, 99, 71, 0.5) になりました。チーム内でどちらかにそろえると読みやすくなります。

Q. カラーコードの大文字と小文字で違いはありますか？ A. ありません。#FF6347 と #ff6347 は同じ色です。色名や関数名も同様で、Tomato や RGB(255 99 71) も有効でした。表記はフォーマッターの設定などで統一しておくと差分が見やすくなります。

Q. hsl と oklch はどう使い分けますか？ A. 1つの色の明るさや彩度を直感的に調整したいなら hsl、複数の色を並べたときの明るさの印象をそろえたいなら oklch が向いています。どちらも最終的にはブラウザが画面の色に変換するので、扱いやすいほうを選んで構いません。

まとめ

• 色名・カラーコード・rgb・hsl・hwb は同じ色を別の表し方で書いているだけで、計算後は rgb(255, 99, 71) のようにそろう
• 透明度は rgb(R G B / 50%) か8桁カラーコードの末尾2桁で書く。80 が約50%、40 が約25%、BF が約75%
• rgba() は rgb() の別名。区切りは「全部空白＋スラッシュ」か「全部カンマ」にそろえ、混ぜない
• 背景だけ透かすなら背景色の値に透明度を入れる。 opacity は子要素まで丸ごと透ける
• color-mix() と相対色構文を使うと、変数に入った色から濃淡や半透明を作れる
• transparent は「色なし」、currentColor は「文字色と同じ」。枠線の場所取りやアイコンの色合わせに使える
• 色が付かないときは CSS.supports("color", 値) や開発者ツールで無効な値でないかを確かめる

株式会社RJCでは、CSSの色指定や透明度の扱い方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。