CSS 函数 - color-mix（）

上一页
下一页

CSS 中的 color-mix（） 函数将两个 <color> 值作为参数，并返回两种指定颜色的混合，在给定的颜色空间中以给定的数量。

可能的值

  • color-mix（） 函数的功能表示法是 color-mix（method， color1[ p1]， color2[ p2]）。
  • method：它是一种<color-interpolation-method>指定插值颜色空间。
  • color1、color2：保存将混合的 <color> 值。
    • p1、p2：这是一个可选值，指定要混合的颜色量。以 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' 是归一化结果。

以下是不同的颜色插值方法：

  • <rectangular-color-space>：srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65
  • <polar-color-space>： HSL， HWB， LCH， OKLCH
  • <hue-interpolation-method>：更短、更长、增加、减少

语法


color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)

CSS color-mix（） - 矩形颜色空间 （srgb）

以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值方法是矩形颜色空间 （srgb）：


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 border: 3px solid blue;
	 	 	 padding: 5px;
	 	 	 width: 350px;
	 	}

	 	#sample-div 	 {
	 	 	 width: 80px;
	 	 	 height: 80px;
	 	 	 border: 2px solid black;
	 	 	 margin-right: 10px;
	 	}
	 	
	 	.color-srgb-p1 {
	 	 	 background-color: color-mix(in srgb, #65ef23 90%, yellow);
	 	} 	

	 	.color-srgb-p2 {
	 	 	 background-color: color-mix(in srgb, #65ef23, yellow 80%);
	 	} 	

	 	.color-srgb-none {
	 	 	 background-color: color-mix(in srgb, #65ef23, yellow);
	 	} 	

	 	.color-srgb-both {
	 	 	 background-color: color-mix(in srgb, #65ef23 20%, yellow 45%);
	 	} 	
</style>
</head>
<body>
	 	<h2>Normalization of colors based on p1 and p2</h2>
	 	<div class="container">
	 	 	 <div class="color-srgb-p1" id="sample-div">p1=90%</div>
	 	 	 <div class="color-srgb-p2" id="sample-div">p2=80%</div>
	 	 	 <div class="color-srgb-none" id="sample-div">none</div>
	 	 	 <div class="color-srgb-both" id="sample-div">p1=20% p2=45%</div>
	 	</div>
</body>
</html>

CSS color-mix（） - 极性颜色空间 （hsl）

以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值方法是极性颜色空间 （hsl）：


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 border: 3px solid blue;
	 	 	 padding: 5px;
	 	 	 width: 350px;
	 	}

	 	#sample-div 	 {
	 	 	 width: 80px;
	 	 	 height: 80px;
	 	 	 border: 2px solid black;
	 	 	 margin-right: 10px;
	 	}
	 	
	 	.color-hsl-p1 {
	 	 	 background-color: color-mix(in hsl, #90b 90%, white);
	 	} 	

	 	.color-hsl-p2 {
	 	 	 background-color: color-mix(in hsl, #90b, white 80%);
	 	} 	

	 	.color-hsl-none {
	 	 	 background-color: color-mix(in hsl, #90b, white);
	 	} 	

	 	.color-hsl-both {
	 	 	 background-color: color-mix(in hsl, #90b 20%, white 45%);
	 	} 	
</style>
</head>
<body>
	 	<h2>Normalization of colors - hsl colorspace</h2>
	 	<div class="container">
	 	 	 <div class="color-hsl-p1" id="sample-div">p1=90%</div>
	 	 	 <div class="color-hsl-p2" id="sample-div">p2=80%</div>
	 	 	 <div class="color-hsl-none" id="sample-div">none</div>
	 	 	 <div class="color-hsl-both" id="sample-div">p1=20% p2=45%</div>
	 	</div>
</body>
</html>

CSS color-mix（） - 色调插值法 （lch）

以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值法是色相插值法 （lch）：


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 border: 3px solid blue;
	 	 	 padding: 10px;
	 	 	 width: 700px;
	 	}

	 	#sample-div 	 {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-right: 10px;
	 	}
	 	
	 	.color-lch-color1 {
	 	 	 background-color: lch(50% 100% 200);
	 	} 	

	 	.color-lch-color2 {
	 	 	 background-color: lch(100% 50 200);
	 	} 	

	 	.color-shorter {
	 	 	 background-color: color-mix(in lch shorter hue,
	 	 	 lch(50% 100% 200),
	 	 	 lch(100% 50 200)
	 	 	 );
	 	} 	

	 	.color-longer {
	 	 	 background-color: color-mix(in lch longer hue,
	 	 	 lch(50% 100% 200),
	 	 	 lch(100% 50 200)
	 	 	 );
	 	} 	

	 	.color-increasing {
	 	 	 background-color: color-mix(in lch increasing hue,
	 	 	 lch(50% 100% 200),
	 	 	 lch(100% 50 200)
	 	 	 );
	 	} 	

	 	.color-decreasing {
	 	 	 background-color: color-mix(in lch decreasing hue,
	 	 	 lch(50% 100% 200),
	 	 	 lch(100% 50% 200)
	 	 	 );
	 	} 	
</style>
</head>
<body>
	 	<h2>hue interpolation method</h2>
	 	<div class="container">
	 	 	 <div class="color-lch-color1" id="sample-div">p1=90%</div>
	 	 	 <div class="color-lch-color2" id="sample-div">p2=80%</div>
	 	 	 <div class="color-shorter" id="sample-div">shorter</div>
	 	 	 <div class="color-longer" id="sample-div">longer</div>
	 	 	 <div class="color-increasing" id="sample-div">increasing</div>
	 	 	 <div class="color-decreasing" id="sample-div">decreasing</div>
	 	</div>
</body>
</html>
打印本页
上一页
下一页