別の色のチャネルと値に基づいて新しい色を作成します。
Chrome 119 は、CSS Color Level 5 の非常に強力なカラー機能です。相対色の構文 CSS 内での色操作のスムーズなパスを作成し、 作成者やデザイナーができること:
- Lighten
- 暗く
- 彩度
- 彩度を下げる
- クロマブースト
- 不透明度を調整
- 反転
- 補完
- 変換
- コントラスト
- カラーパレット
<ph type="x-smartling-placeholder">
- </ph>
- モノクロ
- 類似
- 3 行
- テラディック
- モノクロ（色相回転あり）
相対色の構文を使用する前、色の不透明度を変更するには、以下を行う必要があります。 色のチャネル（通常は HSL）のカスタム プロパティを作成して、 最終的な色と最終的なバリエーションの 色に変換されますつまり すぐに負担になる可能性があります。
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
相対色の構文の後、任意の色空間でブランドカラーを作成できます。 はるかに少ないコードで半透明のバリアントを作成できます。です。 スタイルとシステムの意図が読みやすくなります。
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
この投稿では、構文を学習し、一般的な色操作の方法を紹介します。
動画を好む場合は、以下の記事のほとんどすべてをこの GUI チャレンジで取り上げています。
構文の概要
相対カラー構文の目標は、別の色から色を取得できるようにすることです。
指定します。ベースカラーは元の色と呼ばれます
新しい from キーワードの後に配置します。ブラウザは
変換して元の色を分割し
新しい色の定義で使用する変数として使用します。
上の図は、元の色 green が
新しい色の色空間
r、g、b、alpha で表される個別の数値に変換しました
変数であり、新しい rgb() 色の値として直接使用されます。
この画像は内訳、プロセス、変数を示していますが、 色を変更します。変数は変更されることなく色に戻されるため、 緑のままになります
from キーワード
構文の最初の部分を学習して、from <color> を
色を指定しています。これは、値を指定する直前です。コード
追加されたのは、値の直前の from green だけの例
rgb() の指定。
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
この from キーワードは、関数表記の最初のパラメータにすると、
色の定義を相対色に変換します。from キーワードの後に CSS
が期待する色です。つまり、次の色に影響を与える色です。
色変換
簡単に言うと、緑色を g と b のチャンネルに変換し、新しい 指定します。
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
カスタム プロパティの色
rgb from green はとても明確で理解しやすいです。これが
カスタム プロパティと相対色の構文を使用すると、非常に一致しやすくなります。なぜなら、
from の色からミステリーを取り除きます。また、通常は
カスタム プロパティの色の形式については、
お好みの書式で色を付けます
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
好みの色空間で作業する
色空間は、機能的な色表記を使って選択できます。
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
相対色の構文には、変換ステップがあります。from の後の色:
相対パスの先頭で指定された色空間に変換
指定します。入力と出力を一致させる必要がないため、自由度が高いです。
色空間を選択できる機能も充実しています。色を選択できるので、 宇宙は色交差のタイプに重点が置かれる傾向があります。 選択します。色形式やチャネルではなく、結果に基づいて設定されます。 できます。これについては、ユースケースを紹介するセクションで明確に説明します。 色空間ごとに異なるタスクに優れています。
変数を組み合わせる、照合する、省略する、繰り返す
この構文にはおかしな点があります。変数を 繰り返すことができます。
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
変数としての不透明度
この構文では、不透明度を alpha という名前の変数として指定します。入力は任意です。
関数色表記の / の後に配置します。
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
変数に calc() などの CSS 関数を使用する
これまで、緑色を何度も作成してきました。学習 構文を理解して、変換と分解の手順について理解を深めましょう。現在 時間を要します。出力の内容が、実際の結果と変わらないように 表示されます。
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
ネイビーになりました！色相を 2 倍にし、色相 120 を
240、完全に色を変更します。これにより、色に沿って色相が回転しました。
ホイール（円柱の色空間）で非常に簡単に
HSLなど
HWB、
LCH、
OKLCH。
チャネルの値を視覚的に把握できるため、推測したり、仕様を覚えたりしなくても、正確に計算することができます。こちらの相対カラー構文のチャネル値ツールをお試しください。指定した構文に基づいて各チャネルの値が表示されるため、使用できる値を正確に把握できます。
ブラウザのサポートを確認する
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
ユースケースとデモ
以下の例とユースケースには、代替の構文が多数あります。 同じ結果になりますバリエーションは色空間と 提供します
また、多くの例では、by と
to。色の変更 by は相対的な色の変化です。「terraform destroy」
変数の値を取得し、その現在の値に基づいて調整を行います。
色の変化 to は絶対色の変化です。属性を使用しない変更の場合、
まったく新しい値を指定します。
すべてのデモは、こちらの Codepen コレクションにあります。
色を明るくする
OKLCH、OKLAB XYZ または sRGB 色空間は、 予測しやすい結果が得られます
一定のライトアップ
次の .lighten-by-25 の例は、色 blue を取得して、
OKLCH では、次を乗算して l（明度）チャンネルを増やし、青色を明るくします。
現在の値を 1.25 で削除します。これにより、青色の明るさが 25% 白色に押し下げられます。
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
特定の値まで明るくする
次の .lighten-to-75 の例では、l チャネルを使用していません。
blue を軽量化し、代わりに値を 75% に完全に置き換えます。
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
色を暗くする
明るさの調整に効果的な同じ色空間は、 暗くなります。
一定量暗く
次の .darken-by-25 の例では、色を青にして、
OKLCH で、l（明度）チャンネルを 25% 下げて青色を暗くします。
その値に .75 を掛けます。これにより、青色が黒色に 25% 押し寄せます。
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
指定した値まで暗くする
次の .darken-to-25 の例では、l チャンネルを使用して暗くしていません。
blue の代わりに、値を 25% に完全に置き換えます。
.darken-to-25 {
background: oklch(from blue 25% c h);
}
彩度を上げる
一定量の飽和状態
次の .saturate-by-50 の例では、hsl() の s を使用して値を増やします。
相対的な 50% ごとの orchid のバイブレーション。
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
特定の量まで飽和させる
次の .saturate-to-100 の例では、s チャネルを使用しません。
hsl() の代わりに目的の彩度値を指定します。この例では
彩度が 100% に引き上げられました。
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
色の彩度を低くする
彩度を一定にする
次の .desaturate-by-half の例では、hsl() の s を使用して値を減らしています。
indigoの彩度を半分にします
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
特定の値に彩度を下げる
飽和度を下げずに、特定の目的の値に
あります。次の .desaturate-to-25 の例では、以下に基づいて新しい色を作成します。
indigo ですが、彩度は 25% に設定します。
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
クロマブースト カラー
この効果は色の彩度と似ていますが、次の点で異なります。
できます。まず、これは saturation ではなく chroma の変更です。
ハイ ダイナミック レンジにブーストできる色空間は、
飽和度は低くなりますchroma を特徴とする色空間はハイ ダイナミック レンジです
彩度よりも鮮やかな色彩を
実現できることです
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
色の不透明度を調整する
半透明の色を作ることは、最も一般的な色の 1 つです。 行いましたこのコースの冒頭にある例をご覧ください。 記事を見逃している場合は、問題領域を非常に詳しく説明しています。
不透明度を数値で調整する
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
不透明度を指定した値に調整する
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
色を反転する
色反転は、カラー ライブラリにある一般的な色調整関数です。 色を RGB に変換してから、それぞれの色を 1 から設定します。
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
色を引き立たせる
色を反転させることではなく、色を補完することが目標ならば、色相
求めているはずです。最適な選択を提供できる色空間を選びます
hue を角度で指定してから、calc() を使用して必要なだけ色相を回転させます。
色の補数を求めるには、0.5 回転します。この場合は、
h チャネルに対して 180 を加算または減算すると、結果が得られます。
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
コントラストを付ける
使用可能な色のコントラスト比を実現する方法として、L&midast の使用を検討してください。（Lstar）。
これには、
LCH と OKLCH（calc()）。目標が低、中、高のいずれであるかによって異なる
対照的な、L*デルタは約 40、約 50、または約 60 です。
この手法は、LCH や OKLCH のどの色相でも適切に機能します。
コントラストを暗くする
.well-contrasting-darker-color クラスは、デルタ 60 の L* を示しています。
元の色は暗い色（低値の明度）であるため、60%（0.6）が追加されます。
これを明度チャンネルに差し込みますこの手法を使用して
明るい背景の上に同じ色相、暗いテキスト色にします
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
明るい色にコントラストをつける
.well-contrasting-lighter-color クラスは、L* を 60% のデルタで示しています。
できます。元の色は明るい色（明度の高い値）であるため、.60 は
減算されます。
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
カラー パレット
相対色の構文は、カラーパレットの作成に非常に適しています。特に 色空間が豊富なため便利で強力です。次の 明度チャンネルは信頼性に優れ、色相も信頼できるため、すべての例で OKLCH を使用しています。 副作用なしでチャネルを回転できます。最後の例は、 明るさと色相の回転の調整を組み合わせて 結果です。
これらのサンプル ソースコードを開き、--base-color を次のように変更してみます。
パレットがいかにダイナミックかを楽しい！
動画が気に入ったら、OKLCH を使用して CSS でカラーパレットを作成する方法を YouTube で詳しく解説しています。
モノクロのパレット
モノクロのパレットを作成するには、すべて同じ色相でパレットを作成しますが、 明るさと暗さにバリエーションを持たせています。中央の色はソースカラーです パレットに 2 つの明るいバリエーションと 2 つの暗いバリエーションが配置されています。 あります。
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
相対色の構文と OKLCH で作成された多数のパレットをお試しください
Open Props は、無料の CSS 変数のライブラリです。 カラーパレットが用意されており、 インポートします。これらはすべてカスタマイズできる色で構築されているため 色を変えると、パレットが吐き出される！
類似パレット
OKLCH と HSL では色相回転がとても簡単なので、画像の作成も簡単です。 類似のカラーパレットを使用できます。 お好みの程度で色相を回転させ、ベースカラーを変更します。 ブラウザで新しいパレットが作成される様子をご覧ください。
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
三角形パレット
補色と同様に、トライアディック カラーパレット
ベースカラーが与えられているため、反対でも調和の取れた色相回転になります。ここで
補色は、直線のように色の反対側にあります。
色相環の中央に描画されるため、トライアディック パレットは
基本色から均等に回転した 2 色を見つける、線からなる三角形。
これを行うには、色相 120deg を回転させます。
これは色理論を少し単純化したものですが、 より複雑な 3 次元パレットに 取り掛かってください
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
4 次元パレット
4 次元のパレットは、色相環の周りで均等に分割された 4 色です。 明確な支配的な値のないパレットこれについて検討することもできます 組み合わせることも可能です。適切に使用すれば、非常に意味のあるものになる可能性があります。
これは色理論を少し単純化したものですが、 より複雑な四辺形パレットから始めます。
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
わずかに回転するモノクロ
色々な専門家が、このコツを隠し続けています。問題は、 モノクロのカラースケールではこれを解決するには、 明度の変化に合わせて、新しいカラーごとにマイナーまたはメジャー カラーの色相の回転を加えます。
次の例では、見本ごとに明度を 10% 下げ、さらに回転も行います 色相を 10 度変更します。その結果、色合いはホットピンクからインディゴに見え、 グラデーションのようにシームレスに融合します
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
OKLCH と色相回転で構築されたリーダーボードをお試しください
次のリーダーボード インターフェースでは、この色相の回転方法を使用しています。各リスト
item は、ドキュメント内のそのインデックスを --i という変数として追跡します。このインデックスは
色相、明度、色相も調整できます調整が 5% または
5deg は、上のディープピンクの例よりもはるかに微妙なので、
リーダーボードにこのような色合いが
ある理由に注目してください
優雅さ。
リーダーボードの下にあるスライダーで色相を変更し、 美しい色の瞬間を作成できます。
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}