CSScolor-mod関数

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

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