配色調色盤

網頁配色表(CSS)

這些配色是專為網站與介面設計打造的。每組都附上色碼,也能複製可直接貼上的 CSS。點一下顏色即可複製、加入我的最愛,或在編輯器中開啟做細部調整。

網站顏色怎麼選

一個介面通常只需要品牌主色、用於操作(按鈕與連結)的強調色,以及用於背景、邊框和文字的灰階。固定使用同一組色碼保持一致,並透過 CSS 變數套用。

把配色複製成 CSS

每張卡片都有一個按鈕,可以複製全部五個顏色的 CSS。貼到你的樣式表中,再依專案需求修改變數名稱即可。點一下顏色,也可以單獨複製一個顏色。

對比與無障礙

發布之前,先確認文字放在背景上是否容易閱讀。對比檢查器可以幫你檢查是否符合 WCAG 的 AA 或 AAA 等級。這對無障礙和 SEO 都很重要。

想從頭建立自己的配色,可以使用配色產生器、從圖片擷取配色,或檢查顏色對比。