搜尋

HTML 色彩表示法

如果要在 HTML 所建構的網頁裡呈現色彩,必須使用對應的色彩代碼,這篇教學會介紹三種色彩表示的方法,透過這些方法,就能讓網頁出現鮮豔豐富的顏色。

快速導覽:

色光三原色 vs 色料三原色

在色彩學裡,色彩簡單可以區分成「色光三原色」和「色料三原色」:

色彩名稱 ( 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>

HTML 教學 - HTML 色彩表示方式 - 使用色彩名稱 ( Color name )

十六進位色碼 ( Hex rgb ) 表示法

網頁的顏色由紅、綠、藍各 256 階 ( 0~255 ) 所組成,如果將十進位數值對應到十六進位數值,就變成了十六進位色碼 ( 0~255 變成 00~FF ),色碼的組成為「#」開頭,後方連接 RGB 三個十六進位色碼,這也是在網頁中最常看到的顏色表示法。

HTML 教學 - HTML 色彩表示方式 - 什麼是十六進位色碼

編寫十六進位色碼時,長度必須要是「六位」,英文字母大小寫皆可,例如下方的例子,色碼 #ff0000 是紅色,#ff9900 是橘色,#0000ff 是藍色。

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

HTML 教學 - HTML 色彩表示方式 - 使用十六進位色碼 ( Hex rgb )

如果三個顏色色碼都是「兩個字母或數字相同」,則可以將色碼從「六碼縮減為三碼」,例如 #f00 等同 #ff0000,#ff9900 等同 #f90,#0000ff 等同 #00f,但只要其中一個顏色色碼的兩個字母或數字不同,就不能使用這種方法,例如 #ff9000 不可以寫成 #f900。

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

HTML 教學 - HTML 色彩表示方式 - 使用十六進位色碼 ( Hex rgb ) - 縮成三碼

此外,也可以在色碼後方加入「透明色版 Alpha」的十六進位代碼,Alpha 為 00 表示全透明,FF 表示不透明。

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

HTML 教學 - HTML 色彩表示方式 - 使用十六進位色碼 ( Hex rgb ) - 加入透明度

十進位 ( Decimal ) 表示法

有別於色碼使用十六進位的方式,十進位表示法可以直接撰寫 0~255 的整數,寫法如下:

HTML 教學 - HTML 色彩表示方式 - 使用十進位 ( Decimal ) 寫法

例如下方的例子,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>

HTML 教學 - HTML 色彩表示方式 - 使用十進位 ( Decimal )

如果將 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 教學 - HTML 色彩表示方式 - 使用十進位 ( Decimal ) - 加入透明度

小結

熟悉 HTML 的色彩表示法之後,就能夠輕鬆地透過程式碼的編輯進行配色,也能更加理解版面的色彩組成。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作