CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间

各位观众老爷，大家好！今天咱们就来聊聊CSS里那些个“高大上”的色彩玩意儿：HDR Color（Rec.2020, Display-P3）和感知均匀性色彩空间。别怕，听名字唬人，其实理解起来很简单，保证你听完能跟人吹牛皮！

第一部分：HDR Color，让你的屏幕亮瞎眼

啥叫HDR？High Dynamic Range，高动态范围。简单来说，就是能显示更亮、更暗，以及更多的颜色。以前的sRGB色彩空间就像个小房间，HDR色彩空间就像个大别墅，住的颜色多了去了。

CSS支持两种主要的HDR色彩空间：Rec.2020和Display-P3。

Rec.2020： 这货是个野心家，目标是覆盖人眼能看到的大部分颜色。但目前来说，大部分显示器还hold不住它，只能显示它的一部分子集。
Display-P3： 相对务实一点，是苹果搞出来的，比sRGB颜色更广，而且现在很多显示器都支持，兼容性更好。

怎么在CSS里用它们？

很简单，用color()函数。这函数就像个万能钥匙，可以打开各种色彩空间的大门。

/* 使用Display-P3 */
body {
  background-color: color(display-p3 0.8 0.2 0.1); /* 红色 */
}

/* 使用Rec.2020 */
body {
  background-color: color(rec2020 0.2 0.8 0.3); /* 绿色 */
}

color()函数的语法是：color(色彩空间 r g b [a])。r、g、b分别是红、绿、蓝的数值，范围通常是0到1。a是透明度，也是0到1。

代码示例：用Display-P3做出渐变效果

<!DOCTYPE html>
<html>
<head>
<title>Display-P3 Gradient</title>
<style>
.gradient {
  width: 300px;
  height: 50px;
  background: linear-gradient(to right, 
                       color(display-p3 1 0 0),  /* 红色 */
                       color(display-p3 0 1 0),  /* 绿色 */
                       color(display-p3 0 0 1)); /* 蓝色 */
}
</style>
</head>
<body>

<div class="gradient"></div>

</body>
</html>

这段代码会创建一个从红到绿到蓝的渐变。如果你用支持Display-P3的显示器看，颜色会比sRGB的渐变更鲜艳。

注意事项：

显示器支持： 不是所有显示器都支持HDR色彩空间。如果你的显示器不支持，浏览器会自动把颜色转换成sRGB，效果就打折扣了。
浏览器支持： 大部分现代浏览器都支持HDR色彩空间，但最好还是做一下兼容性测试。
图片： 如果你想在网页上显示HDR图片，图片本身也必须是HDR格式的，比如HEIF或者JPEG XL。

第二部分：感知均匀性色彩空间，让色彩变化更自然

人眼对颜色的感知不是线性的。也就是说，RGB值变化相同的幅度，人眼感觉到的颜色变化可能不一样。比如，从RGB(0, 0, 0)到RGB(10, 10, 10)，人眼感觉到的变化可能比从RGB(200, 200, 200)到RGB(210, 210, 210)更明显。

为了解决这个问题，就出现了感知均匀性色彩空间。这些色彩空间的特点是，RGB值变化相同的幅度，人眼感觉到的颜色变化也差不多。这样，做颜色渐变或者颜色动画的时候，效果会更自然。

CSS支持几种感知均匀性色彩空间，包括：

Lab： 基于人眼视觉模型的色彩空间，L表示亮度，a和b表示颜色。
LCH： Lab的极坐标形式，L表示亮度，C表示色度（颜色的鲜艳程度），H表示色相（颜色）。
OKLab： 对Lab的改进，在感知均匀性方面更好。
OKLCH： OKLab的极坐标形式。

怎么在CSS里用它们？

还是用color()函数！

/* 使用Lab */
body {
  background-color: color(lab 50 10 20); /* L = 50, a = 10, b = 20 */
}

/* 使用LCH */
body {
  background-color: color(lch 60 40 30); /* L = 60, C = 40, H = 30 */
}

/* 使用OKLab */
body {
  background-color: color(oklab 0.6 0.1 0.2); /* L = 0.6, a = 0.1, b = 0.2 */
}

/* 使用OKLCH */
body {
  background-color: color(oklch 0.7 0.3 45); /* L = 0.7, C = 0.3, H = 45 */
}

代码示例：用OKLCH做出更自然的渐变

<!DOCTYPE html>
<html>
<head>
<title>OKLCH Gradient</title>
<style>
.gradient {
  width: 300px;
  height: 50px;
  background: linear-gradient(to right, 
                       color(oklch 0.8 0.6 30),  /* 亮橙色 */
                       color(oklch 0.8 0.6 270)); /* 亮紫色 */
}
</style>
</head>
<body>

<div class="gradient"></div>

</body>
</html>

这段代码会创建一个从亮橙色到亮紫色的渐变。由于使用了OKLCH色彩空间，颜色变化会更均匀、更自然。

代码示例：hover变色

<!DOCTYPE html>
<html>
<head>
<title>OKLCH Hover</title>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: color(oklch 0.6 0.4 60); /* 初始颜色，鲜艳的绿色 */
    transition: background-color 0.3s ease; /* 平滑过渡 */
}

.box:hover {
    background-color: color(oklch 0.7 0.5 120); /* hover后的颜色，更亮的黄绿色 */
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

在这个例子中，我们使用 OKLCH 定义了一个盒子的初始颜色和 hover 状态下的颜色。当鼠标悬停在盒子上时，颜色会平滑地过渡到 hover 状态的颜色。OKLCH 确保了颜色变化的感知均匀性，使得过渡效果更加自然。

注意事项：

参数范围： 不同色彩空间的参数范围不一样，需要查阅文档。比如，Lab的a和b可以是负数，LCH的H是角度。
浏览器支持： 现代浏览器对感知均匀性色彩空间的支持越来越好，但还是需要做一下兼容性测试。
选择合适的色彩空间： 不同的色彩空间有不同的特点，选择合适的色彩空间可以更好地满足你的需求。比如，如果你需要控制颜色的鲜艳程度，LCH和OKLCH就比较方便。

第三部分：色彩空间转换，让不同空间和谐共处

有时候，我们需要在不同的色彩空间之间进行转换。比如，我们可能需要把sRGB颜色转换成Lab颜色，或者把Display-P3颜色转换成Rec.2020颜色。

CSS提供了一个color-mix()函数，可以用来混合两种颜色，并且可以指定混合的色彩空间。

/* 混合两种颜色，默认在sRGB空间混合 */
body {
  background-color: color-mix(in srgb, red, blue); /* 紫色 */
}

/* 在Lab空间混合 */
body {
  background-color: color-mix(in lab, red, blue); /* 另一种紫色 */
}

/* 混合比例 */
body {
  background-color: color-mix(in oklch, red 30%, blue); /* 更多蓝色 */
}

color-mix()函数的语法是：color-mix(in 色彩空间, color1 [percentage], color2 [percentage])。color1和color2是要混合的颜色，percentage是混合的比例。如果省略percentage，则默认比例是50%。

代码示例：用color-mix做出渐变

<!DOCTYPE html>
<html>
<head>
<title>Color-Mix Gradient</title>
<style>
.gradient {
  width: 300px;
  height: 50px;
  background: linear-gradient(to right, 
                       color-mix(in oklch, color(oklch 0.8 0.6 30), transparent),  /* 亮橙色到透明 */
                       color-mix(in oklch, color(oklch 0.8 0.6 270), transparent)); /* 亮紫色到透明 */
}
</style>
</head>
<body>

<div class="gradient"></div>

</body>
</html>

这段代码会创建一个从亮橙色到透明，再到亮紫色的渐变。color-mix()函数用来把亮橙色和亮紫色混合成透明色。

注意事项：

色彩空间的选择： 不同的色彩空间混合的结果不一样，需要根据实际情况选择合适的色彩空间。
混合比例： 混合比例会影响最终的颜色，需要仔细调整。

第四部分：实际应用场景，让你的网页更漂亮

说了这么多，那么HDR Color和感知均匀性色彩空间到底有什么用呢？

更鲜艳的颜色： HDR Color可以显示更鲜艳、更生动的颜色，让你的网页看起来更吸引人。
更自然的渐变： 感知均匀性色彩空间可以做出更自然的渐变效果，让你的网页看起来更专业。
更平滑的动画： 感知均匀性色彩空间可以做出更平滑的颜色动画，让你的网页看起来更流畅。
更好的用户体验： 使用HDR Color和感知均匀性色彩空间可以提升用户体验，让你的网页看起来更舒适。

一些实际应用场景：

照片展示： 如果你想在网页上展示HDR照片，可以使用HDR Color色彩空间，让照片看起来更逼真。
数据可视化： 如果你想用颜色来表示数据，可以使用感知均匀性色彩空间，让数据的变化更直观。
品牌宣传： 如果你想用颜色来突出品牌形象，可以使用HDR Color和感知均匀性色彩空间，让品牌看起来更时尚。

第五部分：代码示例，让大家体会一下

<!DOCTYPE html>
<html>
<head>
<title>HDR Color and Perceptual Uniformity</title>
<style>
body {
  font-family: sans-serif;
  margin: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* sRGB渐变 */
.srgb-gradient {
  background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0));
}

/* Display-P3渐变 */
.display-p3-gradient {
  background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 1 0));
}

/* OKLCH渐变 */
.oklch-gradient {
  background: linear-gradient(to right, color(oklch 0.6 0.8 30), color(oklch 0.6 0.8 120));
}

.text {
  font-size: 14px;
  text-align: center;
}

/* Hover 效果 */
.hover-box {
    width: 100px;
    height: 100px;
    background-color: color(oklch 0.6 0.4 60); /* 初始颜色，鲜艳的绿色 */
    transition: background-color 0.3s ease; /* 平滑过渡 */
}

.hover-box:hover {
    background-color: color(oklch 0.7 0.5 120); /* hover后的颜色，更亮的黄绿色 */
}
</style>
</head>
<body>

<div class="container">
  <div class="box srgb-gradient">
    <div class="text">sRGB Gradient</div>
  </div>
  <div class="box display-p3-gradient">
    <div class="text">Display-P3 Gradient</div>
  </div>
  <div class="box oklch-gradient">
    <div class="text">OKLCH Gradient</div>
  </div>
  <div>
      <div class="hover-box"></div>
      <p>Hover me!</p>
  </div>
</div>

</body>
</html>

这段代码创建了三个盒子，分别使用了sRGB、Display-P3和OKLCH色彩空间的渐变。你可以对比一下它们的效果，看看HDR Color和感知均匀性色彩空间的优势。你需要在支持Display-P3的显示器上才能看到Display-P3的效果。还有，一个hover变色的例子，让大家体会一下。

第六部分：总结与展望

今天我们聊了CSS里的HDR Color和感知均匀性色彩空间。它们是让你的网页更漂亮、更专业的利器。虽然目前来说，它们的兼容性还不是100%，但随着技术的发展，它们的应用会越来越广泛。

所以，赶紧学起来，用起来，让你的网页亮瞎别人的眼吧！

表格总结：

特性/色彩空间	描述	优点	缺点	应用场景
HDR Color	Rec.2020和Display-P3，提供更广的色域和更高的亮度范围。	更鲜艳的颜色，更逼真的图像。	兼容性问题，需要显示器和浏览器的支持。	照片展示，视频播放，游戏。
Lab/LCH	基于人眼视觉模型的色彩空间，感知均匀性。	颜色变化更自然，渐变效果更好。	参数不太直观，需要一定的学习成本。	颜色选择器，颜色分析，图像处理。
OKLab/OKLCH	对Lab/LCH的改进，感知均匀性更好。	在感知均匀性方面表现更好，颜色变化更平滑。	相对较新，兼容性不如Lab/LCH。	颜色渐变，颜色动画，数据可视化。
`color-mix()`	在不同的色彩空间之间混合颜色。	可以创建复杂的颜色效果，可以进行色彩空间转换。	需要理解不同色彩空间的特性，选择合适的色彩空间。	颜色主题生成，颜色调整，视觉效果。

好了，今天的讲座就到这里。希望大家有所收获，早日成为色彩大师！下课！

发表回复 取消回复

发表回复取消回复