palette-mix()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

palette-mix()CSS関数で、新しい font-palette 値を、指定したパーセント値と色混合方式によって 2 個の font-palette 値を混ぜ合わせることによって生成することができます。

構文

css
/* フォント定義のパレットを混合 */
font-palette: palette-mix(in lch, normal, dark)

/* 作者定義のパレットを混合 */
font-palette: palette-mix(in lch, --blues, --yellows)

/* 混合するそれぞれのパレットの様々なパーセント値 */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)

/* さまざまな色混合方式 */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)

関数記法:

palette-mix(method, palette1 [p1], palette2 [p2])
method

混合する伊六区間を指定する <color-interpolation-method> です。

palette1, palette2

互いに混合する font-palette 値です。これは任意の font-palette 値を取ることができます。 palette-mix() 関数、normaldarklight などです。

p1, p2 省略可

<percentage> 値で、 0%100% の間で混合するそれぞれのパレットの量を指定します。次のように一般化されます。

  • p1p2 の両方が省略された場合は、 p1 = p2 = 50% となります。
  • p1 が省略された場合は、 p1 = 100% - p2 となります。
  • p2 が省略された場合は、 p2 = 100% - p1 となります。
  • p1 = p2 = 0% であった場合は、この関数は無効になります。
  • p1 + p2 ≠ 100% であった場合は、 p1' = p1 / (p1 + p2) および p2' = p2 / (p1 + p2) となります。ここで、 p1'p2' は正規化された結果です。

palette-mix() を使用して 2 つのパレットを混合

この例では、 palette-mix() 関数を使用して、新しいパレットを作成するために他の 2 つのパレットを混合する方法を示します。

HTML

HTML には、フォント情報を適用するための 3 つの段落があります。

html
<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>

CSS

CSS では、 Google Fonts からカラーフォントをインポートし、 @font-palette-values アットルールを使って 2 つのカスタムフォントパレット値を定義します。次に、段落に 3 つの異なる font-palette 値(--yellow--blue、そして palette-mix() を使って青色と黄色のパレットを混合して作成した新しい緑色のパレット)を適用します。

css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* これは Nabla の青いパレット */
}

@font-palette-values --yellowNabla {
  font-family: Nabla;
  base-palette: 7; /* これは Nabla の黄色いパレット */
}

p {
  font-family: "Nabla";
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

結果

出力結果は次のようになります。

仕様書

Specification
CSS Fonts Module Level 4
# typedef-font-palette-palette-mix

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
palette-mix()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報