実行できるCSSドキュメント: CSS 色指定

Q: CSS ではどんな色の形式が使えますか？

色の名前 (red)、16 進数 (#ff0000)、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()、そしてキーワードの transparent と currentColor です。日常的な作業のほとんどは 16 進数、rgb、hsl で足ります。

Q: rgb と rgba の違いは何ですか？

今はありません。rgba() は古い別名です。現在の CSS では rgb() にアルファ値を指定でき (rgb(37 99 235 / 50%))、現在のすべてのブラウザで 2 つの関数は同じ引数を受け付けます。

Q: CSS で色を透明にするには？

アルファチャンネルを付けます: rgb(0 0 0 / 50%)、hsl(221 83% 53% / 0.5)、または #2563eb80 のような 8 桁の 16 進数です。opacity と違い、要素全体ではなくその色だけが薄くなります。

Q: currentColor とは何ですか？

要素の color プロパティの値です。枠線や SVG の塗りに使うと、自動的に文字色に追従します。

CSS で色を書く方法

色を受け取るプロパティ (color、background-color、border-color、影、SVG の fill) はどれも同じ形式を受け付けます。最初の 4 つの見本は同じ青を 4 通りに書いたもので、5 つ目はそれに近い色の名前です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

形式	例	向いている用途
色の名前	`tomato`, `rebeccapurple`	手早いテストや試作
16 進数	`#2563eb`, `#25e`	デザインツールからのコピー
`rgb()`	`rgb(37 99 235)`	透明度を加えるとき、RGB の値から作業するとき
`hsl()`	`hsl(221 83% 53%)`	1 つの色の濃淡を作るとき
`oklch()`	`oklch(55% 0.2 262)`	見た目の明るさがそろったパレット
キーワード	`transparent`, `currentColor`	下のセクションを参照

16 進数の色

16 進数の色は、# の後に赤、緑、青をそれぞれ 00 から ff までの 2 桁の 16 進数で書いたものです。省略形と拡張形が 3 つあります:

#rgb: 各桁が 2 つに重なるので、#25e は #2255ee です。
#rrggbbaa: 最後の 2 桁がアルファなので、#2563eb80 は約 50% の不透明度です。
#rgba: アルファ付きの省略形です。

16 進数は大文字と小文字を区別しません。#2563EB と #2563eb は同じ色です。

rgb() と rgba()

rgb() は赤、緑、青を 0 から 255 (または 0% から 100%) で受け取ります。スラッシュの後の 4 つ目の値は省略可能なアルファで、0 (見えない) から 1、または 0% から 100% です。

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() と rgb() は今では同じ関数です。どちらも両方の書き方と省略可能なアルファを受け付けます。古いコードは透明度が必要なときに rgba() を使っていますが、それも動き続けます。

hsl(): いちばん調整しやすい形式

hsl() は人が考えるのと同じ方法で色を表します。色相環の色相、彩度、明度です。色相を固定して明度を変えれば、一連の段階ができます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

1 行目は色相 221 と彩度 83% を固定し、明度だけを変えています。2 行目は同じ彩度と明度で色相環を一周しています。

透明度: アルファと opacity

アルファチャンネルは 1 つの色を透けさせます。opacity はテキストや子要素も含めて要素全体を透けさせます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent は完全に透明な黒 rgb(0 0 0 / 0) を表すキーワードです。ほとんどの要素の背景の初期値です。

currentColor

currentColor は要素自身の color と等しくなります。枠線、アイコン、テキストのすべてにこれを使ったボタンなら、1 つの宣言ですべてが変わります:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

枠線の色はもともと currentColor が初期値です。色を書かない border: 2px solid がテキストと同じ色になるのはこのためです。

どんな色でも試してみる

どの形式でも色を入力してみてください。ブラウザが解析して計算結果を表示します。無効な色なら見本は変わりません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

tomato、#0f0、#2563eb80、rgb(0 0 0 / 25%)、oklch(70% 0.15 150)、color-mix(in srgb, #2563eb, white 50%) を試してみてください。

新しい色の関数

oklch(L C H): 明度、彩度 (クロマ)、色相を、同じ明度なら同じ明るさに見えるよう設計された色空間で表します。これで作ったパレットは、HSL で作ったものより中間の段階が濁りにくくなります。
color-mix(in srgb, A, B 30%): 2 つの色を混ぜます。white や black と混ぜれば 1 つのブランドカラーから明るい色や暗い色を作れ、CSS 変数とも組み合わせられます: color-mix(in srgb, var(--brand), white 80%)。

どちらも現在の Chrome、Firefox、Safari で動きます。選んだ形式を 1 か所で管理できるよう、ブランドカラーは CSS 変数にしておきましょう。

よくある間違い

16 進数の色に # を付け忘れる。 color: 2563eb は無効で無視されます。
背景を透明にするのに opacity を使う。 テキストも薄くなります。アルファ付きの色を使いましょう。
新しい書き方で区切り文字を混ぜる。 rgb(37 99, 235) は無効です。すべてスペースか、すべてカンマにしましょう。
色の名前がデザインと一致すると思う。 royalblue は #2563eb ではありません。正確なコードをコピーしましょう。
コントラストを目で判断する。 文字色と背景の組み合わせはコントラストチェッカーで確認しましょう。本文には 4.5:1 が最低ラインです。

よくある質問

CSS ではどんな色の形式が使えますか？

色の名前 (red)、16 進数 (#ff0000)、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()、そしてキーワードの transparent と currentColor です。日常的な作業のほとんどは 16 進数、rgb、hsl で足ります。