Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤

製作網頁時會用來表現各種色彩的方法稱為「網頁顏色」（Web Colors），1999 年制定 HTML 4.01 版本確定 16 種預設顏色的英文名稱和十六進位代碼，經過十幾年的網路快速發展變化，這些顏色雖然還是被繼續使用，但看起來似乎也有些過時，從前在老網站使用的顏色現在看起來不再那麼「現代」。如果你曾經使用過一些提供網站配色的相關工具或服務，會發現目前流行的顏色跟十年前已經不同，因此有人想到或許該來更新一下這些預設顏色。

本文要介紹的「Colors」是一款開放原始碼專案，它為網頁提供更好的預設顏色調色盤，因為十幾年前的網頁顏色已經不符合當前設計趨勢，有人決定將它稍作調整，透過稀釋對比讓顏色不過度飽和，也能消除原有顏色帶給閱讀者非常緊張的感覺。

舉例來說，黑色從 #000000 變成 #111111，藍色也從 #0000FF 變成 #0074D9，維持相同色調，但消除不和諧的對比效果，使這些顏色能套用到任何現有版面配置也不會產生不協調感。下圖是原有的 16 種預設配色和 Colors 修改後的顏色對照，可以看到顏色柔和許多，也更符合當代的網頁設計需求。

如果你想將 Colors 選擇的 16 種預設配色調色盤使用於開發，可從官方網站免費下載 CSS 樣式表，更重要的是它還提供免費調色盤，可快速將顏色匯入你的設計軟體中，輕鬆使用這些顏色，包括：Photoshop 的 .aco、Illustrator 的.ase 和 Gimp/Inkscape 適用的 .gpl 格式。

網站名稱：Colors
網站鏈結：https://clrs.cc/

使用教學

STEP 1

開啟 Colors 專案網站，可以看到全新的預設網頁顏色（下方還會有舊的預設顏色對照）。

透過 Colors.css 樣式表也能把顏色快速套用到 SVG 元件，網站提供一些預覽範例。

STEP 2

要如何取得樣式表呢？很簡單，找到 Get Colors 就有相關鏈結，也能透過指令下載，或者直接將 CSS 樣式表放到你的網站中使用。這份 CSS 樣式表相當精簡，最小化壓縮後只有 647 Bytes，包含背景、前景色、外框顏色及 SVG 填充和邊框樣式。

STEP 3

前面介紹有提到 Colors 提供配色檔案，讓設計師可快速將顏色匯入自己慣用的繪圖軟體。

STEP 4

Colors 還提供「A11Y」（無障礙環境）配色選項，透過文字前景及背景顏色的配色組合，讓網站可以符合 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指南）規範，這意思是讓文字與背景顏色達到夠大的差異，充足的對比才能夠符合一定程度的易讀性，使身心障礙者可以正常閱讀。

Colors.css 提供 90 種配色組合範例，有興趣的朋友可繼續參考 Colors a11y 頁面說明。