前端须知上（颜色的概念）

最新推荐文章于 2022-02-28 10:01:04 发布

原创最新推荐文章于 2022-02-28 10:01:04 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端学习专栏收录该内容

16 篇文章

订阅专栏

本文围绕CSS颜色展开，介绍了色调、饱和度、亮度、对比度、Web安全色等概念，强调Web安全色可避免不同环境显示差异。还阐述了颜色在前景色与背景色上的应用，包括色彩关键字、RGB模式、HSL模式等颜色值类型，以及透明度的设置。

文章目录

颜色

关于css的颜色相关概念：

色调：很接近大众口中所说的颜色。
饱和度：是指颜色中灰色的含量；
亮度：是指颜色中灰色的含量。
对比度：前景色与背景色之间的差异。
Web安全色：不需要担心颜色在不同硬件环境，操作系统和浏览器之间的差异。
上述概念只有Web安全色和我们有直接关系，其他概念我们只需要了解即可。

色调

色调的含义是指图像的相对明暗程度，在彩色图像上表现为颜色。
一个作品的彩色在明度，纯度，色相这三个要素中，某种因素起起主导作用，就可以称为是某种色调。通常可以从色相，明暗，冷暖，纯度四个方面来定义一幅作品的色调。
补充：

暖色调：一般以红黄为主紫色，橘色等都为暖色调。
冷色调：黑灰蓝为主为冷色调。

饱和度

饱和度的含义是指色彩的纯度，也叫饱和度或彩度，是"色彩三属性"之一.简单来说亮度就是颜色中灰色的含量。
饱和度最大时,颜色中灰色的含量为零;饱和最小时,颜色基本就是灰色,饱和度与灰色成反比。

亮度

亮度含义是指发光体的光源面积之比,定义为该光源单位的亮度,即单位投影面积上的发光强度。简单来说就是,亮度中黑色的含量。亮度最大时,颜色中黑色为零.亮度最小时,亮度变得非常暗。亮度与黑色成反比。

对比度

对比度的含义是指明暗区域最亮的白和最暗的黑之间不同亮度层次的测量,差异范围越大代表对比越大,差异范围越小代表对比越小。如果使用css的方式来解释对比度的话,就是指前景色与背景色之间的差异。差异越大,对比度越高。

Web安全色

很多的颜色在不同浏览器中显示是存在差异的,这是我们开发时所不希望出现的。Web安全色可以使得我们不需要担心颜色在不同硬件环境,操作系统和浏览器之间的差异。
Web安全色目前基本具有216种颜色,其中彩色为210种,非彩色为6种。所以,有些资料上会说Web安全色共有210种。因为这210种,是在开发时使用Web安全色。

注意:关于Web安全色的具体参数和颜色,参考https://www.bootcss.com/p/websafecolors/

颜色应用

前景色与背景色

在css中的前景色和背景色的应用就是color和background-color两个属性,其中color属性表示前景色,background-color属性表示背景色。

前景色

css中的color属性不仅仅表示前景色,更多表示为HTML元素的文本内容颜色。text-color属性会更准确定位元素文本颜色。在开发过程中最常使用的是color。
示例代码:

p {
      color: cadetblue;
    }

演示效果:
在这里插入图片描述

背景色

css 的 background-color属性是用来设置HTML元素的背景色,该属性的默认值 transparent(透明)。
示例代码:

p {
      background-color: turquoise;
    }

演示效果:
在这里插入图片描述

改变页面的背景颜色

body {
      background-color: skyblue;
    }

演示效果:
在这里插入图片描述

颜色值的类型

无论是color还是background-color属性都需要用到颜色值,这个颜色是一种标准RGB色彩空间(sRGB color space)的颜色。
颜色值可以通过如下三种类型定义:

色彩关键字
RGB色彩模式
HSL色彩模式
注意:虽然css颜色值是被准确定义的,但在不同的输出设备仍有显示差别。

色彩关键字

色彩关键字是一个区分大小写的标识符,其表示一个具体的颜色,如 red 红色, blue 蓝色等从css1到css3本版本发展关键字的数量变化是比较大的:
css1版本时只有16个基本颜色,称为HTML基本颜色。
css2版本时增加了orange这个颜色。
css3版本时增加的颜色数量比较多,可参考MDN 网站的色彩关键字文章。
注意:除了16个HTML基本颜色之外,其他任何颜色都需要计算机程序转换,最终导致不同浏览器显示效果不同。
transparent 关键字是一个完全透明的颜色,并且是 background-color 的默认值。
transparent 在css3中才被定义为一个真实的颜色。

RGB模式

RGB是一个简称,称为Red-Green-Blue,即为红-绿-蓝。RGB色彩模式是工业界的一种颜色标准,是通过对红,绿,蓝三个颜色通道的变化以及他们相互之间的叠加来得到各式各样的颜色。
在css中使用RGB色彩模式有如下2种方式:
十六进制符号#RRGGBB和#RGB

#RRGGBB:是#符号后面编写6个十六进制字符(0-9,A-F)
#RGB:是#符号后面编写3个十六进制字符(0-9,A_F)
当#RRGGBB格式中的两个R或G或B值相同,就可以改写为#RGB格式.例如#ff003可改写成#f03。
函数符rgb(R,G,B)
这里的R,G,B的值可以使用0~255之间的值
这里的R,G,B的值也可以使用0%~100%之间的值
说明:rgb(R,G,B)的255和100%是一致的,相当于十六进制中的FF。
示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RGB颜色表示法</title>
  <style>
    .p1 {
      color: rgb(255, 0, 0);
      /* 设置透明度 */
      opacity: 0.5;
    }

    .p2 {
      color: #f00;
      /* #ff000000 */
    }

    .p3 {
      /* a 表示透明度，取值范围为0.0~0.1 */
      color: rgba(255, 0, 0, 0.5);
    }
  </style>
</head>

<body>
  <p class="p1">熬夜伤身</p>
  <p class="p2">熬夜伤身</p>
  <p class="p3">熬夜伤身</p>
</body>

</html>

示例效果
在这里插入图片描述

HSL 模式(使用极少)

HSL是一个简称，全称为 Hue-Saturation-Lightness，即色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。

在 CSS 中使用 HSL 色彩模式是通过 hsl(H, S, L) 函数实现的，具体含义如下：

H 表示色调，其值范围为 0 ~ 360 之间的一个角度。
S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。

透明度

如果值为 0 或 0.0 则表示完全透明
如果值为 0.5 则表示半透明
如果值为 1 或 1.0 则表示不透明
示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透明度</title>
  <style>
    div {
      background-color: lightcoral;
    }

    .light {
      opacity: 0.2;
    }

    .medium {
      opacity: 0.5;
    }

    .heavy {
      opacity: 0.9;
    }
  </style>
</head>

<body>
  <div class="light">又是一个睡不着的夜晚</div>
  <div class="medium">又是一个睡不着的夜晚</div>
  <div class="heavy">又是一个睡不着的夜晚</div>
</body>

</html>