关于web中的颜色表示方法,你知道多少?

本文详细介绍了Web中颜色的各种表示方式,包括颜色名称、十六进制、RGB、RGBA、HSL、HSLA、opacity、HWB、Lab、Lch、color函数以及CMYK等,并探讨了它们的用途和特性。对于前端开发者来说,理解这些颜色表示方法有助于更好地控制网页的视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

想要表示web中的各种颜色,大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中,是远不止这两种的。今天这篇文章就和大家聊一聊,在web中颜色的各种表示方法。

以如下代码为例,大家可以复制代码看看效果:

HTML

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.box {
    width: 200px;
    height: 200px;
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
}
.box > div {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

英文单词

HTML 和 CSS 颜色规范中预定义了 140+ 个颜色名称,可以点进这里进行查看。直接用英文单词的好处是直接明了,缺点是140+个单词确实难记,也不能包含所有的颜色。

.one { background-color: red; }
.two { background-color: green; }
.three { background-color: blue; }

十六进制

十六进制表示颜色:#RRGGBB ,这里的十六进制实质就是RGB的十六进制表示法,每两位表示RR(红色)、GG(绿色)和 BB(蓝色)三色通道的色阶。所有值必须在 00 到 FF 之间。

.one { background-color: #00FFFF; }
.two { background-color: #FAEBD7; }
.three { background-color: #7FFFD4; }

对于类似于 #00FFFF 的颜色格式也可以缩写为 #0FF

.one { background-color: #0FF; }

如果需要带上透明度,还可以像下面这样增加两个额外的数字:

.one { background-color: #00FFFF80; }

RGB

rgb() 函数中,CSS语法如下:

rgb(red, green, blue)

每个参数 red, green, blue 定义颜色的强度,可以是 0 到 255 之间的整数或百分比值(从 0% 到 100%)

.one { background-color: rgb(112,128,144); }
.two { background-color: rgb(30%,10%,60%); }
.three { background-color: rgb(	0,139,139); }

十六进制和RGB的原理都是利用了光的三原色:红色,绿色,蓝色。利用这三种颜色就能组合出上千万种颜色。简单的计算一下,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216种。至于为什么是256级,因为 0 也是数值之一。

RGBA

RGBA就是在RGB之上扩展了一个 Alpha 通道 ,指定对象的不透明度。

.one { background-color: rgba(112,128,144, 0.5); }
.two { background-color: rgb(30%,10%,60%, 0.2); }
.three { background-color: rgb(	0,139,139, 0.5); }

HSL

HSL 分别代表 色相(hue)、饱和度(saturation)和亮度(lightness),是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

CSS语法如下:

hsl(hue, saturation, lightness)
  • 色相:色轮上的度数(从 0 到 360)- 0(或 360)是红色,120 是绿色,240 是蓝色。
  • 饱和度:一个百分比值; 0% 表示灰色阴影,而 100% 是全彩色。
  • 亮度:一个百分比; 0% 是黑色,100% 是白色。

例子:

.one { background-color: hsl(20, 100%, 50%); }
.two { background-color: hsl(130, 100%, 25%); }
.three { background-color: hsl(240, 80%, 80%); }

HSLA

HSLA 和 HSL 的关系与 RGBA 和 RGB 的关系类似,HSLA 颜色值在 HSL 颜色值上扩展 Alpha 通道 - 指定对象的不透明度。

CSS语法如下:

hsla(hue, saturation, lightness, alpha)

例子:

.one { background-color: hsla(20, 100%, 50%, 0.5); }
.two { background-color: hsla(130, 100%, 25%, 0.75); }
.three { background-color: hsla(240, 80%, 80%,0.4); }

opacity

opacity 属性设置一个元素了透明度级别。

CSS语法如下:

opacity: value|inherit;

它与 RGBA 中的 A 在行为上有一定的区别:opacity 同时影响子元素的样式,而 RGBA 则不会。感兴趣的可以试一试。

关键字

除了 <color>s 的各种数字语法之外,CSS还定义了几组关于颜色的关键字,这些关键字都有各自的有点和用例。这里介绍一下两个特殊的关键字 transparentcurrentcolor

transparent

transparen 指定透明黑色,如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素;或者你不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计。 transparent 就能派上用场了。

在CSS1中,transparent 是作为 background-color 的一个值来用的,在后续的 CSS2 和 CSS3 中, transparent 可以用在任何一个有 color 值的属性上了。

.one { 
    background-color: transparent;
    color: transparent;
    border-color: transparent;
 }

currentcolor

currentcolor 关键字可以引用元素的 color 属性值。

.one { 
    color: red;
    border: 1px solid currentcolor;
 }

相当于

.one { 
    color: red;
    border: 1px solid red;
 }

下面介绍的这些目前主流浏览器还没有很好的支持,但是已经列为CSS4标准了,所以了解一下也是挺好的。

HWB

hwb() 函数表示法根据颜色的色调、白度和黑度来表示给定的颜色。也可以添加 alpha 组件来表示颜色的透明度。

语法如下:

hwb[a](H W B[/ A])

例子:

hwb(180 0% 0%)
hwb(180 0% 0% / .5)
hwb(180, 0%, 0%, .5); /* 使用逗号分隔符 */

目前只有Safari支持。

Lab、Lch

lab() 函数表示法表示 CIE L * a * b * 颜色空间中的给定颜色,L* 代表亮度,取值范围是[0,100]; a* 代表从绿色到红色的分量,取值范围是[127,-128]; b* 代表从蓝色到黄色的分量 ,取值范围是[127,-128]。理论上可以展示出人类可以看到的全部颜色范围。

语法如下:

lab(L a b [/ A])

例子:

lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);

lch() 函数表示法表示CIE LCH 颜色空间中给定的颜色,采用了同 L * a * b * 一样的颜色空间,但它采用L表示明度值,C表示饱和度值,H表示色调角度值的柱形坐标。

语法如下:

lch(L C H [/ A])

例子:

lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);

关于常用颜色空间的概念,可以自行查询,或者点击这篇文章进行了解。

color()

color() 函数表示法允许在特定的颜色空间中指定颜色。

语法如下:

color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )

例子:

color(display-p3 -0.6112 1.0079 -0.2192);
color(profoto-rgb 0.4835 0.9167 0.2188);

这里可以了解一下色域标准

CMYK

CMYK印刷四色模式

印刷四色模式,是彩色印刷时采用的一种套色模式,利用色料的三原色混色原理,加上黑色油墨,共计四种颜色混合叠加,形成所谓“全彩印刷”。四种标准颜色是:C:Cyan = 青色,又称为‘天蓝色’或是‘湛蓝’M:Magenta = 品红色,又称为‘洋红色’;Y:Yellow = 黄色;K:blacK=黑色。此处缩写使用最后一个字母K而非开头的B,是为了避免与Blue混淆。CMYK模式是减色模式,相对应的RGB模式是加色模式。

电脑显示屏使用 RGB 颜色值显示颜色,而打印机通常使用 CMYK 颜色值显示颜色。在CSS4标准中,计划利用 device-cmyk() 函数来实现。

语法如下:

device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )
<cmyk-component> = <number> | <percentage>

例子:

device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);

参考

https://www.w3school.com.cn/cssref/css_colors_legal.asp

https://www.w3.org/TR/css-color-4/

https://www.cnblogs.com/ypppt/p/13229542.html

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

https://blog.csdn.net/gdymind/article/details/82357139

https://blog.csdn.net/JiangHui1211/article/details/84592774

最后

关于web中的颜色表示方法,基本就是这些。如果想要再深入了解的,可以点击文中的文字链接或文末的参考链接。

在Typora笔记中创建关于前端Web中常用长度单位和颜色表示方法的内容,可以按照以下结构编写: 标题:**前端Web开发常见长度单位与颜色表示指南** --- ### **一、长度单位** #### 1. 基本单位 - `px` (像素): 页面最基本的长度单位,适用于固定尺寸的设计。 - `%` (百分比): 根据视口大小动态调整的宽度,常用于响应式设计。 #### 2. CSS推荐单位 - `em`: 相对于元素的字体大小计算,适合自适应文本。 - `rem`: 相对于根元素(html)的字体大小,可用于全局布局。 - `vw/vh`: 视窗宽度/高度的1%,适合跨设备设计。 #### 3. 设备独立单位 - `cm`, `mm`, `in`: 分别代表厘米、毫米和英寸,主要用于印刷和打印相关的测量。 **实践示例:** ```css body { font-size: 16px; line-height: 1.5; /* 1.5em 或 24px (16 * 1.5) */ } .container { width: 80%; /* 或者 80vw */ } ``` --- ### **二、颜色表示方法** #### 1. RGB - 形式如:`rgb(255, 0, 0)`,红绿蓝分量分别介于0~255之间。 #### 2. RGBA - 同RGB,多了透明度(A),如:`rgba(255, 0, 0, 0.5)`。 #### 3. HSL / HSLA - 通过色相(hue)、饱和度(saturation)和亮度(lightness),如:`hsl(0, 100%, 50%)`。 #### 4. HEX - 六位十六进制数,例如#FF0000对应红色。 #### 5. CSS预设颜色关键字 - 有诸如`red`, `blue`, `white`等简短的颜色名。 **示例:** ```css background-color: #FF0000; /* 红色 */ color: hsl(0, 100%, 50%); /* 中灰色 */ border: 2px solid rgba(0, 0, 0, 0.3); ``` --- **
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值