The CSS Podcast - 006: Color Part One
色はウェブサイトの重要な要素であり、CSS には色を指定して操作するための多くのオプションがあります。
使用する色の種類をどのように決定しますか？色を半透明にする方法を教えてください。 このレッスンでは、プロジェクトとチームにとって適切な判断を行うために利用できるオプションについて学習します。
CSS には、文字列や数値など、さまざまなデータ型があります。色はこれらのタイプの 1 つであり、独自の定義に数値などの他のタイプを使用します。
色の選択
名前付きの色
色を選択する最も簡単な方法は、CSS の 148 色のカラー名のいずれかを選択することです。これらは、purple、tomato、goldenrod などのわかりやすい名前です。ウェブ アルマナックによると、最も一般的な名前には black、white、red、blue、gray などがあります。よく使用される名前には、goldenrod、aliceblue、hotpink などがあります。
数値の色
名前付きの色は便利ですが、そのセットで使用できない特定の色を使用する必要がある場合があります。数値で色を指定する方法はいくつかあります。
16 進数色
h1 {
color: #b71540;
}
16 進数表記（「16 進数」と略されることもあります）は、RGB の省略形の構文です。3 つの原色である赤、緑、青に数値を割り当てます。
16 進数は 0 ～ 9 と A ～ F の範囲です。6 桁のシーケンスで使用すると、RGB 数値範囲（0 ～ 255）に変換され、それぞれ赤、緑、青の色チャンネルに対応します。
任意の数値の色でアルファ値を定義することもできます。アルファ値は透明度の割合です。16 進数では、6 桁のシーケンスにさらに 2 桁を追加して、8 桁のシーケンスを作成します。たとえば、黒を 16 進数コードで設定するには、#000000 と記述します。透明度を 50% にするには、#00000080 に変更します。
16 進数は 0 ～ 9 と A ～ F であるため、透明度の値は想定どおりにならない可能性があります。黒の 16 進数コード #000000 に追加される一般的な値をいくつか示します。
- アルファ 0%（完全に透明）は 00:
#00000000です。 - 50% アルファは 80:
#00000080です。 - 75% アルファ版は BF:
#000000BFです。
2 桁の 16 進数を 10 進数に変換するには、最初の桁を 16 倍し（16 進数は 16 進数であるため）、2 番目の桁を加算します。75% アルファ版の例として BF を使用します。
- B は 11 で、16 倍すると 176 になります。
- F は 15 に等しい
- 176 + 15 = 191
- アルファ値は 191（255 の 75%）です。
RGB（赤、緑、青）
h1 {
color: rgb(183 21 64);
}
RGB 色は、rgb() カラー関数で定義します。パラメータには数値またはパーセンテージを使用します。数値は 0 ～ 255 の範囲内、パーセンテージは 0 ～ 100% の範囲内で指定する必要があります。RGB は 0 ～ 255 のスケールで動作するため、255 は 100% に相当し、0 は 0% に相当します。
RGB で黒を設定するには、rgb(0 0 0) として定義します。これは、赤、緑、青がゼロの値です。黒は rgb(0% 0% 0%) として定義することもできます。白は正反対の rgb(255 255 255) または rgb(100% 100% 100%) です。
アルファは、次の 2 つの方法のいずれかで rgb() に設定されます。赤、緑、青のパラメータの後に / を追加するか、rgba() 関数を使用します。alpha は、パーセンテージまたは 0 ～ 1 の 10 進数で定義できます。たとえば、最新のブラウザで 50% のアルファ値の黒を設定するには、rgb(0 0 0 / 50%) または rgb(0 0 0 / 0.5) と記述します。
HSL（色相、彩度、明度）
h1 {
color: hsl(344 79% 40%);
}
HSL は、色相、彩度、明度の略です。hue は、赤（0 と 360 の両方）から始まる、色相環上の値（0 ～ 360 度）を表します。色相 180（50%）は青色の範囲内です。これが、目に見える色の起源です。
彩度は、選択した色相の鮮やかさを表します。彩度が完全に下がった色（彩度 0%）はグレースケールで表示されます。最後に、lightness は、追加された光の白から黒までのスケールを表すパラメータです。明るさが 100% の場合、常に白になります。
hsl() 色関数を使用して、hsl(0 0% 0%) または hsl(0deg 0% 0%) を記述することで、真の黒を定義します。これは、hue パラメータが色相環上の度数を定義するためです。数値型を使用する場合、この値は 0 ～ 360 です。角度タイプ（0deg）または (0turn) を使用することもできます。彩度と明るさはどちらもパーセンテージで定義されます。
アルファは hsl() で定義されます。rgb() と同様に、色相、彩度、明るさのパラメータの後に / を追加するか、hsla() 関数を使用します。alpha は、パーセンテージまたは 0 ～ 1 の 10 進数で定義できます。たとえば、50% のアルファ黒を設定するには、hsl(0 0% 0% / 50%) または hsl(0 0% 0% / 0.5) を使用します。hsla() 関数を使用して、hsla(0, 0%, 0%, 50%) または hsla(0, 0%, 0%, 0.5) を記述します。
高画質の色
RGB と HSL は、sRGB 色域内の色を定義します。新しいモニターは、これらの形式で記述できる色や sRGB 色域外の色をサポートしています。これらの色は、さまざまな CSS 関数を使用して選択できます。
color() 関数
h1 {
color: color(srgb 0.9 0.2 0.4);
}
CSS の color() 関数を使用すると、特定の色空間で色を選択できます。最初の引数は使用するカラースペースで、次のチャネルのオプションを定義します。rgb() と同様に、/ の後に 0～1 の数値または割合を設定することで、アルファ チャンネルを設定できます。
たとえば、前のコード スニペットの暗い赤色の RGB は rgb(183 21 64) として定義されていますが、パーセンテージで rgb(72% 8% 25%) として定義することもできます。color() 関数と srgb キーワードを使用して、color(srgb .72 .08 .25) と同じ色を指定できます。
srgb は色空間を設定し、次の 3 つの引数が赤、緑、青であることを示します。値は 0～255 ではなく、0～1 になります。
rgb() と同様に、/ とパーセンテージ、または 0～1 の範囲内の小数でアルファを設定できます。
color() 関数で使用できるカラースペースは多数あり、それぞれに長所とユースケースが異なります。
ディスプレイ P3
h1 {
color: color(display-p3 0.9 0.2 0.4);
}
Display P3 の色域は sRGB の 50% 以上です。color() 関数を使用して、Display P3 色空間で Display P3 色域内のすべての色を指定できます。
Display P3 で黒を設定するには、color(display-p3 0 0 0) として定義します。color() 関数に display-p3 色空間を指定すると、color(srgb) と同様に、赤、緑、青の 3 つのチャネルが作成されます。ただし、チャンネル値はより広い色空間内の座標を表すため、同じチャンネル値でも意味が異なります。
color(srgb 1 .5 0) は color(display-p3 0.93596 0.52724 0.1983) と同等のオレンジ色です。オレンジを sRGB 空間から color(display-p3 1 .5 0) に拡張すると、より鮮やかなオレンジにできます。
Oklab
Oklab は、Lightness、a、b のチャンネルを持つ oklab() 関数で定義されます。色相と明るさを維持しながら、滑らかなグラデーションを作成したり、色の彩度を調整したりするのに便利です。
h1 {
color: oklab(75% 0.1 0.1)
}
明るさチャネルは 0 から 1 に、または 0% から 100% に変わります。明るさが 0 の色は常に黒になります。
a チャネルが -0.4 から 0.4 に移動するか、0% から 100% に移動します。値が小さいほど緑色が濃くなり、値が大きいほど赤色が濃くなります。
b チャネルが -0.4 から 0.4 に移動するか、0% から 100% に移動します。値が小さいほど青色が強くなり、値が大きいほど黄色が強くなります。
OkLCh
OkLCh は OKLab の極座標または円筒座標形式で、明度、彩度、色相のチャネルで定義されます。知覚的に均一な方法で色を調整する場合に役立ちます。つまり、色相を変更しても、色の明るさや彩度には影響しません。
h1 {
color: oklch(80% 0.1 200)
}
HSL では明度と色相を扱いましたが、彩度は彩度に似ています。黒は oklch(0 0 0)、白は oklch(1 0 0) で設定できます。
明るさチャネルは 0 から 1 に、または 0% から 100% に変わります。明るさが 0 の色は常に黒になります。
彩度チャネルは色の鮮やかさを設定します。0 または 0% は彩度が低く、値が大きいほど色が濃くなります。値 100% は .4 と同じですが、.4 に近い値ではすぐに色域外に出てしまう可能性があります。
色相は、hsl() と同様に度数で指定します。
OkLCh は Display P3 のような色域に制限されていないため、表示可能な色を作成する必要があります。oklch(80% 50% 200) は、数値的には妥当な色に見えますが、Display P3 の色域外にある明るい青色です。
その他のスペース
CSS で色を指定する方法はたくさんありますが、すべてを学ぶ必要はありません。rgb() 形式と 16 進数形式は、設計ツールと既存のコードでよく使用されるため、知っておく必要があります。予測可能な方法で操作できる形式に慣れることも役に立ちます。hsl 値または oklch 値を直接変更して、結果の色を把握できます。
詳しくは、より多くの色と新しいスペースにアクセスするをご覧ください。
システムカラー
紫やターコイズなどの名前付きの色に加えて、次の特別なキーワードも使用できます。
transparentは完全に透明な色です。これはbackground-colorの初期値でもあります。currentColorは、colorプロパティのコンテキストに基づいて計算された動的値です。テキストの色がredで、border-colorをcurrentColorに設定すると、border-colorもredになります。currentColorを定義する要素に色の値が定義されていない場合、currentColorは代わりにカスケードによって計算されます。
色の操作
サイトに使用する色のパレットがある場合でも、ホバー状態、境界線、その他の UI 要素にこれらの色のバリエーションが必要になることがあります。各色を指定することもできますが、CSS には、色を変換してこれらのバリエーションを作成する方法もあります。
color-mix()
2 色を混ぜた結果を使用するには、color-mix() メソッドを使用します。これは、色を白または黒と混ぜて、明るい色や暗い色のバリエーションを作成する場合に便利です。
color-mix() を使用するには、2 つの色、混合方法（補間方法）、各色の割合を定義する必要があります。
色相を持つ色空間の場合は、色相環のどの方向に移動するかも指定できます。デフォルトは shorter パスですが、longer、increasing、decreasing を選択することもできます。
色空間と方向を合わせたものが補間方法です。
混合する各色の量を指定することもできます。
相対色の構文
相対色構文を使用して、色をより直接操作することもできます。これにより、任意の色を取り、その色に対して計算を実行して新しい色を作成できます。
h1 {
color: oklch(from red l c h);
}
oklch() 関数を使用すると、明度、彩度、色相の各チャネルを操作できます。キーワード from の後に、任意の色を任意の構文で指定できます。これにより、文字として使用する各チャネル値が得られます。調整なしで赤色になります。
調整するには、calc() 関数を使用してチャネル値を変更するか、チャネルを完全に置き換えます。ここでは、同じ red 色を使用しますが、oklch(62% 0.25 29) で定義します。
h1 {
color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}
明るさチャネルは 62% / 2 または 31% です。クロマチャネルは変更されていないため、0.25 です。色相チャンネルは 180 です。これにより、新しい色 oklch(31% 0.25 180)（新しい濃い緑色）が作成されます。
入力色としてカスタム プロパティを使用することが多いでしょう。これにより、色のバリエーションを動的に作成できます。
これは任意のカラー関数で行うことができます。変更内容を記述するチャネルを持つカラー関数を使用すると便利です。たとえば、色の明るさを調整する場合は、明るさチャネルを直接変更できるため、oklch または hsl を選択します。
h1 {
color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}
相対色構文（RCS）を使用すると、サイトに使用する色のパレットを作成できます。
色域外の色
コンテンツはさまざまな画面に表示されますが、その画面が広色域をサポートしているかどうかは異なります。画面でサポートされていない色を指定すると、色域マッピングと呼ばれるプロセスが実行され、画面に表示できる類似の色が検索されます。このような場合に特定の色を定義するには、color-gamut メディアクエリを使用します。
CSS ルールで色を使用する場所
CSS プロパティが <color> データ型を値として受け入れる場合、前述の色の表現方法のいずれかを使用できます。テキストにスタイルを設定するには、color、text-shadow、text-decoration-color プロパティを使用します。これらのプロパティはすべて、値として色または値の一部として色を受け入れます。
背景の場合は、background または background-color の値として色を設定できます。色は、linear-gradient などのグラデーションでも使用できます。グラデーションとは、CSS でプログラムによって定義できる画像の一種です。グラデーションには、16 進数、RGB、HSL など、任意の色形式の 2 つ以上の色を指定できます。
最後に、border-color と outline-color で、ボックスの枠線とアウトラインの色を設定します。box-shadow プロパティでは、色も値の 1 つとして指定できます。
理解度を確認する
色に関する知識をテストする
次のうち、有効な色はどれですか。
rbga(400 0 1)#0f08#OOFZ2rgb(255, 0, 0)hsl(180deg 50% 50%)hotpink無効な hsl 色を見つけます。
hsl(5, 0%, 90%)hsl(.5turn 40% 60%)hsl(0, 0, 0)hsl(2rad 50% 50%)hsl(0 0% 0% / 20%)