配色卡參考大全 ― 複製標準Web色與Material Design色
彙總設計中常用的標準配色：Web標準色、Material Design色彩系統、灰階漸變，每個色塊均附HEX色值，一鍵即可複製。
Web標準色（基礎色）
Black
#000000
White
#FFFFFF
Red
#FF0000
Green
#008000
Blue
#0000FF
Yellow
#FFFF00
Cyan
#00FFFF
Magenta
#FF00FF
Gray
#808080
Silver
#C0C0C0
Maroon
#800000
Navy
#000080
Olive
#808000
Teal
#008080
Purple
#800080
Lime
#00FF00
Material Design 配色板
Material Red 500
#F44336
Material Pink 500
#E91E63
Material Purple 500
#9C27B0
Material Deep Purple 500
#673AB7
Material Indigo 500
#3F51B5
Material Blue 500
#2196F3
Material Cyan 500
#00BCD4
Material Teal 500
#009688
Material Green 500
#4CAF50
Material Lime 500
#CDDC39
Material Yellow 500
#FFEB3B
Material Amber 500
#FFC107
Material Orange 500
#FF9800
Material Deep Orange 500
#FF5722
Material Brown 500
#795548
灰階（中性色）
White
#FFFFFF
90% Gray
#E6E6E6
80% Gray
#CCCCCC
70% Gray
#B3B3B3
60% Gray
#999999
40% Gray
#666666
30% Gray
#4D4D4D
20% Gray
#333333
10% Gray
#1A1A1A
Black
#000000
使用小貼士
- 點選色塊下方的“複製”按鈕，即可把HEX色值（例如 #F44336）瞬間複製到剪貼簿。
- 複製的色值可以直接貼上到CSS或Figma、Adobe XD等設計工具中使用，無需再做轉換。
- Material Design的色彩以“色名 + 明度編號（例如 Red 500）”管理，編號越大代表色調越深。
- 灰階漸變很適合用來統一文字、背景、邊框等UI元素的色調層次。
- 如果拿不定主意，從Web標準色的16種基礎色開始搭配，通常能得到對比清晰、易讀的配色。
常見問題
這是Google於2014年釋出的設計系統“Material Design”中定義的體系化配色板。每種色相都配有從50到900的明度編號，編號越大色調越深，被廣泛用於Android與Web應用的介面設計。
兩者只是同一種顏色的不同表示方式。HEX色值（例如 #F44336）用兩位十六進位制數分別表示R、G、B，而RGB值（例如 rgb(244, 67, 54)）用十進位制數表示。兩者可以相互換算，表示的是同一個顏色。
Web標準色（black、red、blue等）是CSS誕生初期就已使用的基礎色名，而Material Design的配色系統是Google後來才系統化設計的配色規範。為了方便按不同用途選用，本頁將兩者分開列出。
可以，直接寫成
color: #F44336; 這樣的CSS屬性值即可使用。大多數設計工具和程式語言也都可以直接使用同樣的寫法。
閒話 ― 為什麼設計師不會“憑感覺”選色
2014年Google釋出的“Material Design”並不只是一份視覺風格指南，而是一整套將色彩、字型、動效與佈局統一在同一套規則之下的設計系統。其中的配色板設計得尤為嚴謹：每種色相（Red、Blue、Green等）都配備了從50到900的明度編號，讓設計師無需僅憑感覺，就能在整個應用中搭建出統一協調的配色方案。
如果每次都臨時挑選顏色，應用內很容易散落著看似相近卻又略有差異的色調，導致設計缺乏統一感。從事先體系化好的配色板中選色，既能保持配色的一致性，又能通過同一色相內明度的變化，自然地表現按鈕的不同狀態（預設、懸停、按下等）。
CSS指定顏色的方式在歷史上經歷過多次擴充套件。1996年出現的CSS1只支援16種基礎命名色和HEX色值，如今則可以使用更貼近人眼感知的HSL、HWB、LAB等色彩空間。即便如此，HEX色值在實際工作中依然是使用最廣泛的表示法，至今仍是設計師與工程師之間不可或缺的通用語言。