CSS 通过使用十六进制代码设置特定的颜色预览模式
你是否知道在 CSS 中还有其他表示颜色的方法？其中的一种方法称作 hexadecimal code（十六进制编码），简写为hex code。
我们通常使用decimals，也就是十进制数字，它对每一位数字使用符号0到9来表示。Hexadecimals（或hex）是十六进制数字，这意味着它使用十六个不同的符号。像十进制那样，符号 0-9 代表数值零到九，再使用 A、B、C、D、E、F 代表数值十到十五。合在一起，用 0 到 F 可以代表hexadecimal中的每一位数字，共为我们提供 16 个可能的数值。你可以在这儿找到更多关于十六进制数字的信息。
在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 (R)、绿色 (G) 和蓝色 (B) 成分。例如，#000000是黑色，同时也是可能的数值中最小的。你可以在这儿找到更多关于 RGB 颜色系统的信息。
把body元素的 background-color 由black替换成其hex code表示，即#000000。
body {
background-color: #000000;
}
CSS 十六进制白色表达方式
0是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。
F是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。
让我们通过把 background-color 的 hex code 修改为#FFFFFF，以把body元素的背景改为白色。
body {
background-color: #FFFFFF;
}
CSS 十六进制RGB红色表达方式
你可能会疑惑为什么我们使用6位数来表示一种颜色而不是只用一位或二位，答案是使用6位数可提供给我们巨大数量的颜色变化。
会有多少种可能的颜色？16 个值和 6 个位置意味着我们有 16 的 6 次方，或者说超过 1600 万种可能的颜色。
Hex code 遵循 red-green-blue（红-绿-蓝），或者叫rgb格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯红色，你只需要在第一和第二位使用F（最大可能的数值），且在第三、第四、第五和第六位使用0（最小可能数值）。
通过对 background-color 应用 hex code 值#FF0000以把body元素的背景色设置为红色。
body {
background-color: #FF0000;
}
CSS 十六进制RGB绿色表达方式
记住hex code遵循 red-green-blue（红-绿-蓝），或称为rgb格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯绿色，你只需要在第三和第四位使用F（最大可能的数值），且在其它位使用0（最小可能数值）。
通过对 background-color 应用 hex code 值#00FF00以把body元素的背景色设置为绿色。
body {
background-color: #00FF00;
}
CSS 十六进制RGB蓝色表达方式
hex code遵循 red-green-blue（红-绿-蓝），或称为rgb格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯蓝色，你只需要在第五和第六位使用F（最大可能的数值），且在其它位使用0（最小可能数值）。
通过对 background-color 应用 hex code 值#0000FF以把body元素的背景色设置为蓝色。
body {
background-color: #0000FF;
}
CSS 十六进制RGB混合颜色
从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。
例如，橙色是纯红，混合一些绿，没有蓝。
通过对 background-color 应用 hex code 值#FFA500以把body元素的背景色设置为橙色。
body {
background-color: #FFA500;
}
CSS 灰色度设置
从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。
我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。
通过对 background-color 应用 hex code 值#808080以把body元素的背景色设置为灰色。
body {
background-color: #808080;
}
CSS 不同等级的灰度设置
通过平均混合所有三种颜色，我们还可以得到其他色度等级的灰色，这样我们可以非常接近纯黑色。
通过对 background-color 应用 hex code 值#111111以把body元素的背景色设置为深灰色。
CSS 十六进制RGB表达式缩写
许多人对超过 1600 万种颜色感觉十分地抓狂，并且 hex code 非常难以记忆。幸运的是，你可以缩短它。
例如，红，hex code 是#FF0000，可被缩写成#F00。也就是说，一位表示红，一位表示绿，一位表示蓝。
这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把#FF0000和#F00解释为完全相同的颜色。
继续前进，尝试使用#F00把body元素的背景色改为红色。
body {
background-color: #F00;
}
CSS 使用rgb属性设定颜色
在 CSS 中表示颜色的另一个方法是使用rgb值。
代表黑色的 RGB 值看起来是下面的样子：
rgb(0, 0, 0)
代表白色的 RGB 值看起来是下面的样子：
rgb(255, 255, 255)
使用rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。
如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的rgb，和 hex code 一样有完全相同数量的可能数值。
让我们用黑色的 RGB 值rgb(0, 0, 0)替换掉body元素背景色的 hex code。
body {
background-color: rgb(0，0，0);
}
CSS 使用rgb属性设定白色
代表黑色的 RGB 值看起来是下面的样子：
rgb(0, 0, 0)
代表白色的 RGB 值看起来是下面的样子：
rgb(255, 255, 255)
使用rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。
把body元素的背景色从黑色的 RGB 值修改为白色的rgb值rgb(255, 255, 255)。
body {
background-color: rgb(255, 255, 255);
}
CSS 使用rgb属性设定红色
和使用 hex code 一样，你可以通过不同数值的组合来表示 RGB 中不同的颜色。
这些数值遵循 RGB 顺序模式：第一位表示红色，第二位表示绿色，第三位表示蓝色。
把body元素的背景色修改为红色的 RGB 值：rgb(255, 0, 0)。
body {
background-color: rgb(255, 0, 0);
}
CSS 使用rgb属性设定绿色
现在将body元素的背景色修改为绿色的rgb值：rgb(0, 255, 0)。
body {
background-color: rgb(0, 255, 0);
}
CSS 使用rgb属性设定蓝色
将你的body元素的背景色修改为蓝色的 RGB 值：rgb(0, 0, 255)。
body {
background-color: rgb(0, 0, 255);
}
CSS 使用rgb属性设定混合颜色
就像使用 hex code 一样，你可以使用不同数值的组合在 RGB 中混合出各种颜色。
将body元素的背景色修改为橙色的 RGB 值：rgb(255, 165, 0)。
body {
background-color: rgb(255, 165, 0);
}