顏色戴很多帽子。品牌將色彩視為心情和知覺(jué)。在SASS和LESS功能方面，開發(fā)看到了顏色。UX設(shè)計(jì)將色彩視為跨平臺(tái)的一致系統(tǒng)。總體而言，色彩是傳達(dá)不同類型信息的通用工具。
為了改善顏色決策，讓我們介紹如何：選擇調(diào)色板，確定顏色優(yōu)先級(jí)，考慮數(shù)據(jù)可視化以及測(cè)試可訪問(wèn)性。
使用顏色理論選擇調(diào)色板
了解一些顏色元素將幫助你為調(diào)色板選擇正確的顏色。色輪是牛頓的光實(shí)驗(yàn)的衍生產(chǎn)品，將為你提供幫助。
色相飽和度
色相是色輪上的特定顏色或等級(jí)。
飽和度是指顏色的強(qiáng)度。在100％飽和度下，色彩是最純凈的。
色調(diào)，色調(diào)和陰影
將純色與中性色混合會(huì)產(chǎn)生較淺和較深的變化。
淡色?—顏色與白色混合
色調(diào)?-與灰色混合的顏色
陰影?-顏色與黑色混合
和諧的調(diào)色板
“所有顏色都是鄰居的朋友和對(duì)立的情人?！?—馬克·夏加爾
這些調(diào)色板基于色輪，由和諧地協(xié)同工作的顏色組成。
我們將介紹單色，相似，互補(bǔ)，分裂互補(bǔ)和三重調(diào)色板。
單色由色調(diào)，色調(diào)和一種色調(diào)的陰影組成。
用彼此相鄰的三種顏色創(chuàng)建類似的調(diào)色板。
互補(bǔ)色包含兩種相反的顏色，可產(chǎn)生高對(duì)比度。
分補(bǔ)互補(bǔ)色由三種顏色組成，
????甲三元調(diào)色板具有三個(gè)色調(diào)圍繞車輪等距隔開
獲得靈感
這是你開始使用自己的調(diào)色板的幾種方法。
創(chuàng)建漸變：從和諧調(diào)色板創(chuàng)建漸變。
優(yōu)先處理主要和次要
在設(shè)計(jì)系統(tǒng)中確定顏色的優(yōu)先級(jí)并進(jìn)行定義。就像直觀的庫(kù)一樣，有組織的顏色可以幫助你的內(nèi)部團(tuán)隊(duì)找到他們想要的東西。它們還可以幫助你的團(tuán)隊(duì)為用戶創(chuàng)建視覺(jué)一致性。力求精確的原色，足夠的輔助色和清晰的名稱
主要
界面中經(jīng)常使用原色。它們包括商標(biāo)，交互元素，布局和文本中的顏色。添加一個(gè)簡(jiǎn)單名稱及其十六進(jìn)制數(shù)字：violet：＃8322DD
次要
次要顏色偶爾使用，由基于原色的重音組成。通過(guò)手工挑選，CSS函數(shù)（變暗，HSL％變亮）或同時(shí)通過(guò)兩者創(chuàng)建（Curtis，2016年）。輔助顏色可用于表示系統(tǒng)反饋，例如任務(wù)成功，錯(cuò)誤或警告。
色調(diào)疊
色調(diào)堆棧提供了靈活的選擇。嘗試賦予你的團(tuán)隊(duì)足夠的選擇權(quán)（3–4個(gè)步驟），但選擇的范圍不太多，以至于損害了一致性。
你可以使用HSL百分比創(chuàng)建堆棧，以輕松使用CSS函數(shù)實(shí)現(xiàn)。包括顏色名稱，HSL亮度（0 -100）和十六進(jìn)制編號(hào)：violet-lighter-20：＃B47AEA。
動(dòng)手吧
EVA顏色：此AI工具可幫助你基于原色查找通知的輔助顏色。
著色疊層的冷卻器：從一種顏色開始，并以遞增的方式更改HSL亮度。
對(duì)于數(shù)據(jù)可視化，使用顏色強(qiáng)調(diào)數(shù)據(jù)的故事性。根據(jù)數(shù)據(jù)的復(fù)雜程度，你可能需要6–12種顏色才能涵蓋所有用例。創(chuàng)建具有廣泛色相和亮度范圍的靈活色調(diào)堆棧。
數(shù)據(jù)類型和推薦的調(diào)色板：
分類
分類由非數(shù)字類別（國(guó)家，性別，姓名）組成。對(duì)于不同的類別，色相在色輪中間隔開的調(diào)色板效果最佳。
順序
順序數(shù)據(jù)具有數(shù)字或有序值。為了指示數(shù)字步長(zhǎng)，顏色應(yīng)逐漸改變色調(diào)和亮度。就像類似的調(diào)色板一樣，使用彼此相鄰的色相。較低的值應(yīng)開始變亮，較高的值將變暗。
發(fā)散
差異數(shù)據(jù)還包含數(shù)值?；旧鲜莾蓚€(gè)相繼的調(diào)色板在一個(gè)中心點(diǎn)相遇。發(fā)散可以具有負(fù)值到正值，或者在頻譜上相反。保持中心點(diǎn)較亮，并允許顏色從中心進(jìn)一步變暗。
可視化
讓我們看一些工具，這些工具將使你更輕松地選擇調(diào)色板以進(jìn)行數(shù)據(jù)可視化。
ColorBrewer：瀏覽調(diào)色板（順序，發(fā)散，分類），并在地圖上可視化它們。
Viz Palette：此工具可讓你在不同的數(shù)據(jù)可視化圖表上查看調(diào)色板。
測(cè)試你的調(diào)色板的可訪問(wèn)性，以確保具有不同視覺(jué)能力的用戶可以看到每種顏色。對(duì)可訪問(wèn)性進(jìn)行測(cè)試是邁向更加實(shí)用和易讀的產(chǎn)品的一步，可增強(qiáng)其體驗(yàn)。盡早檢查并經(jīng)常檢查顏色是否符合萬(wàn)維網(wǎng)聯(lián)盟（W3C）準(zhǔn)則。
對(duì)比
尋找背景上文本的足夠顏色對(duì)比度，以及在數(shù)據(jù)可視化中一起使用的顏色之間的對(duì)比度。在低對(duì)比度的情況下，文本將變得更難以閱讀，并且數(shù)據(jù)也難以區(qū)分。W3C建議使用以下對(duì)比度：
文字4.5：1
大型文字為3：1（粗體為14pt，常規(guī)為18pt）
3：1的圖標(biāo)
視覺(jué)提示
除了傳達(dá)重要狀態(tài)的色彩外，還嘗試使用多種視覺(jué)提示。色盲用戶可能無(wú)法單獨(dú)使用顏色來(lái)傳達(dá)信息。例如，你可以為系統(tǒng)通知添加圖標(biāo)以及顏色和文本。
無(wú)障礙范圍
在背景上創(chuàng)建不同文本顏色的對(duì)比對(duì)。然后根據(jù)中性色調(diào)的進(jìn)展顯示可訪問(wèn)范圍。這可以幫助你的團(tuán)隊(duì)準(zhǔn)確地了解無(wú)法訪問(wèn)的位置。
以下是我們學(xué)到的內(nèi)容的快速回顧：
用色彩理論挑選一個(gè)和諧的調(diào)色板
將顏色分為主要和次要
考慮數(shù)據(jù)可視化及其數(shù)據(jù)類型
盡早測(cè)試色彩可及性
我們將色彩與它的通用光譜結(jié)合使用，以試圖表達(dá)我們?nèi)祟愺w驗(yàn)的深度。我希望這篇文章對(duì)你有所幫助，并且希望你從UX的角度出發(fā)對(duì)顏色有了另一種看法。
