颜色

CSS 播客 - 006:颜色(第一部分)

颜色是任何网站的重要组成部分,在 CSS 中,有许多用于指定和操控颜色的选项。

如何确定要使用哪种颜色类型?如何使颜色呈半透明状态? 在本课程中,您将了解有哪些选项可帮助您为项目和团队做出正确的决策。

CSS 具有各种不同的数据类型,例如字符串和数字。颜色就是其中一种类型,它会使用其他类型(例如数字)来进行自身定义。

选择颜色

命名颜色

选择颜色最简单的方法是从 CSS 中的 148 种命名颜色中选择一种。这些是简单的英语名称,例如 purpletomatogoldenrod。根据 Web Almanac,一些最受欢迎的名称包括 blackwhiteredbluegray。我们的最爱包括 goldenrodalicebluehotpink

数字颜色

虽然使用具名颜色很方便,但您可能需要使用该组合中不提供的特定颜色。您可以通过几种不同的形式使用数值指定颜色。

十六进制颜色

h1 {
  color: #b71540;
}

十六进制表示法(通常简称为十六进制)是 RGB 的简写语法,用于为红色、绿色和蓝色(这三种原色)分配数字值。

十六进制范围为 0-9A-F。在六位数序列中使用时,这些值会转换为 0-255 的 RGB 数值范围,分别对应于红色、绿色和蓝色通道。

您还可以使用任何数字颜色定义 alpha 值。Alpha 值是透明度的百分比。在十六进制代码中,您需要在六位数序列中再添加两个数字,使其成为八位数序列。例如,如需以十六进制代码设置黑色,请写入 #000000。如需添加 50% 的透明度,请将其更改为 #00000080

由于十六进制标度为 0-9A-F,因此透明度值可能与您预期的不太一致。以下是添加到黑色十六进制代码 #000000 的一些关键常用值:

  • 完全透明的 Alpha 值为 0%(即 00):#00000000
  • 50% 的 Alpha 值为 80#00000080
  • 75% 的 Alpha 值为 BF#000000BF

如需将两位十六进制数转换为十进制数,请取第一个数字并将其乘以 16(因为十六进制数以 16 为基数),然后再加上第二个数字。以 75% 的 Alpha 值为例,使用 BF

  1. B 等于 11,11 乘以 16 等于 176
  2. F 等于 15
  3. 176 + 15 = 191
  4. 透明度值为 191,即 255 的 75%

RGB(红色、绿色、蓝色)

h1 {
  color: rgb(183 21 64);
}

RGB 颜色是使用 rgb() 颜色函数定义的,使用数字或百分比作为参数。数字需要在 0-255 范围内,百分比则需要介于 0% 到 100% 之间。RGB 采用 0-255 的比例,因此 255 相当于 100%,0 相当于 0%。

如需在 RGB 中设置黑色,请将其定义为 rgb(0 0 0),即红色、绿色和蓝色均为零。黑色也可以定义为 rgb(0% 0% 0%)。白色则恰恰相反:rgb(255 255 255)rgb(100% 100% 100%)

您可以通过以下两种方式之一在 rgb() 中设置 alpha。 在红色、绿色和蓝色参数的后面添加 /,或使用 rgba() 函数。Alpha 可以使用百分比或介于 0 到 1 之间的小数来定义。例如,如需在现代浏览器中设置 50% 的 Alpha 值黑色,请编写:rgb(0 0 0 / 50%)rgb(0 0 0 / 0.5)

HSL(色调、饱和度、亮度)

h1 {
  color: hsl(344 79% 40%);
}

HSL 代表色调、饱和度和亮度。色相描述的是色轮上的值,介于 0 到 360 度之间,从红色(既是 0 也是 360)开始。 色相为 180 或 50% 时,颜色会在蓝色范围内。 它是我们看到的颜色的来源。

一个颜色轮,其中包含以 60 度为增量显示的度数值标签,以便直观地了解每个角度值代表的内容

饱和度是指所选色相的鲜艳程度。完全去饱和的颜色(饱和度为 0%)将显示为灰度。最后,亮度是描述添加光线的白色到黑色的比例的参数。亮度为 100% 时,始终会显示白色。

使用 hsl() 颜色函数,您可以通过编写 hsl(0 0% 0%)hsl(0deg 0% 0%) 来定义纯黑色。这是因为色相参数定义了色轮上的角度,如果您使用数字类型,则介于 0-360 之间。您还可以使用角度类型,即 (0deg) 或 (0turn)。饱和度和亮度均以百分比定义。

直观地分解 HSL 颜色函数。色相使用的是色轮。饱和度显示灰色与蓝绿色相混合。亮度表示黑色到白色的变化。

hsl() 中,alpha 的定义与 rgb() 相同,即在色相、饱和度和亮度参数后面添加 /或者使用 hsla() 函数。Alpha 可以使用百分比或介于 0 到 1 之间的小数来定义。例如,如需设置 50% 的 Alpha 值黑色,请使用:hsl(0 0% 0% / 50%)hsl(0 0% 0% / 0.5)。使用 hsla() 函数,编写:hsla(0, 0%, 0%, 50%)hsla(0, 0%, 0%, 0.5)

高清色彩

RGB 和 HSL 用于定义 sRGB 色域中的颜色。新款显示器支持的颜色数量远远超出这些格式所能描述的范围,并且超出了 sRGB 色域。您可以使用各种 CSS 函数选择这些颜色。

color() 函数

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

借助 CSS color() 函数,您可以在特定颜色空间中选择颜色。第一个参数是要使用的色彩空间,用于定义以下通道的选项。与 rgb() 一样,您可以在 / 后面设置一个介于 01 之间的数字或百分比,以设置 Alpha 通道。

例如,上一个代码段中的深红色 RGB 颜色(定义为 rgb(183 21 64))可以使用百分比定义为 rgb(72% 8% 25%)。您可以将 color() 函数与 srgb 关键字结合使用,以便使用 color(srgb .72 .08 .25) 指定相同的颜色。

srgb 用于设置颜色空间,并告知我们接下来的三个参数分别是红色、绿色和蓝色。值从 01,而不是从 0255

rgb() 类似,我们可以使用 / 和百分比或介于 01 之间的小数来设置 alpha。

您可以将许多色彩空间与 color() 函数搭配使用,每种色彩空间都有不同的优势和用例。

显示屏 P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

Display P3 色域包含的颜色比 sRGB 多 50%。您可以使用 color() 函数使用 Display P3 色彩空间指定 Display P3 色域中的所有颜色。

如需在 Display P3 中设置黑色,请将其定义为 color(display-p3 0 0 0)。为 color() 函数指定 display-p3 颜色空间后,您将获得三个通道:红色、绿色和蓝色,与 color(srgb) 类似。但是,由于通道值表示更广泛的颜色空间中的坐标,因此相同的通道值具有不同的含义。

color(srgb 1 .5 0) 是一种橙色,相当于 color(display-p3 0.93596 0.52724 0.1983)。我们可以将橙色从 sRGB 空间扩展到 color(display-p3 1 .5 0),使其更加鲜艳。

Oklab

Oklab 使用 oklab() 函数定义,其中包含亮度、ab 三个通道。它非常适合制作平滑的渐变效果,以及调整颜色的饱和度,同时保持色调和亮度。

h1 {
  color: oklab(75% 0.1 0.1)
}

亮度通道从 010%100%。亮度为 0 的颜色始终为黑色。

a 渠道从 -0.40.40%100%。值越低,颜色越绿;值越高,颜色越红。

b 渠道从 -0.40.40%100%。值越低,颜色越蓝;值越高,颜色越黄。

OkLCh

OkLCh 是 OKLab 的极坐标或圆柱形形式,并通过亮度、色度和色相通道进行定义。这对于以感知上一致的方式调整颜色很有用。这意味着,对色相的更改不会影响颜色的亮度或饱和度。

h1 {
  color: oklch(80% 0.1 200)
}

您已经在 HSL 中使用过亮度和色相,而色度与饱和度类似。您可以使用 oklch(0 0 0) 设置黑色,使用 oklch(1 0 0) 设置白色。

亮度通道从 010%100%。亮度为 0 的颜色始终为黑色。

色度通道用于设置颜色的鲜艳程度,值为 0 或 0% 表示去饱和,值越高颜色越鲜艳。100% 的值与 .4 相同,但如果值接近 .4,则可能会很快超出色域。

色相以度为单位,就像 hsl() 一样。

OkLCh 不受 Display P3 等色域的限制,因此您需要确保自己创建的颜色能够显示。oklch(80% 50% 200) 是一种亮蓝色,从数字上看似乎是合理的颜色,但它超出了 Display P3 色域。

其他聊天室

在 CSS 中指定颜色的方法有很多种,您无需全部学习。rgb() 和十六进制格式在设计工具和现有代码中很常用,了解它们很有用。熟悉可预测地进行操作的格式也很有帮助。您可以直接更改 hsloklch 值,并大致了解最终的颜色。

如需了解详情,请参阅使用更多颜色和新聊天室

系统颜色

除了紫色或蓝绿色等具名颜色之外,您还可以使用以下特殊关键字:

  • transparent 是完全透明的颜色。也是 background-color 的初始值
  • currentColorcolor 属性的上下文计算动态值。如果文本颜色为 red,然后将 border-color 设置为 currentColor,则它也会是 red。如果您在定义 currentColor 的元素上未定义颜色值,则系统将改为通过级联计算 currentColor

操控颜色

虽然您可能在网站上使用了某个调色板,但可能需要这些颜色的变体来处理悬停状态、边框和其他界面元素。您可以指定每种颜色,但 CSS 还提供了转换颜色以创建这些变体的多种方法。

color-mix()

如需使用两种颜色混合的结果,您可以使用 color-mix() 方法。这对于将颜色与白色或黑色混合以创建更浅或更深的变体很有用。

如需使用 color-mix(),您需要定义这两种颜色、您希望它们的混合方式(插值方法),以及您希望每种颜色的比例。

对于具有色相的色彩空间,您还可以决定在色轮上沿哪个方向移动。默认是使用 shorter 路径,但您也可以选择 longer,或者 increasingdecreasing

颜色空间和方向共同构成了插值方法。

您还可以提供要混合的每种颜色的量。

相对颜色语法

您还可以使用相对颜色语法更直接地处理颜色,这种语法可让您采用任何颜色,并对其执行计算以创建新颜色。

h1 {
  color: oklch(from red l c h);
}

使用 oklch() 函数意味着您将处理亮度、色度和色相通道。在关键字 from 后面,您可以使用任何语法指定任何颜色。这样,您就可以将每个渠道值用作字母。这将解析为红色,而无需进行任何调整。

如需进行调整,您可以使用 calc() 函数更改通道值,也可以直接完全替换通道。在这里,我们使用相同的 red 颜色,但使用 oklch(62% 0.25 29) 进行定义。

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

亮度通道为 62% / 231%。色度通道保持不变,因此为 0.25。色相通道为 180。这会创建新的颜色 oklch(31% 0.25 180),即一种新的深绿色。

您通常会使用自定义属性作为输入颜色。这样,您就可以动态创建颜色变体。

您可以使用任何颜色函数来执行此操作,如果颜色函数包含用于描述您要进行的更改的通道,则更有用。例如,如果您想调整颜色的亮度,请选择 oklchhsl,因为您可以直接更改亮度通道。

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

您可以使用相对颜色语法 (RCS) 创建要用于网站的调色板。

超出色域的颜色

您的内容将在不同的屏幕上显示,这些屏幕可能支持或不支持广色域颜色。如果您指定的颜色不受屏幕支持,系统会执行一个名为“色域映射”的过程,以查找可在屏幕上显示的类似颜色。如果您想在这些情况下定义特定颜色,可以使用 color-gamut 媒体查询。

在 CSS 规则中使用颜色的位置

如果 CSS 属性接受 <color> 数据类型作为值,则会接受之前介绍的任何颜色表达方法。如需设置文本样式,请使用 colortext-shadowtext-decoration-color 属性,它们都接受颜色作为值或颜色作为值的一部分。

对于背景,您可以将颜色设置为 backgroundbackground-color 的值。颜色还可用于渐变,例如 linear-gradient。渐变是一种可在 CSS 中以编程方式定义的图像。渐变接受两种或更多颜色,颜色格式可以是任意组合,例如十六进制、RGB 或 HSL。

最后,border-coloroutline-color 用于设置框的边框和轮廓的颜色。 box-shadow 属性还接受颜色作为值之一。

检查您的理解情况

测试您对颜色的了解

以下哪些颜色是有效的?

rbga(400 0 1)
rbga 是 rgba 的拼写错误,而且 400 大于其接受的值,因此无效。
#0f08
🎉
#OOFZ2
这不是十六进制值,只有 5 个数字,并且包含字母 Z,因此无效。
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

找出无效的 hsl 颜色。

hsl(5, 0%, 90%)
这是有效的 hsl 值。
hsl(.5turn 40% 60%)
这是有效的 hsl 值。
hsl(0, 0, 0)
🎉 您发现了,第二个和第三个值应为百分比。
hsl(2rad 50% 50%)
这是有效的 hsl 值。
hsl(0 0% 0% / 20%)
这是有效的 hsl 值。

资源