颜色单位

由于 CSS 负责控制网页的“样式”，因此“设定页面或元素的颜色”主要也是 CSS 负责处理，这篇教学会介绍 CSS 最常使用的十六进制色码的色彩单位，以及各种默认的色彩名称，只要熟悉相关写法，就能轻松掌握网页的颜色。

快速导览：

• 十六进制色码
• 基本色彩名称
• 其他色彩函数

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

十六进制色码

十六进制色码是网页最基本的颜色单位，主要将三原色的红、绿、蓝 ( RGB ) 色光分别分成 0～255 共 256 等分，并使用十六进制 ( 00～FF ) 的方式呈现这 256 等分，撰写时开头加上“#”符号，英文字母大小写不拘，写法如下图所示：

如果三种颜色的“三组代码两两相同”，则可将六码简写成“三码”，例如“#FF0000”可写成“#F00”，“#556677”可写成“#567”，但只要有一组颜色代码不是两两相同，就必须维持六码型态，换句话说十六进制色码只会有“六码”和“三码”。下方的范例使用十六进制色码，替不同元素加上不同的颜色。

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
h2 {color: #F00;}          /* 等同 #FF0000 */
h3 {
  color: #F9AB00;
  background-color: #666;  /* 等同 #666666 */
}
li {color: #006699;}       /* 等同 #069 */
</style>

随着浏览器的进步，目前不少浏览器也支援“八码”的十六进制色码，多出来两码为“透明度”，数值越高透明度越低 00 表示全透明，FF 表示不透明，下方的范例会呈现八码的写法：

线上展示：https://codepen.io/oxxo/pen/rNgmGEy

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: #f005;}          /* 等同 #FF000055 */
  h3 {
    color: #f9ab00FF;
    background-color: #666A;  /* 等同 #666666AA */
  }
  li {color: #00669922;}      /* 等同 #0692 */
</style>

基本色彩名称

W3C 默认定义了十六个基本的色彩名称，只要输入色彩名称就可以呈现对应的颜色，此外 W3C 后来也扩充了许多色彩名称，详细参考：CSS Extended colors。

下方的范例使用色彩名称的写法：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: red;}
  h3 {
    color: purple;
    background-color: yellow;
  }
  li {color: teal;}
</style>

其他色彩函数

通常在设定 CSS 颜色时，大多用到十六进制色码或 rgb() 就差不多处理完成，但是除了使用十六进制色码表现色彩，CSS 还提供了多种定义颜色的函数，透过不同色域或色彩数值的定义，让网页的颜色更加舒服鲜明，关于这些色彩函数，可以参考“CSS 函数 ( 色彩模型 )”教学，或点击下方列表的链接查看教学：

下方的范例使用不同的色彩函数：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2 {color: rgb(255,0,0);}
  h3 {
    color: lab(100% -125 125 / 0.2);
    background-color: hsl(120, 50%, 30%); 
  }
  li {color: lch(100% 100 0);}
</style>

除了单一色彩，CSS 也能使用“渐层色”函数来产生线性渐层、放射渐层或重复渐层等色彩效果，让网页的色彩更丰富更多变化，关于渐层色函数，详细参考“CSS 函数 ( 渐层色 )”教学，或点击下方列表的链接查看教学：

下方的范例将背景色套用渐层效果：

<!-- HTML 程式碼 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  h2, h3, ul {
    width: 200px;
    height: 80px;
  }
  h2 {background: linear-gradient(0deg, red 0%, yellow 100%); }
  h3 {background: linear-gradient(red, yellow, green, blue, purple);}
  ul {background: radial-gradient(circle closest-corner at top , red, black);}
</style>

小结

十六进制色码是 CSS 最基本也最常见的色彩单位，对于第一次使用的人或许不太熟悉，但只要常常使用，有时看到色码就等同看到颜色一样，这也是许多网页设计师特有的“单靠色码就能配色”的特殊能力。

意见反馈