大家好,欢迎来到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