CSS で色を指定する方法は多岐にわたります。単純なキーワードや 16 進数での指定だけでなく、関数や相対指定など、柔軟な方法が提供されています。
この記事では、CSS のさまざまな色指定方法について、基本的な記述方法を解説します。特に、最後に紹介するfromを使用した指定方法は、多彩な色を使うデザインやダークモードの実装時に非常に有用です。
目次
16 進数での指定
おそらく最も馴染みがある 16 進数での指定です。16 進数を使った色指定は、#RRGGBBの形式で行います。省略形として#RGBも使用可能です。また、アルファ値（透明度）を含めた#RRGGBBAAや、その省略形である#RGBAでの指定も可能です。
background: #FF0000;
background: #F00; /* #FF0000 と同じ */
/* アルファ値も含めた指定 */
background: #FF000080; /* rgb(255 0 0 / 0.5) と同じ */
background: #F00A; /* #FF0000AA と同じ */色名キーワードでの指定
CSS には、redやblueのような色名のキーワードが用意されており、それを使って色を指定することができます。このキーワードには、transparentやcurrentcolorなどの特殊なキーワードも含まれます。
background: red; /* #FF0000 と同じ */
background: blue; /* #0000FF と同じ */
background: transparent; /* rgb(0 0 0 / 0%) と同じ */
background: currentcolor; /* color の値と同じ */「currentcolor」とは
currentcolorは、colorプロパティ（文字色）の値と同じ値を表します。このcurrentcolorは、複数のカラーバリエーションがあるコンポーネントで SVG アイコンの色を文字色に合わせたい場面などで役立ちます。
body {
color: #333333;
}
h3.information svg {
fill: currentcolor; /* fill の色を文字色と同じにする */
}
/* カラーバリエーション：青 */
h3.information.blue {
color: #0B57D0;
}
/* カラーバリエーション：緑 */
h3.information.green {
color: #06C755;
}See the Pen CSS Color Notation Guide Sample by YUTSUZO (@YUTSUZO) on CodePen.
colorの変更だけで、SVG アイコンの色まで変わっているのが確認できます。
キーワードで使用できる色の数は 150 種以上
キーワードとして使用できる色の名前は、馴染みのあるredやblue、yellowなどの他にも、150 種類ほどあります。詳しくは、以下のリンクをご参照ください。
<named-color> - CSS: カスケーディングスタイルシート | MDN
rgb() などの関数を使用した指定
rgb()やrgba()は、赤（R）・緑（G）・青（B）の値を指定する関数です。値はスペース区切りとカンマ区切りでの記述が可能ですが、現在はカンマ区切りの記述はレガシー構文とされているため、スペース区切りで記述するのが無難です。また、アルファ値を付け足したい場合も、スペース区切りで記述してあれば、rgb()をrgba()に変更する手間が省けます。
background: rgb(255 0 0); /* #FF0000 と同じ */
/* アルファ値も含めた指定 */
background: rgb(255 0 0 / 0.5); /* #FF000080 と同じ */
background: rgba(255 0 0 / 0.5); /* #FF000080 と同じ */
/* 現在はレガシー構文とされている書き方 */
background: rgb(255, 0, 0); /* #FF0000 と同じ */
background: rgba(255, 0, 0, 0.5); /* #FF000080 と同じ */rgb() 以外の色空間での指定も可能
赤・緑・青の指定だけではなく、hsl() 関数では色相・彩度・明度での色指定、hwb()関数では色相・黒さ・白さでの色指定など、様々な色空間での色指定が可能です。詳しくは、以下のリンクをご参照ください。
<color> - CSS: カスケーディングスタイルシート | MDN
from キーワードを使用した相対指定
CSS Color Module Level 5 で導入されたfromキーワードを使うことで、既存の色を元にした相対的な色指定が可能になりました。このfromキーワードを使うと以下のような色の指定が可能になります。
既存の色にアルファ値をかける
fromを使用すると、既存の色にアルファ値を掛けた色の指定が可能です。
:root {
--bg-color: #DDEEFF; /* rgb(221 238 255) と同じ */
}
body {
/* #DDEEFF にアルファ値 0.5 を掛けた色を背景色に指定 */
background: rgb(from var(--bg-color) r g b / 0.5); /* rgb(221 238 255 / 0.5) と同じ */
}既存の色の特定の成分のみ変更する
fromは、既存の色から特定の成分のみを変更した色を作り出すことも可能です。例えば、以下の例では#DDEEFFの赤チャンネルの値のみを変更した色が得られます。
:root {
--bg-color: #DDEEFF; /* rgb(221 238 255) と同じ */
}
body {
/* #DDEEFF の赤チャンネルの割合を変更した色を背景色に指定 */
background: rgb(from var(--bg-color) 128 g b); /* rgb(128 238 255) と同じ */
}既存の色の RGB を入れ替える
また、r g bは入れ替えも可能です。
:root {
--bg-color: #DDEEFF; /* rgb(221 238 255) と同じ */
}
body {
/* #DDEEFF の色成分を RGB から BRG に入れ替えた色を背景色に指定 */
background: rgb(from var(--bg-color) b r g); /* rgb(255 221 238) と同じ */
}既存の色と同じ彩度・明度の色を作る
そして、fromが使用できるのはrgb()関数だけではありません。その他の CSS 色関数「hsl()」などでも使用することができます。
hsl() 関数は色相（H）・彩度（S）・明度（L）での色指定のため、色相（H）のみを変えて、彩度と明度が同じ別の色を作成するといったことも可能です。
:root {
--bg-color: #FFDDDD;
}
.h-0 { background: hsl(from var(--bg-color) h s l); }
.h-60 { background: hsl(from var(--bg-color) 60 s l); }
.h-120 { background: hsl(from var(--bg-color) 120 s l); }
.h-180 { background: hsl(from var(--bg-color) 180 s l); }
.h-240 { background: hsl(from var(--bg-color) 240 s l); }
.h-300 { background: hsl(from var(--bg-color) 300 s l); }See the Pen CSS Color Notation Guide Sample 02 by YUTSUZO (@YUTSUZO) on CodePen.
これにより、既存の色に対して柔軟な調整が可能になります。
終わりに
CSS の色指定は多様であり、使い分けることでメンテナンス性やデザインの柔軟性が向上します。ぜひ、さまざまな方法を試してみてください。
