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

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

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

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

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

Colors.css

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

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

使用教學

STEP 1

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

Colors.css

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

Colors.css

STEP 2

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

Colors.css

STEP 3

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

Colors.css

STEP 4

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

Colors.css

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

Colors.css

值得一試的三個理由:

  1. 為網頁色彩(Web colors)提供更符合現代感的 16 種預設配色
  2. 稀釋顏色對比讓顏色不過度飽和,亦能消除原有的緊張感
  3. 免費下載各種調色盤檔案可匯入繪圖軟體
分享到...