量单位

CSS支持许多度量，包括绝对单位（如英寸、厘米、点等），以及相对单位（如百分比和em）。在样式规则中指定元素大小时需要各种度量值，例如border=“1px solid red”。

下面列出所有的CSS度量单位和例子：

颜色值

CSS使用颜色值来指定颜色。通常，它们用来为元素的前景（即文本）或元素的背景设置颜色，以及边框的颜色和其他装饰效果。

可以用各种格式指定颜色值。下表列出了所有可能的格式：

十六进制码

十六进制码是用6位十六进制的数来表示颜色的值。前两个数字（RR）表示红色值，后两个数字是绿色值（GG），最后两个数字是蓝色值（BB）。每个十六进制代码以符号#开头。

短十六进制码

这是十六进制码的简称。重复每个数字后得到一个相等的六位数颜色值。例如：#6A7变为#66AA77。短十六进制码都以符号#开头。

RGB值

此格式的颜色值使用rgb()属性指定的，该属性接受三个值，分别表示红色、绿色和蓝色，每个值都是介于0和255之间的整数或百分比。

TML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

1600万种不同颜色

三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

灰暗色调

以下展示了灰色到黑色的渐变

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

站开发入门指南：多种色值写法。

接下来给大家介绍几个常用的设置颜色色值的方式。颜色色值的设置在样式设置中是非常常用的，包括背景颜色、渐变颜色、边框颜色、字体颜色等等，很多的地方都可能需要用到颜色色值的设置。

·之前已经讲过一种最基础的方式，就是这种关键字的方式，也就是用英文单词这样的方式。之前讲过有很多颜色的名字都是可以用的，像之前一直用的设置颜色的方法也都是这种色值的方式，这种关键字的方式。

·另外一种是非常常用的，是十六进制。十六进制概念如果不理解其实也没有关系，可以简单的把它理解为有十六个数，0123456789，然后是aobcdef，从0到f是从小到大的逻辑。

它的写法大概是这样的样子，16进制的颜色的写法大概是这样的样子。这个样子的特点就是一开头这里是有个井号，然后是两两一组的，第一组就是表示红色，第二组是表示绿色，第三组是表示蓝色。

·ff就表示颜色，比如这里是红色，它是最浓的，颜色强度是最大的。三种颜色就相当于也是三原色去拼，拼起来就混合成一种最终的颜色效果。

·00就表示颜色没有绿色的色值，这里如果也是ff就表示蓝色也是最浓的。所以可以尝试的去把它设置一下，会发现它就变成了这样的颜色。

·像这种写法其实如果两两的字符是一样，其实可以简写成这样的一种写法。这两者其实相当于是一样的了。

有几种非常常用的颜色的色值，其实一看就应该知道的，给大家罗列一下。比如这种3个f，也就是这种6个f，其实是一样的，这个明显就是一个白色了，3个0就是没有，这个跟6个0是一样的，就是纯黑。

像这种直接写6个的，就是红色，正红色，ff放中间其实就是绿色，这样就是一个蓝色，这个应该都很好理解，就是三原色的概念。如果不了解三原色的概念，可以自己去查资料了解一下，可以给它去设置一下，看一下是不是蓝色，大家可以看到就是一个蓝色，这是16进制的最基本的用法。

但是它其实还可以加两位，加两位之后，最后的两位就是表示的是不透明度的概念。不透明度的概念其实这里也可以称作是alpha，阿尔法其实就是可以表示是不透明度的概念。像这00就是最小，就是0的不透明度，就是最小的不透明度，就是完全透明。

也可以试一下，比如用这里给它加一个00，这就没有了，ff其实不加不透明度的设定，其实它的不透明度就是1，就是完全的看得见，没有任何的透明的状态。

像这个颜色，这个16进制的色值，其实是不用去记的，因为很多设计软件里面都非常方便的去给到颜色的16进制的色值。比如可以看到这样的figma设计软件，选择填充颜色，会看到这里有很多的颜色的选项可以选，其中最好复制的就是HEX，HEX就是表示16进制，16进制颜色一复制，放到CSS代码里面，就直接就可以用了。它就可以生效了，所以是不用去记，不用去算某个色值是多少。

·然后像其他的后面要介绍这种rgb、hsl这几种，就是这里也能够让我们去很好的去知道具体的颜色的色值的设置。但是复制起来我觉得最方便的还是HEX，也就是16进制的，所以这个东西一般来说就是直接复制过来用。

·然后来看下RG.B，RG.B就很好理解了，RGB就是red、green还有就是blue，就是也是三原色，就这样一个设置，注意它的写法是这样的，RGB然后一个原跨号，然后里面是三个颜色的色值，然后中间用这种逗号来分隔一下，然后这个都是每一个颜色的色值都是0到255，0到255，0是最小，25是最大。

·如果说像这个，车里就是红色强度已经是最强了，是这样的一个意思，它这个数值越小，颜色强度就越弱。比如说可以把这个颜色给它复制过来看一下，它就是这样的一个颜色，比如说可以调一下，比如说125就变成这样的一个颜色了。

·那它也有一个RGBA，其实就是后面再加一位这种0到1的值，比如说0.2，0.2就是它的一个不透明度了，不透明度，比如说给它这里去设置一个0.2，那它就有这个不透明度透明的效果了。

·这个是RGB和RG.BA，这个也很好理解，注意它每一位都是0到255这样的一个设置方式，每一位的这个数值。

·如果是这个纯白纯黑，其实这里255、255、255，在255、255、255，三个255其实就是一个纯白，跟这个ff是一样的，然后纯黑是这样，零零零三个0。

·那这个其他的红色、这个就更好理解。红色就是255，其他都是0。绿色就是第二个255，其他都是0。蓝色255，其他都是0。

·来看一下另外一个叫HSL和H.S.LA。这个a大家一看就知道什么意思了，a还是阿尔法的意思，也就是它的不透明的值。

·HSL是什么意思？a是一种颜色模式。它其实英文的全称应该是Hue Saturation，还有lightnes.s，也就是色相、饱和度、亮度三个这样的方面来设置颜色的值。它的写法大概是这个样子，给大家看一下，这个我也很少用，是这样的写法。

·它这里其实就是HSL，三个部分分别对应H.SL。H其实是色轮的概念，它就是有个360度，所以H的范围是0到360。另外的两个S就是0到100%，L也是一样的0%到10.0%。如果是HSLA，它其实也是0到1，比如0.2，是这样一个模式。

所以它这个写法其实跟RGB的基本的格式是一样的，都是它的颜色模式的名字，圆括号，里面再是每一个对应的设置内容的值。这是这三种颜色的色值的设置模式。

·自己最常用的就是16进制的，还有比较常用的，还有就是RGB和RGBA。