整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
背景色写法：background-color:颜色;
background-color:颜色;为窗口设置背景色:
body {
background-color: chartreuse;
}效果：
文翻译自 Color Formats in CSS，作者：Joshwcomeau。 略有删改
CSS 中的颜色格式可以采用不同的表示方式，包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式，使用 6 个十六进制数字来表示颜色，例如 #FF0000 表示红色；RGB 格式使用红、绿、蓝三个颜色通道的数值来表示颜色，例如 rgb(255,0,0) 也表示红色；RGBA 格式在 RGB 的基础上增加了一个透明度通道，用于控制颜色的不透明度；HSL 格式利用色相、饱和度和亮度三个参数来表示颜色，例如 hsl(0,100%,50%) 表示红色；而 HSLA 格式则在 HSL 的基础上增加了一个透明度通道。选择和使用这些不同的颜色格式时，需要考虑实际需求并进行决策。
对于不同的颜色格式，它们之间存在一些重要的区别。本文将带您深入了解这些选项，包括它们的工作原理、如何解析它们以及如何灵活应用，以下是原文翻译。
CSS有很多不同的颜色格式：hex codes，rgb（），hsl（），lch（），等等！
我们应该用哪一个？这似乎是一个无关紧要的决定，但它们之间却有一些非常重要的区别。而且，老实说我认为我们大多数人都在优先考虑使用错误的方式。
在本教程中，我将带您浏览不同的选项。我们将看到它们是如何工作的，以及我们如何利用它们为我们更好的服务。后面我将向您展示现代CSS如何让我们在选择正确的颜色格式时进行动态调整。
这并不是一个真正的颜色格式，但它是一个很好的开始！
HTML有140种命名颜色。这些是特殊的关键字值，如dodgerblue、hotpink和tomato。
开发人员Anthony Lieuallen创建了这个简洁的演示，在一个圆圈中显示了所有140种命名的Web颜色：
由Anthony Lieuallen创作，MIT许可
当你需要一个占位符颜色时，命名式颜色名是很好的。例如，如果您正在构建原型并需要临时值，或者如果您正在编写教育内容。在可读性方面，没有什么比color: red更好。
这可能是不言而喻的，实际开发中140种颜色是不够的，通常不会使用命名的颜色在生产环境中。
看看这两种命名的颜色：
“darkgray”实际上是比“gray”更浅的颜色？ 这是因为140种命名的Web颜色来自不同的地方，包括HTML4规范，X11 Unix窗口系统等。这是一个不同调色板的大杂烩，没有一个好的规范约束。
这是我们的第一个“真实的”颜色格式。以下是我们如何使用它：
color: rgb(255 0 0);
对应显示的样式如下：
像大多数颜色格式一样，rgb是一个缩写。它代表绿色蓝。
在我们今天要学习的所有颜色格式中，rgb是最不抽象的。你的电脑/手机显示屏实际上只是数百万个微小的红色、绿色和蓝色LED的集合，它们被组装成像素。因此，rgb颜色格式允许我们直接调整这些灯光的亮度。
每个值（红色、绿色、蓝色）被称为通道。每个通道从0到255。通过将这些通道以不同的量混合，我们可以创造超过1600万种不同的颜色。
RGB颜色的巧妙之处在于它是基于光的物理学。我们可以混合红色、绿色和蓝色光来创造任何颜色。把它们调到255，我们得到白色。把它们都设为0，剩下黑色。
rgb color格式还允许我们为alpha通道指定第四个可选值，以控制透明度：
background: rgb(255 0 0 / 0.5);
以上代码设置了红色50%的透明度，最终的样式的如下：
Alpha通道的范围从0（完全不可见）到1（完全不透明）。介于两者之间的任何东西都会产生半透明的颜色。
这可能是网络上最常用的颜色格式。它看起来像这样：
color: #FF0000;
它的工作原理如下：6位十六进制码包含三个2位值，每个通道一个值（红/绿色/蓝）。它不使用10位十进制系统，而是使用16位十六进制系统。
以下图示可以更加了解十六进制代码的工作原理（原文可拖动滑块实时更新颜色）：
基本上，十六进制代码与RGB值相同。在这两种情况下，我们都为红色、绿色和蓝色提供了一个值。 background: #FFFF0080; 在十进制系统中，一个两位数的值可以包含100个可能的值（10 × 10）。如果是十六进制，则总数为256（16 × 16）。因此，它实际上就像rgb()一样，我们为每个R/G/B通道指定一个介于0和255之间的值。
还有个有趣的事实如果我们想包含一个alpha通道，我们可以传递一个八位十六进制代码：
background: #FFFF0080;
代码效果图：
在本例中，我们指定80作为alpha通道，相当于十进制系统中的128。因此，这个盒子是50%不透明的。
8位十六进制代码在现代浏览器中得到了广泛应用，全球支持率达到96％，IE浏览器不支持。
到目前为止，我们看到的两种颜色格式都是基于相同基本思想的不同“包装器”：传递红/绿色/蓝通道的特定值。
但这并不是思考颜色的唯一方式！让我们来看看一个完全不同的颜色格式：HSL。
让我们从颜色选择器开始：
这个颜色选择器可能感觉更熟悉。它类似于图形设计软件中使用的图形设计软件，如Figma或Photoshop。
此颜色格式采用3种不同的值：
这往往是一个非常直观的方式来思考颜色。我们没有直接控制R/G/B光值，而是转向了更高层次的抽象，这与人类通常对颜色的看法更接近。
css中使用hsl：
background: hsl(0deg 100% 50% / 0.5);
所以，我们到目前为止看到的所有颜色格式都已经存在了很多很多年。HSL甚至早在Internet Explorer 9（2011年发布）中就支持了！
最近我们在CSS中得到了一些新的颜色格式。它们很有吸引力。让我们谈谈他们。
这篇文章是关于颜色格式，我们用来指定颜色的语法。到目前为止，我们看到的所有真彩色格式 rgb()、十六进制代码和hsl() 都是由“标准RGB颜色空间”（通常缩写为sRGB）所约束的。
sRGB中有数百万种可能的颜色，但它并没有接近捕捉人眼能够看到的全部颜色范围。
请看下面两个红色方块：
左边的颜色是rgb(255 0 0)。它是sRGB颜色空间中最红的红色。然而，在右边，我使用的是P3颜色空间。更红了！（这两个方块看起来很有可能是一样的。如果是这样，这可能意味着您的显示器或浏览器不支持宽色域颜色格式）
P3扩展了标准的sRGB色彩空间，使我们能够获得更明亮，更鲜艳的色彩。如下图所示：
不幸的是，在CSS中，颜色空间与颜色格式相关联。如果我选择使用rgb()语法（或十六进制代码，或hsl()），我只能在sRGB颜色空间中指定颜色。
因此，如果我们想使用P3颜色，我们需要使用不同的颜色格式。语法如下：
.box {
background: color(display-p3 1 0 0);
}
color()函数接受一个颜色空间，然后是一组R/G/B值。它使用0到1的十进制值，而不是从0到255。但目前只有主流的浏览器对color()函数支持。
我们使用HSL颜色格式创建以下两种颜色：
正如我们所看到的，这两种颜色都具有相同的50%的“亮度”值。但它们感觉不一样轻，黄色的感觉比蓝色的轻多了！
HSL颜色格式是在数学/物理之后建模的。它没有考虑到人类的感知。而且，事实证明，人类并不能非常准确地感知颜色！
LCH是一种颜色格式，旨在对人类感知一致。两种颜色具有同等的“亮度”值应该感觉同样轻！
例如，在LCH中，黄色和蓝色在55%亮度下的样子：
LCH代表“亮度 色度 色调”。“色度”或多或少是“饱和度”的同义词。它在概念上与HSL非常相似，但有两个很大的区别：
与我们看到的其他颜色格式不同，LCH不绑定到sRGB。它甚至没有绑定到P3！它通过不具有色度上限来实现这一点。
在HSL中，饱和度范围从0%（无饱和）到100%（完全饱和）。这是可能的，因为我们知道我们谈论的是sRGB颜色空间，一个有限的颜色调色板。
但是LCH并没有链接到特定的颜色空间，所以我们不知道饱和度上限在哪里。它不是静态的：随着显示技术的不断改进，我们可以预期显示器将达到越来越宽的色域。LCH将自动能够通过调高色度来参考这些扩展的颜色。
background: lch(50% 120 20);
浏览器支持情况：
文章的主要内容已经结束了，我们看到了许多不同的颜色格式。那么应该在工作中真正使用哪一个呢？
我建议使用HSL。至少在LCH获得广泛的浏览器支持之前。
我知道很多开发者喜欢使用十六进制代码。它们简洁，易于在设计软件和我们的代码之间复制/粘贴，并且通用。但这些好处也伴随着一些相当大的权衡。
即使你对十六进制符号很熟悉，它仍然很难直观破译。问：#0F52B7是什么颜色？#F3E248怎么样？
HSL的奇妙之处在于它是直观的。它与我们对颜色的看法密切相关。通过一些练习，当您看到hsl()值时，您将能够立即描绘任何颜色。
这意味着我们可以很容易地调整值，在运行中。我甚至不需要打开一个颜色选择器。如果我希望我的颜色稍微暗一点，我可以减少亮度百分比。如果我想让它更生动和激烈，我可以调高饱和度。
当我们将HSL与现代CSS特性相结合时，它会变得更加强大。
有兴趣的可以看看原文，可以在线体验不同颜色格式是如何工作的。看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
成为一个好的设计师，或者一个很会穿搭的人。在设计作品或是穿搭衣物时，决不能配错颜色。
如果你天生对色彩不敏感，一不小心就会弄出「大红配大绿」。那么，知晓程序今天推荐的小程序，你可得要收到好了。
「Color 颜值」，是一款专注帮你解决配色问题的小程序，它基于色轮配色原理，让你轻轻松松就能搭配出大师级别的色彩。
关注「知晓程序」公众号，在后台回复「0109」，一张图教你玩转小程序。
这个小程序共提供了四大实用功能：配色广场、颜色转换、配色工具、Web 颜色。
我们先去「配色广场」看看。
自己不懂配色，就借鉴经典的配色方案吧。
在「配色广场」中，就提供了许多「Adobe Color 配色方案」，一页 5 组，一组 5 种颜色。页面底部有个「Surprise me」的按键，点击它，就切换另外 5 组。
如果你有一个确定的主色调，就可以在这里挑选可与之搭配的颜色。
看见喜欢的方案，点进去，就能获得这个色彩方案的「配色详情」，详细展示了每一种颜色的 RGB 和 HSB 色值。
实在喜欢，还可以点击底部的「收藏」，并给它起一个「名称」便于日后查阅。
不过，「我的收藏」的位置比较隐蔽，找不到它的朋友们这里要认真看咯。
回到配色广场的主页面，注意到页面上方的「下拉小箭头」，点击它会弹出选择菜单，选中「我的收藏」并确定，你收藏下来的配色方案都在这里。
每种颜色都有对应的色值，据说设计师确定颜色的方法，是先估计色值，再根据色彩的浓度、亮度等等调出最满意的颜色。
「颜色转换」就是用于调整色值的，我们来看看，具体怎么用？
首先，你要确定一种颜色模式，页面上方的「模式选择」有 RGB、CMYK、LAB、HSB 四种可选。选好模式，每一个属性有相应的滑块，滑动它就可以调整色值了。
页面中间的「预览」块可以实时显示你调出来的颜色，同时还显示其「十六进制颜色码」，以及这个颜色在四种不同模式下对应的色值。
在「配色广场」中，小程序推荐的是 Adobe Color 配色方案。
而接下来要介绍的「配色工具」，则提供了基于 6 种颜色关系的配色算法，分别是类比色／相似色、互补色、分裂补色、单色、渐变、二次色配比。
如果你对这几种配色算法没有概念，也没关系，在「关于 Color 颜值」中可以找到详细的介绍，顺便还能涨涨知识呢。
每一种配色算法都需要一个「主色」或「基准色」，这个由你自己来调它的 RGB 值以及饱和度、亮度，然后小程序会根据你选择的配色算法推荐一组 4 种颜色。
如果实在不知如何确定「主色」或「基准色」，那就点击底部的「随机」，你可以一直「随机」，直到满意。
好不容易找到一组满意的，千万别忘了「收藏」，收藏方法跟上面所述一样，这个收藏夹还可以作为你的颜色管理利器哦。
如果你不需要考虑配色原理，还有一个选项「 I am Feeling Lucky 」，它会随机挑选一种算法，并根据其原理为你推荐一组 5 种颜色的配色方案。
这个功能方便了外行人搭配出和谐的颜色，也给内行人带来了色彩灵感。
现在是互联网时代，不管是美术设计，还是 UI 设计，你都需要对「Web 颜色」有一定的了解。
这个小程序从「CSS 颜色值」、「Web 安全色」以及「Gray 灰度值」三个方面，列举了 Web 标准规范中 HTML 和 CSS 定义的标准色和安全色。
如果你还在为颜色搭配而头疼，如果你需要一个颜色管理工具，如果你喜欢和谐美丽的色彩，不妨打开「Color 颜值」。
谁不喜欢和谐美丽的色彩呢？还不快来！
「Color 颜值」小程序使用链接 https://minapp.com/miniapp/3775/
关注「知晓程序」公众号，在后台回复「藏宝图」，获取最全最好用的小程序名单。
*请认真填写需求信息，我们会在24小时内与您取得联系。
