labを使いこなして、表現力豊かなデザインを！

CSSのその他の色値: lab

lab の仕組み

labは、3つの値で構成されます。

• L: 明度 (Lightness) - 0 (暗) から 100 (明) までの値
• a: 赤緑 (Red-Green) - -128 (緑) から 127 (赤) までの値
• b: 黄青 (Yellow-Blue) - -128 (青) から 127 (黄) までの値

これらの値は、人間の視覚体系に基づいており、人間の目にどのように見えるかを反映しています。

lab の利点

labを使用する利点は、以下のとおりです。

• デバイス間の色の一貫性: デバイスや照明条件に関係なく、同じ色を再現することができます。
• 広い色域: sRGBやAdobe RGBなどの従来の色空間よりも広い色域を表現できます。
• 色の操作がしやすい: L、a、bの各値を個別に調整することで、色を簡単に操作することができます。

lab の使い方

labを使用するには、colorプロパティに以下の形式で値を指定します。

color: lab(L, a, b);

例えば、明度が50、赤緑が10、黄青が20の色を指定するには、以下のコードを使用します。

color: lab(50, 10, 20);

lab の注意点

labは比較的新しい色空間であり、すべてのブラウザでサポートされているわけではありません。現時点で、labをサポートしている主要なブラウザは以下のとおりです。

• Chrome
• Firefox
• Safari
• Edge

また、labはデバイスによって異なる方法で表示される可能性があります。これは、デバイスのディスプレイの特性によって、色の再現方法が異なるためです。

labは、デバイスや照明条件に関係なく、一貫した色表現を実現できる新しい色空間です。まだすべてのブラウザでサポートされているわけではありませんが、将来的には広く利用されるようになる可能性があります。

lab を使ったサンプルコード

基本的な色

/* 白 */
color: lab(100, 0, 0);

/* 黒 */
color: lab(0, 0, 0);

/* 赤 */
color: lab(50, 127, 0);

/* 緑 */
color: lab(50, -128, 0);

/* 青 */
color: lab(50, 0, -128);

/* 黄色 */
color: lab(50, 127, 127);

中間色

/* ピンク */
color: lab(50, 127, 50);

/* オレンジ */
color: lab(50, 127, 25);

/* 紫 */
color: lab(50, 127, -50);

/* 水色 */
color: lab(50, -128, 50);

/* 黄緑 */
color: lab(50, -128, 25);

/* 青紫 */
color: lab(50, -128, -50);

グレー

/* 明るいグレー */
color: lab(80, 0, 0);

/* 中間のグレー */
color: lab(50, 0, 0);

/* 暗いグレー */
color: lab(20, 0, 0);

彩度

/* 彩度の高い赤 */
color: lab(50, 127, 0);

/* 彩度の低い赤 */
color: lab(50, 63, 0);

/* 彩度のない赤 (グレー) */
color: lab(50, 0, 0);

明度

/* 明るい赤 */
color: lab(80, 127, 0);

/* 中間の赤 */
color: lab(50, 127, 0);

/* 暗い赤 */
color: lab(20, 127, 0);

色の変換

labと他の色空間の間で変換を行うツールやライブラリがいくつか存在します。例えば、以下のツールを使用することができます。

ブラウザのサポート

labは比較的新しい色空間であり、すべてのブラウザでサポートされているわけではありません。現時点で、labをサポートしている主要なブラウザは以下のとおりです。

labは、デバイスや照明条件に関係なく、一貫した色表現を実現できる新しい色空間です。まだすべてのブラウザでサポートされているわけではありませんが、将来的には広く利用されるようになる可能性があります。

CSSで色を指定するその他の方法

カラーネーム

あらかじめ定義されているカラーネームを使用することができます。例えば、以下のコードは、文字色を赤に設定します。

color: red;

カラーネームの一覧は、以下のサイトなどで確認することができます。

16進数コードを使用して、色を指定することができます。16進数コードは、#記号の後に6桁の数字を続けます。数字は、0から9とAからFまでの16文字を使用します。

例えば、以下のコードは、文字色を青に設定します。

color: #0000ff;

16進数コードの色見本は、以下のサイトなどで確認することができます。

RGBは、Red、Green、Blueの3つの光の強さを指定して色を表現する方法です。各色の強さは、0から255までの整数で指定します。

例えば、以下のコードは、文字色を緑に設定します。

color: rgb(0, 255, 0);

RGBの色見本は、以下のサイトなどで確認することができます。

RGBAは、RGBに透明度を加えて色を表現する方法です。透明度は、0から1までの数値で指定します。0は完全に透明で、1は完全に不透明です。

例えば、以下のコードは、文字色を半透明の緑に設定します。

color: rgba(0, 255, 0, 0.5);

RGBAの色見本は、以下のサイトなどで確認することができます。

HSLは、Hue、Saturation、Lightnessの3つの要素で色を表現する方法です。

• Hue: 色相 - 0から360までの度数で指定します。0度は赤、120度は緑、240度は青、360度は再び赤となります。
• Saturation: 彩度 - 0から1までの数値で指定します。0は彩度がなく、1は彩度が最大になります。
• Lightness: 明度 - 0から1までの数値で指定します。0は黒、1は白になります。

例えば、以下のコードは、文字色を青緑に設定します。

color: hsl(180, 100%, 50%);

HSLの色見本は、以下のサイトなどで確認することができます。

HSLAは、HSLに透明度を加えて色を表現する方法です。透明度は、0から1までの数値で指定します。0は完全に透明で、1は完全に不透明です。

例えば、以下のコードは、文字色を半透明の青緑に設定します。

color: hsla(180, 100%, 50%, 0.5);

HSLAの色見本は、以下のサイトなどで確認することができます。

CSSで色を指定する方法はいくつかあります。それぞれの方法にはメリットとデメリットがあり、目的に合わせて使い分けることが重要です。