想找一套「看起來就很溫柔、很有質感、又不會過甜」的配色嗎？
這篇整理了五大主題色：奶茶系、浪漫紫色系、夜空感藍色系、大地感薑黃色系、綠色系，
並用 HTML 直接畫出色卡，讓你能直觀看到每個色碼呈現的效果。
適用範圍包含：
部落格版面、IG 貼文、簡報、品牌視覺、Canva 設計、
商品頁、名片與網站 UI。
你也可以把這些色碼直接丟進 Canva / Figma / Photoshop / 網站後台使用。
快速目錄｜配色主題一覽
大地感薑黃色系色碼色號（Ginger Yellow / Earth Tone）
奶茶色系色碼色號｜溫柔、乾淨、耐看
奶茶系的魅力在於：它不搶戲，但會讓整個畫面變得更「有氣質」。如果你想做出生活感、乾淨感、帶點柔霧的氛圍，這組很萬用。
| 色卡 | 色碼（HEX） | 色名 | 適合情境 |
|---|---|---|---|
| #FFFBF6 |
#FFFBF6 | 奶泡極淺白 | 全文背景、最大留白 |
| #F8F1E8 |
#F8F1E8 | 奶霜白 | 文章底、卡片底 |
| #F1E4D6 |
#F1E4D6 | 燕麥奶 | 區塊底、引用框底 |
| #E9D7C3 |
#E9D7C3 | 奶茶米 | 分段底色、資訊卡 |
| #E1CDB6 |
#E1CDB6 | 溫柔米杏 | 標籤底、次要按鈕 |
| #D7BFA6 |
#D7BFA6 | 燕麥拿鐵 | 按鈕底、分類色塊 |
| #CDB29B |
#CDB29B | 奶茶棕 | 標題底、封面底 |
| #BFA48D |
#BFA48D | 焦糖奶茶 | 分隔線、重點框線 |
| #A9917D |
#A9917D | 烤糖可可 | 重點按鈕、章節條 |
| #8E7764 |
#8E7764 | 可可棕 | 內文字色（更柔不刺） |
| #6F5B4C |
#6F5B4C | 深焙摩卡 | 深色標題、夜感底 |
| #4E3F35 |
#4E3F35 | 可可深影 | 少量點綴、Logo 深色 |
浪漫紫色系色碼色號｜柔霧感、帶一點夢
紫色很容易「一秒過甜」，所以這裡選的是偏莫蘭迪、偏霧面、偏耐看的紫：適合浪漫、療癒、仙氣感，但仍保持乾淨。
| 色卡 | 色碼（HEX） | 色名 | 適合情境 |
|---|---|---|---|
| #FAF7FC |
#FAF7FC | 霧紫奶白 | 背景、柔霧底 |
| #F4EFF7 |
#F4EFF7 | 薰衣草霧白 | 大面積背景、柔霧底 |
| #EFE6F6 |
#EFE6F6 | 薰衣草奶霧 | 區塊底、引言底 |
| #DCCFE8 |
#DCCFE8 | 粉紫雲 | 區塊底、引言框、內文重點 |
| #BDA7D6 |
#BDA7D6 | 夢幻紫羅蘭 | 標題點綴、icon、次要按鈕 |
| #8E74A6 |
#8E74A6 | 暮光紫 | 重點字、分隔視覺、封面文字底 |
| #5B4A6A |
#5B4A6A | 梅紫深影 | 深色標題、夜感主視覺、細框線 |
浪漫紫使用訣竅：紫色用在「10% 點綴」最迷人。大面積建議用 #F4EFF7 / #DCCFE8，才不會變得太厚重。
夜空感藍色系色碼色號｜安靜、深呼吸、宇宙感
夜空藍是很「情緒穩定」的色系：它可以很高級，也可以很療癒。適合做科技感、靜謐感、夜晚氛圍，或是要讓畫面更沉靜耐看。
| 色卡 | 色碼（HEX） | 色名 | 適合情境 |
|---|---|---|---|
| #F3F7FB |
#F3F7FB | 雲霧淡藍 | 背景、留白 |
| #EEF4FA |
#EEF4FA | 夜雲淡藍 | 背景底、閱讀區塊、卡片底 |
| #D7E2EC |
#D7E2EC | 灰藍奶霧 | 區塊底、資訊表 |
| #C9D7E6 |
#C9D7E6 | 星光灰藍 | 分隔區、資訊表、底紋感 |
| #A7B8C9 |
#A7B8C9 | 薄暮灰藍 | 按鈕、標籤、分段 |
| #8FAAC2 |
#8FAAC2 | 薄暮藍 | 按鈕、標籤、導覽列背景 |
| #3E5C77 |
#3E5C77 | 深海藍 | 標題字色、強調字、圖像主色 |
| #5C738A |
#5C738A | 深海霧藍 | 深底、少量點綴 |
| #1F2A3A |
#1F2A3A | 夜空墨藍 | 夜間主視覺背景、封面底、深色區塊 |
夜空藍搭配：最美的組合通常是「奶茶 + 夜空藍」，一暖一冷，畫面立刻有故事感。
大地感薑黃色系色碼色號｜溫暖、有生命力但不刺眼
薑黃色會讓畫面看起來「更有陽光」，但又不像正黃那麼刺激。很適合做品牌重點、標籤、或是讓內容更有層次。
| 色卡 | 色碼（HEX） | 色名 | 適合情境 |
|---|---|---|---|
| #FFF6DF |
#FFF6DF | 薑糖奶霜 | 背景亮點、重點段落底色 |
| #F6E6B8 |
#F6E6B8 | 奶油小麥 | 標籤底、卡片底 |
| #F2D79B |
#F2D79B | 小麥黃 | 標籤、提醒框、資訊小卡 |
| #E9CC7A |
#E9CC7A | 薑糖暖金 | 按鈕、icon |
| #E0B85A |
#E0B85A | 薑黃暖金 | 按鈕、重點字、icon 主色 |
| #B4872D |
#B4872D | 烤糖金 | 深色點綴、細邊框、視覺焦點 |
| #6B4E1E |
#6B4E1E | 泥土深金 | 少量用於標題、分隔線、徽章感 |
薑黃使用訣竅：想要溫暖但不吵，讓薑黃只出現在「標籤、重點句、按鈕」就好，別鋪滿整個畫面。
綠色系色碼色號｜自然、沉靜、耐看的生活感
綠色可以把畫面拉回「呼吸感」。這裡選的是偏莫蘭迪、偏灰階、偏自然的綠，不會像螢光綠那麼跳。
| 色卡 | 色碼（HEX） | 色名 | 適合情境 |
|---|---|---|---|
| #EEF5EF |
#EEF5EF | 晨霧淡綠 | 背景底、舒緩閱讀區 |
| #DCE9E1 |
#DCE9E1 | 淡鼠尾草 | 區塊底、資訊卡 |
| #CFE0D4 |
#CFE0D4 | 鼠尾草綠 | 區塊底、資訊卡、段落分類 |
| #9DB9A7 |
#9DB9A7 | 植感灰綠 | 按鈕、標籤、導覽列 |
| #5F7D6B |
#5F7D6B | 森林靜綠 | 標題、重點字、深色裝飾 |
| #2E4A3C |
#2E4A3C | 苔蘚深綠 | 深色區塊背景、章節底、封面主色 |
推薦配色組合｜可直接套用的「主色 + 輔色 + 點綴」
組合A：奶茶 + 夜空藍（高級耐看）
- 背景：#F6EFE7
- 文字：#8E7764
- 重點：#3E5C77
- 深色：#1F2A3A
組合B：浪漫紫 + 奶泡白（柔霧仙氣）
- 背景：#F4EFF7
- 區塊底：#DCCFE8
- 重點：#8E74A6
- 文字：#5B4A6A
組合C：薑黃 + 綠（大地系、生活感）
- 背景：#EEF5EF
- 區塊底：#CFE0D4
- 重點：#E0B85A
- 文字：#2E4A3C
組合D：霧奶底 + 可可字（最耐看）
- 背景：#FFFBF6
- 區塊底：#F1E4D6
- 重點：#BFA48D
- 文字：#8E7764
組合E：奶茶 + 霧紫（溫柔浪漫，但不甜膩）
- 背景：#F8F1E8
- 區塊底：#EFE6F6
- 重點：#8E74A6
- 文字：#6F5B4C
組合F：奶茶 + 灰藍（高級安靜）
- 背景：#FFFBF6
- 區塊底：#D7E2EC
- 重點：#5C738A
- 文字：#4E3F35
組合G：奶茶 + 奶油薑黃（明亮但不刺）
- 背景：#F8F1E8
- 區塊底：#FFF8E8
- 重點：#E9CC7A
- 文字：#6F5B4C
組合H：奶茶 + 鼠尾草綠（療癒生活感）
- 背景：#FFFBF6
- 區塊底：#DCE9E1
- 重點：#5F7D6B
- 文字：#6F5B4C
色卡怎麼用？（複製貼上即可）
你可以用兩種方式呈現色卡：
- 表格色卡：像本篇這樣，用
bgcolor讓每格直接變色，最直觀(但是手機端看不見)。 - 小方塊色卡：用
<table>做一排小色塊，也不用 CSS(手機端table語法也不可行QAQ)。
一排色塊（最直觀）
| |
|
|
|
|
兩行色卡（文章中段插圖感）
| |
|
|
|
|
| |
|
|
|
|
FAQ｜色碼色號常見問題
Q1：HEX 色碼可以直接用在 Canva 嗎？
可以。Canva 的顏色面板支援輸入 HEX，例如 #F6EFE7，貼上就會出現相同的顏色。
Q2：我想讓整體更有「莫蘭迪」感，要怎麼調？
簡單做法是把顏色往「灰一點、淡一點」靠攏：優先用每組最淺的 1~2 個色碼做大面積背景，深色只做 10% 以內的點綴。
Q3：部落格文字建議用什麼顏色比較不刺眼？
建議用 #8E7764（可可棕）或 #3E5C77（深海藍）這種「不是純黑」的深色，閱讀舒適度會更好。
結語｜把顏色變成你的風格和語氣
配色很像一個人的語氣：奶茶是溫柔的停頓，紫色是浪漫的尾音，夜空藍是安靜的呼吸，薑黃是心裡那盞小燈，綠色則是回到自然的答案。希望這篇色碼色號整理與 HTML 色卡，能讓你在設計時少走彎路、也更快找到「看起來就是你」的配色。
關鍵字：奶茶色系 色碼 色號、浪漫紫色系 色碼、夜空藍 色碼、薑黃色系 色碼、大地色系 配色、綠色系 色碼、HTML 色卡、色票、配色指南、莫蘭迪色系
#奶茶色系 #奶茶色碼 #浪漫紫色系 #紫色系色碼 #夜空藍色系 #藍色系色碼 #薑黃色系 #大地色系 #綠色系色碼 #莫蘭迪色系 #配色指南 #色碼色號 #HTML色卡 #色票整理 #設計配色 #部落格排版
如果您喜歡梅梅的文章，希望您可以幫忙點個推推，留言支持，轉發分享
🌸 非常感謝您 🌸
地藏王菩薩愛您
迎接地藏王菩薩進入您的人生，推薦您以下五個天界之舟出品的禱告運用
點閱播放讓地藏王菩薩幫助您~
驅離邪靈惡鬼騷擾、財運亨通、身體健康、擺脫惡疾、人生順遂
留言功能已依作者設定調整顯示方式