CSScolor-mod関数

投稿日: 2022-04-20 2022-10-06
タグ: css

しばらくの間、Sassのようなプリプロセッサにカラー関数がありました。色を調整および変更するこの機能は、CSSカラーモジュールレベル4でCSSにまもなく導入される予定です。多数のカラーアジャスターをベースカラーに適用できるようになります。これは、 CSS変数と組み合わせると非常に便利です。これは、ベースカラーを変数として定義し、必要に応じてアジャスターを適用できるためです。

color-mod は、以前は単にcolor関数と呼ばれていたことに注意してください。最近、仕様で名前がcolor-modに変更されました。

color-mod関数の使用例を次に示します。

.box {
  // Let's make it a little redder
  color: color-mod(rgb(147,123,25) red(218));
}

または、ベースカラーとしてHEX値を使用します。

.box {
  color: color-mod(#937b19 contrast(25%);
}

または、計算されたプロパティ（CSS変数）を使用する場合でも：

:root {
  --base-color: #937b19;
}

.box {
  color: color-mod(var(--base-color) tint(59%));
}

上記のスニペットから得られる色は、 rgb（218、123、25）になります。

同じカラー機能で複数のカラーアジャスターを使用できます。

.box {
  color: color-mod(purple lightness(62%) red(218) blue(202) whiteness(25%));
}

カラーアジャスター

利用可能なカラーアジャスターのリストは次のとおりです。

alpha ：0％から100％の間のアルファ透明度の値。
赤、緑＆青：0〜255の値。 rgb（140、254、255）の開始色を指定すると、開始赤の値は 140 になるため、140を超えると、色の赤の量が増え、それよりも低くなります。 140を超えると、色の赤の量が減少します。緑と青は同じように機能しますが、それぞれの色に影響します。
黒さ＆白色度：0％から100％の間の値。
contrast ：0％から100％の間の値。
saturation ：0％から100％の間の値。 0% iの灰色。
明度：0％から100％の間の値。 0 % iは黒、100% iは白。
tint ：0％から100％の間の値。
hue ：0〜360の値。
Shade ：0％から100％の間の値。 100% iの黒。
ブレンド：ブレンドを使用すると、ある色を別の色と簡単にブレンドできます。使用法の例を次に示します。

.box {
  color: color-mod(hotpink blend(yellow 59%));
}

ブラウザのサポート

CSS Colors Level 4は、推奨プロセスの草案段階にあり、color関数はまだどのブラウザーにも実装されていません。幸いなことに、PostCSSとcssnextプラグインのおかげで、今日から使用を開始できます。

👉チェックアウトColorMe.ioは、color関数を使用して色を作成するのに役立つ優れたツールです。

getdocs

13036