HTML HEX颜色怎么用?

文章导读
Previous Quiz Next 十六进制 (Hex) 颜色 十六进制 (Hex) 颜色 通过组合红 (RR)、绿 (GG) 和蓝 (BB) 颜色的十六进制值 (#RRGGBB) 来指定,每个值范围从 00 到 FF,其中 00 表示最低强度,FF 表示最高强度。
📋 目录
  1. 十六进制 (Hex) 颜色
  2. HEX 颜色值
  3. 在 HTML 中使用 HEX 颜色
  4. 常见颜色的 HEX 颜色代码
  5. HEX 颜色的示例
A A

HTML - HEX 颜色



Previous
Quiz
Next

十六进制 (Hex) 颜色

十六进制 (Hex) 颜色 通过组合红 (RR)、绿 (GG) 和蓝 (BB) 颜色的十六进制值 (#RRGGBB) 来指定,每个值范围从 00FF,其中 00 表示最低强度,FF 表示最高强度。

HTML Hex Colors

HEX 颜色值

每个 HEX 颜色值以井号 (#) 开头,并包含六位数字 (#RRGGBB)。前两位 (RR) 指定红色分量,接下来两位 (GG) 指定绿色分量,最后两位 (BB) 指定蓝色分量。这种方法允许对网页设计进行精确的颜色自定义。

示例

以下是通过 hex 值创建红、绿、蓝颜色的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Hex Color Values</title>
  </head>
  <body>
    <!-- 红色 -->
    <div style="background-color: #FF0000; width: 100px; height: 100px;">
      RED Color
    </div>
    <!-- 绿色 -->
    <div style="background-color: #00FF00; width: 100px; height: 100px;">
      GREEN Color
    </div>
    <!-- 蓝色 -->
    <div style="background-color: #0000FF; width: 100px; height: 100px;">
      BLUE Color
    </div>
  </body>
</html>

在 HTML 中使用 HEX 颜色

要在 HTML 中使用 hex 颜色,可以直接使用 style 属性将它们分配给元素,或者在 style 标签或样式表中使用 color 属性定义它们。

示例 1:使用 style 属性

以下是通过 style 属性为 HTML 元素分配 hex 颜色的示例:

<body>
  <p style="color: #FF0000;">This text is red.</p>
</body>

示例 2:使用 style 标签

以下是通过 style 标签为 HTML 元素分配 hex 颜色的示例:

<head>
  <style>
    p {
      color: #FF0000;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>

常见颜色的 HEX 颜色代码

下表列出了一些使用十六进制颜色代码表示的颜色:

颜色 颜色 HEX
  #000000
  #FF0000
  #00FF00
  #0000FF
  #FFFF00
  #00FFFF
  #FF00FF
  #C0C0C0
  #FFFFFF

HEX 颜色的示例

以下是一些在 HTML 中使用十六进制颜色的示例:

为 body 设置背景色

在以下示例中,我们使用 hex 颜色代码定义 HTML 页面的背景色:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML Colors by HEX code
   </title>
</head>
<body style="background-color: #00FF00;">
   <p>
      Use different color code for body 
      and table and see the result. 
   </p>
   
   <p style="color: #FFFFFF;">
      This text will appear white on 
      black background. 
   </p>
</body>
</html>

为表格单元格设置颜色

在以下示例中,我们为 H2 和表格定义背景色:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML HEX Color code
   </title>
</head>
<body style="width:300px; height:100px;">
   <h2 style="background-color: #FF6666;">
      Setting the Background using HEX Code 
   </h2>
   <table style="background-color: #FF3335;">
      <tr>
         <td style="color: #FFFFFF;">
               The text color of the paragraph is 
               styled using HEX code.
         </td>
      </tr>
   </table>
</body>
</html>

为网页设计选择合适的颜色很困难。即使你心中有某种颜色,也需要让计算机理解该颜色的十六进制值。为了让你的工作更轻松,我们建议使用我们的 HTML 颜色选择器工具