颜色对于css来说非常重要。网站之所以会呈现出色彩缤纷的风格，就是这些色彩风格的作用。在css中，有很多种表达颜色样式的方式。今天我们就盘点一下css中的颜色格式。css中的名称颜色，默认定义了很多名称颜色，比较常见的有黄色、蓝色、红色、粉色等。实际上，css中一共定义了140种颜色名称，这些名称你都可以使用直接地。140虽然看起来很多，但实际上还不到8bit的颜色，所以我们很少用到。RGB是一种颜色格式。我们从名字就知道，它是红、绿、蓝三色的缩写。我们都知道三原色的原理，就是通过三种基本色，我们可以组合出其他的颜色。因此，rgb可以代表我们能看到的各种颜色。在css中，红、绿、蓝称为三个通道，每个通道的值从0-255。通过混合这些通道颜色，我们可以创建超过1600万种颜色。注意rgb(255,255,255,0.5)允许我们有第四个参数，取值从0-1，表示透明度。.translucent-box{background:rgb(25500/0.5);}HexCodes通过十六进制数表示颜色代码，6位数字分为三组，每两位数一组，一位为16，两位为16*16=256，所以和RGB基本一样，只是用16进制表示。它的三个组也分别代表红色、绿色和蓝色。和RGB一样，它也可以指定透明度，也就是说我们可以用8位16进制来表示颜色。.translucent-box{background:#ffff0080;}HSL和RGB的区别在于HSL通过指定色调、饱和度和亮度来表达颜色。在HSL中，我们的色相在0deg-360deg之间，一个圆的大概颜色范围是红橙黄绿青蓝紫，饱和度在0-100%之间，亮度在0%-100%之间。HSL可以用RGB进行转换，hue的转换公式比较复杂。.translucent-box{background-color:hsl(0deg100%2%);}P3P3是继承sRGB色彩空间的颜色范围，提供更明亮、更鲜艳的颜色范围，也就是P3所代表的颜色范围更大。所以在使用P3的时候，需要用特殊的属性值color来表示，但是对于color属性，目前只有safari支持。...LCH代表“亮度色调”。“色度”或多或少是“饱和度”的同义词。它在概念上与HSL非常相似，有两个很大的不同：如前所述，它优先考虑人的感知，因此具有相同“亮度”值的两种颜色会感觉同样明亮。它不受任何特定颜色空间的限制。与我们见过的其他颜色格式不同，LCH不受sRGB的约束。它甚至没有绑定到P3！它通过对色度没有上限来做到这一点。在HSL中，饱和度范围从0%（不饱和）到100%（完全饱和）。这是可能的，因为我们知道我们正在谈论sRGB色彩空间，一个有限的调色板。但是LCH不依赖于特定的色彩空间，所以我们不知道饱和度上限在哪里。这并非一成不变：随着显示技术的不断改进，我们可以期待显示器实现越来越宽的色域。LCH将能够通过调高色度自动引用这些扩展颜色。谈论未来的证明！.translucent-box{background:lch(50%12020);}总结CSS是一门非常难掌握的语言。无论修炼多少年，总感觉有很多东西不懂。就目前而言，在LCH没有得到完全支持的情况下，HSL可能更适合表达。所以很多时候，当我们认为自己已经熟悉或者掌握一门语言的时候，其实可能才刚刚开始。当我们深入研究任何知识时，我们会发现我们对它的理解是不正确的。非常彻底。
