配色卡參考大全 ― 複製標準Web色與Material Design色
彙總設計中常用的標準配色：Web標準色、Material Design色彩系統、灰階漸變，每個色塊均附HEX色值，一鍵即可複製。
Web標準色（基礎色）
Material Design 配色板
灰階（中性色）
色彩調色盤是什麼
本頁是將設計中常用的經典色彩調色盤連同 HEX 色碼一併列表顯示的調色盤集。彙整了自 CSS 初期沿用至今的網頁標準色16色、Google 所體系化的 Material Design 色彩系統代表色，以及將白至黑分為10階的灰階梯度三種，只需點選中意色彩的色碼（例：#2196F3）一次即可複製，直接貼入 CSS 或設計工具。
若逐色憑感覺挑選配色，容易出現相近色調林立、缺乏整體感的設計。本頁所載色彩皆為「作為體系所設計的色」，只需沿 Material Design 的明度編號（50〜900）或灰階的層次（90%灰、80%灰等）挑選，便能輕易組出色相與明度一致的配色。配色理論（補色、類似色等組合方式）於用語集章節說明。
色彩調色盤的使用方式
- 選擇符合目的的群組 網頁標準色、Material Design、灰階三個群組縱向排列。捲動至與用途相近的群組尋找。
- 以色票確認色調 色樣（色票）與色名、HEX 色碼並列顯示，可一邊在畫面上確認實際外觀，一邊收斂候選。
- 按下「複製」按鈕 點選中意色彩下方的「複製」按鈕，HEX 色碼便會自動複製至剪貼簿。
-
貼入 CSS 或設計工具
將複製的 HEX 色碼直接貼入 CSS 的
color屬性，或 Figma、Adobe XD 等的檢色器中使用。
用好本工具的小技巧
- 點選色塊下方的“複製”按鈕，即可把HEX色值（例如 #F44336）瞬間複製到剪貼簿。
- 複製的色值可以直接貼上到CSS或Figma、Adobe XD等設計工具中使用，無需再做轉換。
- Material Design的色彩以“色名 + 明度編號（例如 Red 500）”管理，編號越大代表色調越深。
- 灰階漸變很適合用來統一文字、背景、邊框等UI元素的色調層次。
- 如果拿不定主意，從Web標準色的16種基礎色開始搭配，通常能得到對比清晰、易讀的配色。
色彩調色盤的活用場景
網頁配色的底色選擇
決定全站基調色時，自 Material Design 的明度梯度中挑選同色系濃淡，頁首、內文、按鈕的色彩區分便能自然協調。
UI 元件的狀態色
將按鈕的一般、滑過、按下時的色彩以同色相的不同明度（例：Blue 500→Blue 700）備妥，即可在保持統一感的同時表現狀態變化。
文字與背景的對比設計
自灰階梯度挑選背景色與文字色時，組合相距較遠的層次可提高辨識度。嚴格判定則另行使用對比檢查工具較為有效。
簡報資料與圖表的配色統一
與其每次憑感覺挑選投影片與圖表的配色，不如將本頁的色名與 HEX 色碼沿用為公司內部配色指南，如此各資料間的色彩便不會偏移。
配色的用語集
- HEX 色碼
- 指以「#RRGGBB」這般16進位6位數表示色彩的表記方法。R（紅）、G（綠）、B（藍）各以兩位數指定，為 CSS 與設計工具中最廣泛使用者。
- Material Design
- 指 Google 於2014年發表的設計系統。依色相以50〜900的明度編號將調色盤體系化，編號愈大代表色調愈暗。
- 補色
- 指色相環中位於正對面位置的色彩組合。因彼此相互強調，常用於想突顯強烈對比的強調色挑選。
- 類似色
- 指色相環上彼此相鄰的色彩組合。因色相差異小，容易形成協調沉穩的配色，常用於網站基調色的挑選。
- 三分配色
- 指組合色相環三等分位置上三種色彩的配色技法。較補色柔和、較類似色富變化，易於取得平衡。
- 灰階
- 指不具色相、僅由白至黑明暗構成的層次。用於調整背景色與文字色的明度差，作為確保辨識度的基礎。
- HSL
- 指以色相（Hue）、彩度（Saturation）、明度（Lightness）三要素表示色彩的表現方法。較 HEX 更易進行「同色相僅改變明暗」這類直覺調整。
常見問題
color: #F44336; 這樣的CSS屬性值即可使用。大多數設計工具和程式語言也都可以直接使用同樣的寫法。
閒話 ― 為什麼設計師不會“憑感覺”選色
2014年Google釋出的“Material Design”並不只是一份視覺風格指南，而是一整套將色彩、字型、動效與佈局統一在同一套規則之下的設計系統。其中的配色板設計得尤為嚴謹：每種色相（Red、Blue、Green等）都配備了從50到900的明度編號，讓設計師無需僅憑感覺，就能在整個應用中搭建出統一協調的配色方案。
如果每次都臨時挑選顏色，應用內很容易散落著看似相近卻又略有差異的色調，導致設計缺乏統一感。從事先體系化好的配色板中選色，既能保持配色的一致性，又能通過同一色相內明度的變化，自然地表現按鈕的不同狀態（預設、懸停、按下等）。
CSS指定顏色的方式在歷史上經歷過多次擴充套件。1996年出現的CSS1只支援16種基礎命名色和HEX色值，如今則可以使用更貼近人眼感知的HSL、HWB、LAB等色彩空間。即便如此，HEX色值在實際工作中依然是使用最廣泛的表示法，至今仍是設計師與工程師之間不可或缺的通用語言。