しばらくの間、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関数はまだどのブラウザーにも実装されていません。 幸いなことに、PostCSScssnextプラグインのおかげで、今日から使用を開始できます。

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