CSS 中使用颜色的终极新手指南

# Web 开发# 初学者# CSS# 前端开发

在网页设计领域，颜色在创建具有视觉吸引力和用户友好的网站方面起着至关重要的作用。了解如何在 CSS（层叠样式表）中有效地使用颜色可以提高网站的美感并改善用户体验。本博客将探讨在 CSS 中指定颜色的各种方法，包括十六进制、RGB、RGBA、HSL 和 HSLA 值。我们还将讨论颜色对比度和可访问性的重要性，以及创建渐变的技术。在本指南结束时，您将在 Web 项目中使用颜色方面打下坚实的基础。

**在 CSS 中使用颜色**

以下方法可以在CSS中指定颜色：

  • 十六进制颜色
  • RGB 颜色
  • 预定义/跨浏览器颜色名称
  • RGBA 颜色
  • HSL 颜色
  • HSLA 颜色

    • 十六进制颜色

    十六进制颜色用 `#RRGGBB` 指定，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的组成部分。

    十六进制范围是 0 到 F，即 00 到 FF。

    例如，`#0000ff` 值被渲染为蓝色，因为红色和蓝色被设置为 00，并且蓝色成分被设置为最高值（ff）。

    RGB 颜色

    RGB 颜色值用 rgb() 函数指定，其语法为 rgb(red, green, blue)。

    每个参数（红色、绿色和蓝色）定义颜色的强度，可以是 0 到 255 之间的整数，或者我们可以使用 0% 到 100% 的百分比值。

    例如，`rgb(0,0,255)` 值被呈现为蓝色，因为红色和绿色被设置为最低参数 (0)，而蓝色参数被设置为其最高值 (255)。

    RGBA 颜色

    RGBA 包含一个用于透明度的附加 alpha 通道。

    alpha 分量指定颜色的透明度级别。alpha 值介于 0（完全透明）和 1（完全不透明）之间。

    `0`：完全透明，颜色不可见。

    `0.5`：半透明，提供部分透视效果。

    `1`：完全不透明，表示不透明度。

    预定义/跨浏览器颜色名称

    它们是正常的名称，例如白色、黑色、粉色等。

    HTML 和 CSS 颜色规范中预定义了 140 种颜色名称。

    HSL 颜色

    HSL 代表色调、饱和度和亮度。HSL 使用 HSL() 函数指定，其语法如下：HSL(120, 100%, 50%)。

    `色调（0 - 360）`：表示颜色类型。它是色轮上的度数，红色为 0，绿色为 120，蓝色为 240。

    `饱和度（0% - 100%）`：描述颜色的强度。0% 是灰度，100% 是完全饱和。

    `亮度（0% - 100%）`：指定颜色的亮度。0% 为黑色，100% 为白色，50% 为正常。

    HSLA 颜色

    HSLA 包含一个额外的 alpha 通道以实现透明度。

    alpha 分量指定颜色的透明度级别。alpha 值介于 0（完全透明）和 1（完全不透明）之间。

    HEX Color
    

    RGB Color
    

    RGBA Color
    

    Predefined Color
    

    HSL Color
    

    HSLA Color
    h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}
    Colors in css

    不透明度

    在 CSS 中，opacity 属性用于设置元素的透明度。其值介于 0 和 1 之间。

    `0`：元素完全透明（完全不可见）。

    `1`：元素完全不透明（完全可见）。

    thecodedose
    img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

    前：

    opacity in css

    将鼠标悬停在图像上之后：

    opacity in css

    颜色对比度和可访问性：

    颜色对比度是重要的指导原则之一，它可以确保那些看不到某些颜色或根本看不到颜色的人能够正常使用任何网站。

    可访问性，或者准确地说是网页内容可访问性指南 (WCAG)，是由 W3C 或万维网联盟提出的一组指南，该联盟制定了 HTML、CSS 等网页标准，这些指南有助于让残障人士能够访问网页。

    我们必须确保使用适当的颜色对比度，WCAG 已为此设置了一些最低比率作为通过 Web 可访问性指南的标准。我们有很多类别，例如 WCAG AA、AAA、界面组件等等。

    计算颜色对比度

    色彩对比度是使用相对亮度来计算的。它被定义为色彩空间中任何一点的相对亮度，最暗的黑色归一化为零，最亮的白色归一化为一。

    因此，简单来说，正如您所看到的，最深的黑色（十六进制代码 #000000）具有相对亮度 0，最亮的白色（十六进制代码 #ffffff）的相对亮度为 1，这几乎适用于色轮上的任何颜色，如果您以红色为例并从中抽取颜色，相对亮度值看起来会像这样，它再次从零开始并以一结束。

    Color Contrast

    计算相对亮度值涉及大量的数学运算，但这里有一个称为对比度对比度的工具，您只需输入十六进制代码，它就会告诉您相对亮度值，所以，现在我们有了相对亮度，我们所要做的就是应用颜色对比度公式。

    颜色对比度公式= (L1 + 0.05)/(L2 + 0.05)

    在哪里 ，

    L1 是较浅颜色的亮度

    L2 是较暗颜色的亮度。

    例子

    白色背景上的蓝色文字。

    CSS color contrast

    这里的白色是较浅的颜色，亮度为 1。

    蓝色较暗，亮度为 0.0722。

    亮度是使用对比度工具计算的。

    css

    现在将这些值应用到公式中，

    颜色对比度公式= (L1 + 0.05)/(L2 + 0.05)

    = (1 + 0.05)/(0.0722 + 0.05)

    = 8.59 = 8.59 : 1

    您可以检查我们的颜色对比度，以了解它是否符合 WCAG 指南。

    检查这一点的工具是对比度检查器。

    您还可以使用“颜色对比度分析器”等浏览器扩展程序，它可以对网页元素的对比度提供实时反馈。

    正如您在下面所看到的，白色背景上的蓝色文字传递了文本。

    css

    **可读性**：足够的颜色对比度对于确保文本和视觉元素易于阅读至关重要。

    **可访问性**：Web 内容的设计应具有包容性，可供各种能力的用户访问。高色彩对比度可增强网站或应用程序的整体可访问性，使其可供更广泛的受众使用。

    渐变

    CSS 渐变让您显示两种或多种指定颜色之间的平滑过渡。

    CSS 定义渐变的类型。

  • 线性渐变（向下/向上/向左/向右/对角线）
  • 径向渐变（由其中心定义）

    • 线性渐变

    要创建线性渐变，您必须定义至少两个色标。色标是我们想要在其中呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

    `语法`

    `背景图像：线性渐变（方向，颜色停止点1，颜色停止点2，...）；`

    方向 `默认方向`：从上到下

    Linear gradient without direction
    h1 {
  background-image: linear-gradient(blueviolet, black);
  color: white;
}

    `特定方向`：向右、向上、向下、向左、向左上

    Linear gradient with right direction
    h2 {
  color: white;
  background-image: linear-gradient(to right, blueviolet, black);
}

    `使用角度`：

    Linear gradient using degree
    h3 {
  color: white;
  background-image: linear-gradient(45deg, blueviolet, black);
}

    `使用透明度` ：要添加透明度，请使用 rgba() 函数，其中最后一个参数是透明度，范围是 0（完全透明）到 1（不透明）

    Linear gradient using transparency
    h4 {
    color: yellow;
  background-image: linear-gradient(to right,rgba(255, 0, 0, 0),rgb(166, 0, 255));
}
    Linear gradient in css

    径向渐变

    径向渐变由其中心定义。要创建径向渐变，您必须定义至少两个色标。

    `语法`

    `背景图像：radialr 渐变（位置处的形状大小，起始颜色，..，最后颜色）；`

    例子

    Radial gradient
     
  
    Radial gradient with degree
    h1 {
  background-image: radial-gradient(blueviolet, black);
  color: white;
  width: 200px;
  height: 150px;
}
h2 {
  background-image: radial-gradient(white 20%, black 30%, blueviolet 50%);
  color: white;
  width: 200px;
  height: 150px;
}
    Radial gradient in css
    Radial gradient using shape-ellipse
    

    Radial gradient using shape-circle
    #rg {
    background-image: radial-gradient(ellipse, blueviolet, black);
  color: white;
  width: 200px;
  height: 150px;
}
#rgc {
  background-image: radial-gradient(circle, blueviolet, black);
  color: white;
  width: 200px;
  height: 150px;
}
    Radial gradient in css

    工具和资源

    调色板生成器：

    **冷却器**

    Coolors 是一款配色方案生成器，可让您探索、创建和自定义调色板。您可以锁定特定颜色并生成互补调色板。

    **Adobe 色轮**

    Adobe Color Wheel 色轮可让您根据类似色、单色、三色组等颜色规则创建配色方案。它是设计和谐调色板的强大工具。

    **浏览器开发者工具**：Google Chrome 开发者工具：右键单击元素，选择“检查”，转到“样式”面板，将鼠标悬停在颜色值上以选择颜色。颜色选择器允许您实时测试和修改颜色。

    CSS debugging

    **结论**

    对于任何网页设计师或开发人员来说，掌握 CSS 中的颜色都是必不可少的。通过利用不同的颜色规范并了解颜色对比对可访问性的重要性，您可以创建更具吸引力和包容性的网站。请记住，颜色不仅可以美化您的设计，还会影响可用性和用户体验。借助本博客提供的工具和资源，您现在可以自信地尝试颜色并增强您的 Web 项目。

    感谢您阅读本博客并投入时间。我希望您觉得本博客很有见地，并从中有所收获。如果是这样，请通过对博客做出回应来表示支持。