CSS中常用的5种颜色单位

最新推荐文章于 2024-07-25 16:29:20 发布

燕穗子博客

最新推荐文章于 2024-07-25 16:29:20 发布

阅读量4.3k

点赞数 2

分类专栏： CSS 文章标签： javascript 开发语言 vscode java sqlite

本文链接：https://blog.csdn.net/m0_64346035/article/details/124075698

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

css中有丰富多彩的颜色，如何让计算机能知道我们想要的是哪种颜色呢？可以通过以下的颜色单位。

1:在CSS可以直接使用颜色的单词来表示不同的颜色

红色：red 蓝色：blue 绿色：green 黄色：yellow

注意：这种用的比较少不好描述，难记

2:使用RGB值来表示不同的颜色

- 所谓的RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色

- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);

- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有

- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字

使用百分数最终也会转换为0-255之间的数

0%表示0

100%表示255

-语法：RGB(红色，绿色，蓝色)

-注意：比较常用，计算机可以很好的识别

3:RGBA

-语法：RGB(红色，绿色，蓝色，透明度)，a:透明度（0-1） 1不透明，0透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，

十六进制： 0 1 2 3 4 5 6 7 8 9 a b c d e f

00 - ff

00表示没有，相当于rgb中的0

-ff表示最大，相当于rgb中255

只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色

每组表示一个颜色

第一组表示红色的浓度，范围00-ff

第二组表示绿色的浓度，范围是00-ff

第三组表示蓝色的浓度，范围00-ff

-语法：#红色绿色蓝色

红色：#ff0000

像这种两位两位重复的颜色，可以简写

比如：#ff0000 可以写成 #f00，#abc #aabbcc

常用的十六进制颜色：#f00 红色， #f60 橘色， #ccc 灰， #0f0 绿色， #000黑色， #fff 白色

5:HSL值 HSLA值

H 色相（0-360）hue

S 饱和度 saturation 颜色浓度0%-100%

L 亮度 lightness 颜色亮度0%-100%

A 透明度 alpha

以下为代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				/*background-color: rgb(161,187,215);*/
				/* background-color: rgb(255,255,255);	
				background-color: rgb(0,0,0);	 */
				/*background-color: rgb(100%,50%,50%);*/
				/*background-color: #00f;*/
				/*background-color: #abc;*/ /*#aabbcc*/	
				background-color: #0f0;
				/* background-color: hsl(10, 100%,50%); */
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

燕穗子博客

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中常用的5种颜色单位

css中有丰富多彩的颜色，如何让计算机能知道我们想要的是哪种颜色呢？可以通过以下的颜色单位。1:在CSS可以直接使用颜色的单词来表示不同的颜色红色：red 蓝色：blue 绿色：green 黄色：yellow注意：这种用的比较少不好描述，难记2:使用RGB值来表示不同的颜色- 所谓的RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);- 颜色的浓度需要一个0-255之.
复制链接

扫一扫