CSScolor-mod関数
しばらくの間、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関数を使用して色を作成するのに役立つ優れたツールです。