颜色的基础知识

颜色的基础知识使用十六进制编码获得指定颜色在 CSS 里面 我们可以使用 6 个十六进制的数字来代表颜色 每两个数字控制一种颜色 分别是红 R 绿 G 蓝 B

大家好,欢迎来到IT知识分享网。

颜色的表示

使用十六进制编码获得指定颜色

计算机中,可以使用 6位十六进制数来代表颜色,每两位数字控制一种基色,分别是红(R)、绿(G)、蓝(B)。

橘色是纯红色混合一些绿色而成,其中没有蓝色。 在十六进制编码里面,它可以写成#FFA500。

body { 
    color: #000000; } 
颜色 十六进制编码
黑色 000000
红色 FF0000
绿色 00FF00
蓝色 0000FF
道奇蓝 1E90FF
橙色 FFA500

通过三原色(红、绿、蓝),我们可以创建 1600 万种不同颜色。

使用缩写的十六进制编码。

#AABBCC可以简写为#ABC,红色的 #FF0000 十六进制编码可以缩写成 #F00。 在这种缩写形式里,三个数字分别代表着红(R)、绿(G)、蓝(B)三原色。这样,颜色的数量减少到了大约 4000 种。

颜色 十六进制编码缩写形式
红色 F00
绿色 0F0
蓝色 00F
紫红色 F0F

使用RGB值

RGB 值用 3个十进制数(数值范围从 0 到 255) 来描述一种颜色。

body { 
    background-color: rgb(0, 0, 0); } 
颜色 RGB值
黑色 (0, 0, 0)
白色 (255, 255, 255)
蓝色 (0, 0, 255)
红色 (255, 0, 0)

使用RGBA值

RGBA值即在RGB值的基础上再加一维:透明度(Alpha),取值为0~1。其中 0 代表完全透明,1 代表完全不透明。

例如:

h4 { 
    text-align: center; background-color: rgba(45, 45, 45, 0.1); }/*表示背景是黑灰色,因为设置了透明度为 0.1,所以几乎是透明的。*/ 

网页标签的颜色可以通过浏览器开发者工具来进行查看。

色彩设计

在网站设计里,颜色能让内容更醒目,能调动情绪,从而创造舒适的视觉体验。 不同的颜色组合对网站的视觉效果影响很大,精妙的设计都需要适宜的颜色来美化页面内容。

补色搭配

色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时,这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而,补色搭配能形成强烈的视觉对比效果

这与我们许多人在学校学的过时的 RYB 色彩模式不同,RYB 有不同的原色和补色。 现代色彩理论使用 RGB 模型(如在计算机屏幕上)和CMY(K)模型(如在印刷中)。

电脑显示器和各类屏幕都是基于颜色叠加的模型:将红(R)、绿(G)、蓝(B)三原色的色光以不同的比例相加,就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式(RGB Color Model)。 红色(R)、绿色(G)和蓝色(B)叫作三原色。

设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法选定主色之后,在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比,又不失和谐。

下面是使用分裂补色搭配法创建的三个颜色:

颜色 HEX颜色码
橙色 #FF7F00
蓝绿色 #00FFFF
树莓红 #FF007F

注意颜色特性

颜色具有多种特性,包括色相饱和度亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。(其中‘h’代表色相‘,s’ 代表饱和度,‘l’代表亮度)。

  • 色相

色相是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。 以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。 在 hsl() 里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

  • 饱和度

饱和度 是指色彩的纯度,也就是颜色里灰色的占比。 饱和度越高则灰色占比越少,色彩也就越纯;反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

  • 亮度

亮度 决定颜色的明暗程度,也就是颜色里白色或者黑色的占比。 其中,100% 的亮度表示纯白色, 0% 的亮度则表示纯黑色;而 50% 的亮度就表示在色相中选取的颜色。

下面是一些使用 hsl() 描述颜色的例子,颜色都为满饱和度,中等亮度:

颜色 HSL
hsl(0, 100%, 50%)
hsl(60, 100%, 50%)
绿 hsl(120, 100%, 50%)
蓝绿 hsl(180, 100%, 50%)
hsl(240, 100%, 50%)
品红 hsl(300, 100%, 50%)
.green { 
    background-color: hsl(120, 100%, 50%); } 

hsl() 使 CSS 更改颜色色调更加方便。 比如,给一个纯色添加白色可以调出更浅的色调;添加黑色可以创造更深的色调。 另外,还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 这在你想获取一个基准色的变种的情景下会十分有用。

所有元素的默认 background-color 都是 transparent。

颜色渐变

background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255)); 
<style> div{ 
    border-radius: 20px; width: 70%; height: 400px; margin: 50 auto; background: repeating-linear-gradient( 90deg, yellow 0px, blue 40px, green 40px, red 80px ); } </style> 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/134766.html

(0)
上一篇 2025-07-09 19:20
下一篇 2025-07-09 19:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信