CSS中常用的颜色格式

本文翻译自 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种命名颜色。这些是特殊的关键字值,如dodgerbluehotpinktomato

开发人员Anthony Lieuallen创建了这个简洁的演示,在一个圆圈中显示了所有140种命名的Web颜色:

由Anthony Lieuallen创作,MIT许可

当你需要一个占位符颜色时,命名式颜色名是很好的。例如,如果您正在构建原型并需要临时值,或者如果您正在编写教育内容。在可读性方面,没有什么比color: red更好。

这可能是不言而喻的,实际开发中140种颜色是不够的,通常不会使用命名的颜色在生产环境中。

看看这两种命名的颜色:

“darkgray”实际上是比“gray”更浅的颜色? 这是因为140种命名的Web颜色来自不同的地方,包括HTML4规范,X11 Unix窗口系统等。这是一个不同调色板的大杂烩,没有一个好的规范约束。

这是我们的第一个“真实的”颜色格式。以下是我们如何使用它:

对应显示的样式如下:

像大多数颜色格式一样,rgb是一个缩写。它代表绿色蓝。

在我们今天要学习的所有颜色格式中,rgb是最不抽象的。你的电脑/手机显示屏实际上只是数百万个微小的红色、绿色和蓝色LED的集合,它们被组装成像素。因此,rgb颜色格式允许我们直接调整这些灯光的亮度。

每个值(红色、绿色、蓝色)被称为通道。每个通道从0到255。通过将这些通道以不同的量混合,我们可以创造超过1600万种不同的颜色。

RGB颜色的巧妙之处在于它是基于光的物理学。我们可以混合红色、绿色和蓝色光来创造任何颜色。把它们调到255,我们得到白色。把它们都设为0,剩下黑色。

rgb color格式还允许我们为alpha通道指定第四个可选值,以控制透明度:

以上代码设置了红色50%的透明度,最终的样式的如下:

Alpha通道的范围从0(完全不可见)到1(完全不透明)。介于两者之间的任何东西都会产生半透明的颜色。

这可能是网络上最常用的颜色格式。它看起来像这样:

它的工作原理如下:6位十六进制码包含三个2位值,每个通道一个值(红/绿色/蓝)。它不使用10位十进制系统,而是使用16位十六进制系统。

以下图示可以更加了解十六进制代码的工作原理(原文可拖动滑块实时更新颜色):

基本上,十六进制代码与RGB值相同。在这两种情况下,我们都为红色、绿色和蓝色提供了一个值。 background: #FFFF0080; 在十进制系统中,一个两位数的值可以包含100个可能的值(10 × 10)。如果是十六进制,则总数为256(16 × 16)。因此,它实际上就像rgb()一样,我们为每个R/G/B通道指定一个介于0和255之间的值。

还有个有趣的事实如果我们想包含一个alpha通道,我们可以传递一个八位十六进制代码:

代码效果图:

在本例中,我们指定80作为alpha通道,相当于十进制系统中的128。因此,这个盒子是50%不透明的。

8位十六进制代码在现代浏览器中得到了广泛应用,全球支持率达到96%,IE浏览器不支持。

到目前为止,我们看到的两种颜色格式都是基于相同基本思想的不同“包装器”:传递红/绿色/蓝通道的特定值。

但这并不是思考颜色的唯一方式!让我们来看看一个完全不同的颜色格式:HSL。

让我们从颜色选择器开始:

这个颜色选择器可能感觉更熟悉。它类似于图形设计软件中使用的图形设计软件,如Figma或Photoshop。

此颜色格式采用3种不同的值:

  • H 色相:这是我们要用的颜色,有效值的范围是0到360。我们以度为单位指定它,因为刻度是圆形的(0度和360度表示相同的红相)。
  • S 饱和度:有效值的范围为0%到100%。在0%时,颜色中没有色,完全是灰度级的。在100%,颜色尽可能鲜艳。
  • L 亮度:颜色有多浅/多深?有效值的范围为0%到100%。在0%时,颜色是漆黑的。在100%时,颜色为纯白色。

这往往是一个非常直观的方式来思考颜色。我们没有直接控制R/G/B光值,而是转向了更高层次的抽象,这与人类通常对颜色的看法更接近。

css中使用hsl:

所以,我们到目前为止看到的所有颜色格式都已经存在了很多很多年。HSL甚至早在Internet Explorer 9(2011年发布)中就支持了!

最近我们在CSS中得到了一些新的颜色格式。它们很有吸引力。让我们谈谈他们。

这篇文章是关于颜色格式,我们用来指定颜色的语法。到目前为止,我们看到的所有真彩色格式 rgb()、十六进制代码和hsl() 都是由“标准RGB颜色空间”(通常缩写为sRGB)所约束的。

sRGB中有数百万种可能的颜色,但它并没有接近捕捉人眼能够看到的全部颜色范围。

请看下面两个红色方块:

左边的颜色是rgb(255 0 0)。它是sRGB颜色空间中最红的红色。然而,在右边,我使用的是P3颜色空间。更红了!(这两个方块看起来很有可能是一样的。如果是这样,这可能意味着您的显示器或浏览器不支持宽色域颜色格式)

P3扩展了标准的sRGB色彩空间,使我们能够获得更明亮,更鲜艳的色彩。如下图所示:

不幸的是,在CSS中,颜色空间与颜色格式相关联。如果我选择使用rgb()语法(或十六进制代码,或hsl()),我只能在sRGB颜色空间中指定颜色。

因此,如果我们想使用P3颜色,我们需要使用不同的颜色格式。语法如下:

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将自动能够通过调高色度来参考这些扩展的颜色。

浏览器支持情况:

文章的主要内容已经结束了,我们看到了许多不同的颜色格式。那么应该在工作中真正使用哪一个呢?

我建议使用HSL。至少在LCH获得广泛的浏览器支持之前。

我知道很多开发者喜欢使用十六进制代码。它们简洁,易于在设计软件和我们的代码之间复制/粘贴,并且通用。但这些好处也伴随着一些相当大的权衡。

即使你对十六进制符号很熟悉,它仍然很难直观破译。问:#0F52B7是什么颜色?#F3E248怎么样?

HSL的奇妙之处在于它是直观的。它与我们对颜色的看法密切相关。通过一些练习,当您看到hsl()值时,您将能够立即描绘任何颜色。

这意味着我们可以很容易地调整值,在运行中。我甚至不需要打开一个颜色选择器。如果我希望我的颜色稍微暗一点,我可以减少亮度百分比。如果我想让它更生动和激烈,我可以调高饱和度。

当我们将HSL与现代CSS特性相结合时,它会变得更加强大。

有兴趣的可以看看原文,可以在线体验不同颜色格式是如何工作的。看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

前端入门——css颜色和背景

如果网页只有一种颜色,那是非常可怕的,颜色的设置丰富了网页,就如同多彩缤纷的世界。

在了解css颜前,我们回顾下?计算机根据色光三原色的原理通过各种算法来显示颜色。

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红,绿,蓝三种颜色混合色,如下示例,几种写法都是指同一个颜色(红色):

对于16进制形式,每2位表示一个颜色,从左到右分别是红、绿、蓝,每种颜色取值从00 到 FF。

如下示例:

对于rgb的表示法,由三个参数组成,分别是红、绿、蓝,每种颜色取值从0 到 255。

如下示例:

红,绿,蓝值从0到255的结合,给出了总额超过1600多万不同的颜色(256 × 256 ×256)。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意,避免设置不能够显示的颜色,可以参考网页安全色:https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成,还有亮度层级,如下图:

rgba 中的a是指透明度,这个是css3新增加的属性,通过rgba可以设置更加漂亮的颜色。

通过background属性可以设置元素的背景色、背景图片,语法如下:

background 在一个声明中设置所有的背景属性,可以在这里设置如下属性:

  • background-color —— 背景颜色。
  • background-image —— 使用的背景图像
  • background-position —— 背景图像的位置
  • background-size —— 背景图片的大小
  • background-repeat —— 如何重复背景图像
  • background-origin —— 背景图片的定位区域
  • background-clip —— 背景的绘制区域
  • background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 url(img.png)是允许的,但至少有一个值。

建议使用background 简写属性,这样可以更好地兼容较老的浏览器,少写很多代码,当然你也可以分开使用,比如:

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样,可以使用16进制、rgb、rgba等设置颜色。如下实例:

如下图显示:

注意:background-color: transparent; 指透明色,不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片,在早期网页制作中被广泛应用,如今已不建议大量使用。如下实例:

这里使用了一个125*125大小的图片,如下:

但是你会发现,整个网页铺满了图片,上面的代码默认会铺满整个页面从左到右,从上到下 。如果不想被平铺,可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片,如下:

多个图像以逗号隔开,在页面中多个图片会叠加显示,第一张图片显示在最顶端。

如下效果:

3、背景重复方式 —— background-repeat

它有如下几个属性:

实例如下:

4、背景图的位置 —— background-position

背景图片默认显示在左上角,语法如下:

如果要改变它的位置,可以使用关键字:top、bottom、left、right 和 center;或者使用长度值,如 100px 或 5cm;也可以使用百分数值。

x 可以取值 百分比| 数值| left | center | right。

y 可以取值 百分比| 数值| top| center | bottom。

当只设置一个值的时候,另一个会缺省为 center。

使用关键字,将背景图片水平居中,垂直居中:

使用百分比%:

50% 50% 等同于 center center,显示效果和上图一样。

还可以使用具体数值,比如 px、em、cm等。

显示效果如下:

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点,语法:

几种值得含义:

如下实例:

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸,可以通过此属性设置背景图片在元素上的大小,语法:

宽度和高度可以使用 数值、百分比%、cover 及 contain ;

数值:可以使用任何单位的数字,比如 px、em、cm等。如果设置一个值,第二个为\”auto(自动)\”。

百分比%:相对于其所在html原始宽度和高度,如果设置一个值,第二个为\”auto(自动)\”。

cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

如下示例:

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值:

如设置一个固定的背景图片,不跟随页面滚动:

滚动滚动条,会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下:

这个属性类似于 background-origin ,只不过它会裁剪背景图片,如下示例:

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合,语法:

属性值:

示例如下:

正常模式

luminosity 亮度模式

color 颜色模式

其它模式可以自己试试,看下有什么区别。

到此,我们了解了颜色和背景的使用方法,尤其是背景的使用,由于它的属性很多,可以简写也可以分开写,要想完全掌握,还得多练习,每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式,主要是可以少写很多代码。以上介绍难免有误,或不齐全,欢迎指出错误,并补充。

上篇:

不同语言,不同场景,透明颜色表示方法知多少

在程序开发的过程中,无论是使用Swift进行iOS/macOS应用开发,还是使用javascript、CSS进行网页设计,亦或使用java开发Android的APP应用或其他应用,C#开发桌面程序,颜色的透明度都是一个非常重要的设计元素。它能帮助我们创造出更加丰富、层次分明的用户界面。本文将分别介绍在Android、java、javascript、css、c#、Swift如何设置颜色的透明度,并探讨他们之间的异同。注意使用不同的编程语言,其透明颜色的表达的方式是一样,请注意它们表达的细节。下面我整理一些常见的表达方式,方便粉丝们查询学习。在开发过程中,

在Android的APP开发中,我们一般使用Java开发,使用16进制的透明颜色值来设置透明颜色。透明度的范围从00(完全透明)到FF(完全不透明)。格式为#AARRGGbb(没办法和谐一下),其中bb是透明度值,记住透明度表示在十六进制数据的开始。如果您想设置50%的透明度红色,可以使用#80FF0000。

在代码中设置透明颜色,您可以使用Color.parseColor方法解析颜色字符串,然后将其应用到视图的背景或文本颜色等。

如果您需要编程方式设置透明度,可以使用Color类的argb方法:

在XML中设置透明颜色:

我们在网页开发中,一定会使用到JavaScript语言,如果你想设置一个透明颜色,你可以使用RGBA颜色格式,其中A代表Alpha通道,即透明度。透明度的范围从0.0(完全透明)到1.0(完全不透明)。记住,这个的顺序正好和Android的表达正好相反,透明色在最后,而且范围是0-1

例如,创建一个半透明的颜色:

在这个例子中,红色的RGB值是255, 0, 0,透明度是0.5,意味着颜色是50%透明的。

如果使用Canvas API进行绘图,设置背景为透明,可以使用clearRect方法:

这样,将清除画布上指定区域的像素,使其透明。如果设置整个画布的背景透明,可以直接设置canvas元素的style.background属性:

这样设置后,画布将不会有任何背景色,默认是透明的。

我们在网页开发中,我一定离不开样式的表达。CSS中实现透明颜色可以使用rgba()或hsla()函数,其中a代表透明度(alpha),取值范围从0(完全透明)到1(完全不透明),这个和javascript的表达方式一致。另外,CSS3中还引入了opacity属性,它会影响一个元素及其所有子元素的透明度。

以下是使用rgba()和hsla()的例子:

使用opacity属性的例子:

选择使用rgba()还是hsla(),这个取决于你的爱好,使用基于红绿蓝(RGB)色彩模型还是基于色相(Hue)、饱和度(Saturation)、亮度(Lightness)的颜色模型。一般情况,rgba()更常用,因为它更直观。

在Java中,\”透明色\”通常指的是一种具有透明效果的颜色。在图形用户界面(GUI)中,你可能会使用这种颜色来创建带有透明背景的组件或图片。

在Java中,你可以使用Color类来表示透明色,但是需要注意的是,Color类本身不支持完全的透明度。要表示透明色,你需要使用Graphics2D类,它提供了对透明度编辑的支持。

以下是一个示例代码,展示如何在Java中设置一个透明颜色:

在这个例子中,TransparentExample类继承自JPanel,并覆盖了paintComponent方法。在paintComponent方法中,创建了一个具有120个透明度的红色,并使用Graphics2D对象绘制了一个半透明的红色矩形。这里面表达方式又有所不同,请注意细节,范围都是0-255,透明度的值最后。

在C#中,如果你想要设置一个颜色为透明,你可以使用Color结构体,并使用它的构造函数来指定透明度(Alpha值)。Color结构体中的每个分量(红色、绿色、蓝色和透明度)都是一个8位的整数,范围从0到255。透明颜色的Alpha值通常是0(完全透明)到255(完全不透明)。这个和Android的表示方式是一致的。

下面是一个创建具有特定透明度的透明颜色的示例代码:

在这个例子中,FromArgb 方法的第一个参数是Alpha值,后面跟着的三个参数分别是红色、绿色、蓝色分量的强度。

在Swift中,设置颜色的透明度主要通过UIColor(在UIKit中)或Color(在SwiftUI中)的withAlphaComponent方法来实现。这个方法允许你为颜色添加一个alpha值(即透明度),其取值范围是0.0(完全透明)到1.0(完全不透明)。这是和上面都不一样的地方,四个变量取值范围都是0-1。

在SwiftUI中,Color的初始化器直接接受一个opacity参数来设置透明度,这使得在SwiftUI中设置颜色透明度变得非常直观。

在UIKit中,你需要先创建一个颜色,然后使用withAlphaComponent方法来修改其透明度。

设置颜色的透明度都是一个简单而强大的设计工具。通过合理地使用透明度,我们可以创造出更加吸引人、层次分明的用户界面,以及友好人机交互体验。希望本文能帮助你更好地理解他们在透明度设置上的异同,并在实际项目中灵活运用。

同时建议,只有通过不断实践和探索,你将能够更加熟练地掌握这些技术,为用户创造出更加优秀的界面体验。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。