HTML 色彩表示法

如果要在 HTML 所建构的网页里呈现色彩，必须使用对应的色彩代码，这篇教学会介绍三种色彩表示的方法，透过这些方法，就能让网页出现鲜艳丰富的颜色。

快速导览：

• 色光三原色 vs 色料三原色
• 色彩名称 ( Color name ) 表示法
• 十六进制色码 ( Hex rgb ) 表示法
• 十进制 ( Decimal ) 表示法

色光三原色 vs 色料三原色

在色彩学里，色彩简单可以区分成“色光三原色”和“色料三原色”：

• 色光三原色

  色光三原色指的是红 ( Red )、绿 ( Green )、蓝 ( Blue ) 三种色光，色光使用“加法混合”进行颜色混合，加入的色彩越多，则混合后的颜色会越亮，透过不同比例和强度的色光混合，能呈现出各种需要的色彩，通常在电脑屏幕里，能够使用红、绿、蓝 ( RGB ) 各 256 阶，组合出 1677 万 ( 256 x 256 x 256 = 16777216 ) 种颜色，由 HTML 所做成的网页，甚至还可以搭配透明度色版 ( Alpha )，组合成 RGBA 做出更多色彩变化。

  

• 色料三原色

  色料三原色指的是青 ( Cyan )、洋红 ( Magenta )、黄 ( Yellow ) 三种色彩，色料使用“减法混合”进行颜色混合，加入的色彩越多，则混合后的颜色会越暗，由于色料三原色无法混合出真正的黑色，因此实际应用时 ( 例如印刷 )，往往会加入黑色 ( Black)，也就是所谓的 CMYK 四种基本色。

  

色彩名称 ( Color name ) 表示法

HTML 的规范中定义了一些默认的颜色名称，只要输入名称，就可以呈现该颜色，例如下方的例子，颜色名称为 red 就会是红色，orange 是橘色，blue 是蓝色。

色彩名称对照表参考：https://www.w3.org/wiki/CSS/Properties/color/keywords

<h2 style="color:red;">我是紅色</h2>
<h2 style="color:orange;">我是橘色</h2>
<h2 style="color:blue;">我是藍色</h2>

十六进制色码 ( Hex rgb ) 表示法

网页的颜色由红、绿、蓝各 256 阶 ( 0～255 ) 所组成，如果将十进制数值对应到十六进制数值，就变成了十六进制色码 ( 0～255 变成 00～FF )，色码的组成为“#”开头，后方连接 RGB 三个十六进制色码，这也是在网页中最常看到的颜色表示法。

编写十六进制色码时，长度必须要是“六位”，英文字母大小写皆可，例如下方的例子，色码 #ff0000 是红色，#ff9900 是橘色，#0000ff 是蓝色。

<h2 style="color:#ff0000;">我是紅色</h2>
<h2 style="color:#ff9900;">我是橘色</h2>
<h2 style="color:#0000ff;">我是藍色</h2>

如果三个颜色色码都是“两个字母或数字相同”，则可以将色码从“六码缩减为三码”，例如 #f00 等同 #ff0000，#ff9900 等同 #f90，#0000ff 等同 #00f，但只要其中一个颜色色码的两个字母或数字不同，就不能使用这种方法，例如 #ff9000 不可以写成 #f900。

<h2 style="color:#f00;">我是紅色</h2>
<h2 style="color:#f90;">我是橘色</h2>
<h2 style="color:#00f;">我是藍色</h2>

此外，也可以在色码后方加入“透明色版 Alpha”的十六进制代码，Alpha 为 00 表示全透明，FF 表示不透明。

<h2 style="color:#ff0000FF;">不透明</h2>
<h2 style="color:#ff000099;">有點透明</h2>
<h2 style="color:#ff000033;">快要透明了</h2>

十进制 ( Decimal ) 表示法

有别于色码使用十六进制的方式，十进制表示法可以直接撰写 0～255 的整数，写法如下：

例如下方的例子，rgb(255,0,0) 是红色，rgb(255,150,0) 是橘色，rgb(0,0,255) 是蓝色。

<h2 style="color:rgb(255,0,0);">我是紅色</h2>
<h2 style="color:rgb(255,150,0);">我是橘色</h2>
<h2 style="color:rgb(0,0,255);">我是藍色</h2>

如果将 rgb 改成 rgba，则可以加入“透明色版 Alpha”数值，数值区间为 0～1 为 0 表示全透明，1 表示不透明。

<h2 style="color:rgba(255,0,0,1);">不透明</h2>
<h2 style="color:rgba(255,0,0,0.6);">有點透明</h2>
<h2 style="color:rgba(255,0,0,0.2);">快要透明了</h2>

小结

熟悉 HTML 的色彩表示法之后，就能够轻松地透过程序码的编辑进行配色，也能更加理解版面的色彩组成。

意见反馈