实际开发中，会有专门的测量工具，直接使用测量工具就能快速得到颜色值，或者设计稿中会给出具体值，直接使用就可以，一般不需要自己设计颜色。
但有时为了网页整体好看，也可以自己微调颜色，只要符合需求就可以了。
通常我们在设置样式时，为了方便调试，都会给盒子先设置背景颜色，待调试好样式之后，再把背景色去掉。
文字颜色 color 和背景颜色 background-color 的属性值有以下四种表示方式：
可以用关键词表示
颜色关键词简单来说就是用颜色的英文单词来表示，比如 red 表示红色、blue 表示蓝色等
也可以用 rgb 或者 rgba 表示
rgb 就是颜色的三原色，它的最小取值是0 ，最大取值是 255 ，例如 rgb(255,0,0) 表示红色，rgb(0,0,0) 表示黑色等
rgba 比 rgb 三原色多了一个 a 透明度，a 的取值范围在 0 - 1 之间，0 表示完全透明，1 则表示不透明，写法为 rgba(0,0,255,0.3)，为了方便，也可以用省略写法：rgba(0,0,255,.3)
还可以用十六进制表示
十六进制是以 # 开头的，通常由六位十六进制的数字组成，每两个数字为一组表示一个颜色，每个数字的取值范围是：0 - 9，a, b, c, d, e, f
写法为：#ffffff 白色，#000000 黑色
我们可以发现，在以上的颜色表示中，三组颜色中，每组数字都相同，这里就可以采用省略写法，每组相同的数字，可以只写一个，这时上面的颜色值就可以表示为：#fff 白色，#000 黑色
但是要注意，必须是三组数字都相同才可以简写，如 #aadd5b 就不能写成 #ad5b，因为最后一组数字不相同，所以这种写法是错误的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: chartreuse;
}
.one {
color: rgb(0, 0, 0);
}
p {
color: #f3c;
}
</style>
</head>
<body>
<div class="box">
<div class="one">颜色取值1</div>
<p>颜色取值2</p>
</div>
</body>
</html>
