配色##網(wǎng)站##素材##免費(fèi)##編輯#

配色在整個網(wǎng)站設(shè)計中占有舉足輕重的地位，它可以直接影響用戶對網(wǎng)頁的體驗感。作為網(wǎng)頁設(shè)計師的你還停留在苦苦比對色卡，一個一個不停

的嘗試中？

NO！NO！NO！小編在這里為小伙伴們帶來了適合網(wǎng)頁設(shè)計師使用的9個在線配色工具，讓配色變得簡單，想怎么試色就怎么試色！！

1

colorhexa

https://www.colorhexa.com/

ColorHexa是一款免費(fèi)的顏色轉(zhuǎn)換工具，用慣了PS吸管工具的小伙伴們，會在這里驚訝的發(fā)現(xiàn)，原來除了吸管工具還有這么多類似功能的工具可以用！

假如用戶想指定顏色，只需要簡單的在搜索框內(nèi)輸入某個顏色名稱，它就能顯示出一個十分詳細(xì)的信息，并且還將其分別轉(zhuǎn)換成對應(yīng)的十六進(jìn)制、二進(jìn)制、RGB、CMYK、HSL、HSV、 CIE-Lab、Hunter-Lab、CIE-Luv、CIE-LCH、XYZ、xyY值。

從同色系，到對比色、或者是自動生成的HTML元素等等都有顯示。

ColorHexa網(wǎng)站的存在足以滿足各種配色工作。對網(wǎng)頁設(shè)計的朋友來說，ColorHexa是工作中必不可少的網(wǎng)站。

2

coolors

https://coolors.co

Coolors是一個在線生成配色的工具，快速、簡單的配色方式可以幫助用戶在最短的時間內(nèi)找到最適合的配色方案。Coolors每次會挑選五種顏色組成的調(diào)色板，并且都配有顏色色值，方便大家使用。

如果是第一次使用這個網(wǎng)站的用戶，也不用太擔(dān)心，因為它會有一個簡單的使用介紹，告訴你不同的按鈕有著什么樣的用途，對于全英文的網(wǎng)站來說，這個小介紹還是蠻實(shí)用的。

假如你有看中的顏色，可以就在此網(wǎng)頁上快速選取，或修改成你更需要的顏色顏色。Coolors整體的使用感還是不錯的，當(dāng)你們想要快速尋找一些配色的方案，可以去Coolors 看一看，也許會有意外的收獲哦~

3

palettte

https://palettte.app/

palettte和之前見到的網(wǎng)站不太一樣，它是一款色彩編輯和重映射工具，能夠幫助你從一個顏色中構(gòu)建出另一種顏色，還支持單個顏色微調(diào)。

不過，小編對這個網(wǎng)站最初的興趣并不是網(wǎng)站本身，而是設(shè)計者在這個網(wǎng)頁背后的故事。有空可以去看看，也許會對你有所感觸。

4

colorsupplyyy

https://colorsupplyyy.com/app

ColorSupply 收集了全世界設(shè)計師們優(yōu)秀的色彩搭配方案，并且根據(jù)五大配色方案進(jìn)行分類。

網(wǎng)站有一些不同形狀的幾何插圖，用戶可以根據(jù)上面選中的配色方案。

5

materialuicolors

https://materialuicolors.co

materialui網(wǎng)站的色板是一個從基礎(chǔ)顏色到逐漸擴(kuò)充的過程。主要是針對需要快速尋找設(shè)計顏色代碼的工作人員。在點(diǎn)擊顏色時可以對相應(yīng)配色進(jìn)行及時的預(yù)覽。

6

colorhunt

https://www.colorhunt.co

Color Hunt 這個網(wǎng)站的建立已經(jīng)有一段時間了，它的存在為眾多設(shè)計師們提供了許多優(yōu)秀的配色方案。

并且用戶還可以在colorhunt上以票選的形式，選出最喜歡的方案，供大家參考。

7

colorsafe

https://colorsafe.co

Color Safe網(wǎng)站是一個免費(fèi)的 WebAPP，它可以根據(jù)用戶選中的配色顯示出相關(guān)建議。非常的實(shí)用。

8

adobe color

https://color.adobe.com

Adobe Color CC之前的名字叫做Adobe Kuler，它是一款Web 的取色器，雖然更新?lián)Q代多次，但是核心的調(diào)色，取色功能并沒有改變。

9

open-color

https://yeun.github.io/open-color/

open-color網(wǎng)站對于色彩都經(jīng)過了優(yōu)化處理，網(wǎng)頁設(shè)置上的訪問性會更強(qiáng)。

線上配色網(wǎng)站的確是一個快捷的工具，但是對色彩搭配的感覺還是需要設(shè)計師們常常留心觀察、訓(xùn)練。當(dāng)然，也要注意審美水平的逐步提高哦~一個方便快捷的工具，以及設(shè)計師們獨(dú)特的配色審美相結(jié)合，才能創(chuàng)造出更好的作品。

-end-

原創(chuàng)編輯整理，圖片版權(quán)歸原作者所有

如有問題聯(lián)系我們

源：彩云譯設(shè)計（caiyunyisheji）

以一個 app 改版案例，深入淺出地告訴大家如何適配深色模式，同時給出了正確和錯誤的示范，相信對于目前流行的深色設(shè)計趨勢來說，是非常的實(shí)用了。

Google 在 2019 年度 I/O開發(fā)者大會上宣布，安卓將會從系統(tǒng)底層支持深色模式。同時，我們也會看到更多支持深色 UI 的應(yīng)用正在推出。

深色 UI 很快將成為一種常見的模式，其他應(yīng)用也很快會遵循這一模式。

在這篇文章中，我將會以我們的應(yīng)用 Shutter Points 為例，解釋如何從淺色 UI 適配深色 UI。

優(yōu)化顏色

1. 調(diào)色板

Shutter Points UI 的主要顏色是單色為主，目的是為了突出圖片內(nèi)容。主色調(diào)用于主導(dǎo)航欄，標(biāo)簽中使用 5 種輔色將圖片注釋與對應(yīng)的類別聯(lián)系起來。

△ Shutter Points 中的主色和輔色以及在界面中的應(yīng)用截圖

當(dāng)應(yīng)用深色模式時，亮色和低飽和度的顏色相比于飽和度高的顏色會更受歡迎。使用亮色的時候要確保元素易于閱讀，并配合一個對比度適中的暗色背景。

使用谷歌提供的顏色編輯器（https://material.io/resources/theme-editor/）可以為每個品牌顏色創(chuàng)建一個自定義色板，然后從中選擇合適的顏色。

根據(jù)谷歌設(shè)計規(guī)范（https://material.io/design/color/dark-theme.html#ui-application）建議，在使用深色模式時，一個好的經(jīng)驗法則是將調(diào)色板的色值范圍保持在 200 左右。

（彩云注：谷歌提供的顏色規(guī)范中 100-900 數(shù)值的具體意義，感興趣的請見知乎上的回答：https://www.zhihu.com/question/26340807，這里就不做深入解讀了。）

任何一個深色界面都需要有一個合適的對比度，按 WCAG 的 AA 級標(biāo)準(zhǔn)來說，界面中的文字與背景的對比度至少要達(dá)到 4.5 : 1。

△ 品牌顏色中的一個淺色被選為深色模式配色

2. 界面顏色

有了新的配色方案在手，是時候改變界面的顏色了。深色主題中的所有界面都是以默認(rèn)的深灰色 #121212 作為基準(zhǔn)的。

在 UI 組件上添加不同透明度的白色，根據(jù)不同的層級搭配不同的透明度。

△ 疊加的層次范圍從0%到16%

（彩云注：深色模式中的高度 [ elevation ]，準(zhǔn)確的含義其實(shí)是 Android 開發(fā)中的一個樣式代碼，用來設(shè)置界面的權(quán)重的，比如 android:elevation=”1dp”，層級就在 android:elevation=”0dp” 之上了。）

為了表示不同的層級高度，我們需要在組件的樣式中調(diào)整 2 個值：

• 投影屬性
• 疊加的透明度

無論使用哪種主題，應(yīng)用正確的高度將確保元素保持在一個一致的視覺層次。想知道應(yīng)用中透明度該用多少？這里有一個表：

（彩云注：我把規(guī)范中的表格幫大家截圖出來，貼在這里，想看更多詳細(xì)內(nèi)容請見：https://material.io/design/color/dark-theme.html#properties）

組件中通過使用不同透明度的白色覆蓋來保持它們在深色主題中的高度一致。

3. 避免大面積顏色

在某些情況下，僅僅將顏色由亮變暗并不會得到一個好的結(jié)果。

例如在我們 app 的引導(dǎo)頁中，淺色模式下使用次要顏色能突出內(nèi)容，但在深色模式下，整個背景都是高飽和度的顏色，卻會讓界面顯得非常的刺眼。

對于這些情況，最好是選擇一個深色背景，然后保留次級顏色用于標(biāo)題等小面積元素。

大面積的高飽和度顏色不適合用于深色模式。

文本優(yōu)化

1. 文字顏色

谷歌設(shè)計規(guī)范主要強(qiáng)調(diào)了 3 種文本顏色。

這里主要是通過修改白色或黑色的不透明度作為顏色值。

• 強(qiáng)調(diào)文本 -> #FFFFFF（87% opacity）
• 中等文本 -> #FFFFFF（60% opacity）
• 次級文本 -> #FFFFFF（38% opacity）

△ 不同重要級和不同大小的文本在整個UI中傳遞出了層次結(jié)構(gòu)，這個原理也適用于深色主題。

2. 注意對比度

所有的文本內(nèi)容應(yīng)該易于閱讀并符合標(biāo)準(zhǔn)規(guī)范。網(wǎng)頁標(biāo)準(zhǔn) WCAG 2.0 中規(guī)范 AA 級別的文本，普通文本與背景之間的對比度為 4.5 : 1，大標(biāo)題文本這個比例為 3 : 1。

在我們的 App 中，直接把淺色背景下的標(biāo)簽顏色帶到深色模式中，文本開始變得很難閱讀。為了得到一個好的對比度，所有的標(biāo)簽文本需要修改到深色，識別度會更高。

△ 彩色元素上的文本需要改變顏色以保證易讀。

谷歌做了一款測試工具，幫助確定在哪個顏色值時需要將白色文本改為黑色文本，工具的地址在（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）

（彩云注：彩云親測，還挺方便使用的，建議用電腦端打開這個頁面試用一下，對于配色糾結(jié)癥患者，有良好的治愈效果。）

小建議：推薦一款在 sketch 和 Adobe XD 中使用的小插件叫 Stark，可以方便的測試出你設(shè)計的界面可用性。

插畫和動效

如果應(yīng)用包含插畫和圖形元素，這些也需要做好深色適配工作。

如果插畫有「背景」和「主題」，最好是將背景的飽和度降低，以保證對于主題的關(guān)注。

Lottie 動畫可以通過在 AE 中的源文件來重新導(dǎo)出 json 文件，來調(diào)整動畫的明暗適配，很方便。

△ 深色主題插畫同樣讓用戶關(guān)注到插畫的主題內(nèi)容。

總結(jié)

隨著深色主題被引入操作系統(tǒng)級別，應(yīng)用將需要在不破壞任何原有體驗的情況下做出適配優(yōu)化。

深色主題并不是僅僅做簡單的反色。

設(shè)計師和開發(fā)者必須明確以下幾點(diǎn)：

• 所有的 UI 元素必須符合標(biāo)準(zhǔn)的可用性原則；
• 組件的可視層次結(jié)構(gòu)在不同的顏色主題內(nèi)應(yīng)該是保持一致的；
• 品牌識別不應(yīng)該受到主題顏色變化的影響。

原文：https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5

作者：Pierluigi Rufo

譯者: 彩云Sky