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 値を混ぜ合わせることによって生成することができます。
構文
/* フォント定義のパレットを混合 */
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()関数、normal、dark、lightなどです。 p1,p2省略可-
<percentage>値で、0%～100%の間で混合するそれぞれのパレットの量を指定します。次のように一般化されます。p1とp2の両方が省略された場合は、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()> =
palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]
<palette-identifier> =
<dashed-ident>
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
display-p3-linear |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
<xyz-space>
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
<custom-color-space> =
<dashed-ident>
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
例
palette-mix() を使用して 2 つのパレットを混合
この例では、 palette-mix() 関数を使用して、新しいパレットを作成するために他の 2 つのパレットを混合する方法を示します。
HTML
HTML には、フォント情報を適用するための 3 つの段落があります。
<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() を使って青色と黄色のパレットを混合して作成した新しい緑色のパレット）を適用します。
@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";
@font-palette-values --blue-nabla {
font-family: "Nabla";
base-palette: 2; /* これは Nabla の青いパレット */
}
@font-palette-values --yellow-nabla {
font-family: "Nabla";
base-palette: 7; /* これは Nabla の黄色いパレット */
}
p {
font-family: "Nabla", fantasy;
font-size: 4rem;
text-align: center;
margin: 0;
}
.yellowPalette {
font-palette: --yellow-nabla;
}
.bluePalette {
font-palette: --blue-nabla;
}
.mixedPalette {
font-palette: palette-mix(in lch, --blue-nabla 55%, --yellow-nabla 45%);
}
結果
出力結果は次のようになります。
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # typedef-font-palette-palette-mix |