Color Examples

创作时间:

作者:

@小白创作中心

Color Examples

引用

CSDN

https://m.blog.csdn.net/u013179804/article/details/137249380

HTML颜色在网页设计中扮演着重要角色，给网页增加颜色可以增强用户体验，提升页面的吸引力和可读性。本次将介绍HTML中颜色的5种表示方式。

颜色表示法

十六进制表示法（Hexadecimal）：使用固定3位或者6位十六进制数字表示颜色，每两位表示红、绿、蓝（RGB）分量的值，范围从00到FF。它有两种表示方法：

六位十六进制表示法：使用六位十六进制数字来表示颜色，每两位表示红、绿、蓝（RGB）分量的值，范围从00到FF。例如，红色表示为#FF0000，绿色表示为#00FF00。
三位十六进制表示法：这种简写形式将每个RGB分量的两位相同的数字简写为一个数字，只能表示一些基本颜色。例如，#RGB等效于#RRGGBB，其中R、G、B分别代表红、绿、蓝分量的值。例如，#F00等效于#FF0000，表示红色。

这6位排列组合以后，可以表示16^6 = 16,777,216种颜色。例如，红色表示为#FF0000，绿色表示为#00FF00。这里给你一个链接，可以拖动试试看。https://color.adobe.com/zh/create/color-wheel

RGB表示法（Red Green Blue）：使用红、绿、蓝三个颜色通道的值来表示颜色，每个通道的值范围从0到255。例如，红色表示为rgb(255, 0, 0)，绿色表示为rgb(0, 255, 0)。
RGBA表示法（Red Green Blue Alpha）：涉及到透明度的元素，就用这个来表示。类似于RGB表示法，但增加了一个表示透明度的通道（Alpha），范围从0到1，0表示完全透明，1表示完全不透明。例如，半透明红色表示为rgba(255, 0, 0, 0.5)。
颜色名称表示法：这种表示法使用一些常见颜色的名称来表示颜色，比如"red"表示红色，"blue"表示蓝色，"green"表示绿色，以此类推。这种表示方法看起来很简单易懂。然而，颜色名称表示法有其局限性，因为它只能表示少数常见的颜色，而且在浏览器差异问题，可读性问题，所以不建议用这种。
HSLA表示法：HSLA表示法是基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）的颜色模式，其中的A同样表示Alpha透明度通道，控制颜色的透明度，和RGBA里的A取值类似。色相值的范围是0到360度，饱和度和亮度的取值范围是0%到100%，而透明度的取值范围是从0到1。

以下是一个包含六种颜色表示方法的HTML案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Examples</title>
    <style>
      /* 六位十六进制表示法 */
      .hex-color {
        color: #ff0000; /* 红色 */
        background-color: #00ff00; /* 绿色 */
      }
      /* 三位十六进制表示法 */
      .short-hex-color {
        color: #0f0; /* 绿色 */
        background-color: #00f; /* 蓝色 */
      }
      /* RGB表示法 */
      .rgb-color {
        color: rgb(255, 0, 255); /* 紫色 */
        background-color: rgb(0, 128, 128); /* 青色 */
      }
      /* RGBA表示法 */
      .rgba-color {
        color: rgba(255, 165, 0, 0.5); /* 半透明橙色 */
        background-color: rgba(0, 0, 255, 0.2); /* 蓝色背景，半透明 */
      }
      /* 颜色名称表示法 */
      .txt-color {
        color: pink; /* 粉色 */
      }
      /* HSLA表示法 */
      .hsla-color {
        color: hsla(240, 100%, 50%, 0.8); /* 半透明蓝色 */
        background-color: hsla(60, 100%, 50%, 0.5); /* 半透明黄色 */
      }
    </style>
  </head>
  <body>
    <p class="hex-color">使用六位十六进制表示法的文字颜色和背景色。</p>
    <p class="short-hex-color">使用三位十六进制表示法的文字颜色和背景色。</p>
    <p class="rgb-color">使用RGB表示法的文字颜色和背景色。</p>
    <p class="rgba-color">使用RGBA表示法的文字颜色和背景色。</p>
    <a href="#" class="hex-color">使用六位十六进制表示法的链接颜色。</a>
    <a href="#" class="rgba-color">使用RGBA表示法的链接颜色。</a>
    <p class="txt-color">使用颜色名称表示法的链接颜色。</p>
    <p class="hsla-color">使用HSLA表示法的文字颜色和背景色。</p>
  </body>
</html>

效果如图：

注意事项：

那你可能会说，这么多种颜色，都要用么？

不是的，在实际开发中更推荐使用前3种，十六进制表示法、RGB表示法、RGBA表示法，这3种方法具有更强的灵活性、可读性、兼容性和扩展性，能够更好地满足设计需求和编码规范。

而后2者了解就好。