色不僅僅是一門藝術，某種意義上還是一門生物學科。很多我們認同的色彩搭配邏輯，其實背后都有自然與生物科學作為支撐。

只是，大多數時候我們是無意識的和循規蹈矩的使用，對于為什么這樣？似乎并不怎么關心。

今天這篇文章，是國外一位電影制作人Art Adams對于色彩、亮度以及生物學關系之間的一些思考。

Art Adams坦言：“在色彩領域，自己是一個嚴格的業余愛好者而非科學家或藝術專家。但對于色彩藝術上的問題，他喜歡刨根問底。

黃色為什么是最亮的顏色？綠色為什么在所有的色域中范圍都最大？橙青調是怎么成為好萊塢最受歡迎的色彩搭配的？前進色與后退色的感受是怎么造成的？

這些問題可能你也多多少少有過思考。這篇文章里，Art Adams給出了很多有價值的觀點。

意識是發現的關鍵，我希望你讀完我這篇文章，能夠從中找到樂趣。

——Art Adams

這張圖大家可能見過，也許是在某篇描述色彩科學的文章里，也許是在你的初中生物書上。這就是人眼中視錐細胞的光譜反應圖，S與藍色有關。“M”與綠色有關。“L”與紅色有關。

大家都知道紅、綠、藍是色光三原色。三原色通過疊加，可以混合出其它的所有顏色，這就是我們常說的加色混合模式。

在這種情況下，每個加色三原色就對應于上圖中的一個峰值。“加色”模式下，如果以黑色開始添加顏色，則疊加出的顏色會越來越亮，并且如果以等量添加，則結果將為白色。這也是光的工作方式。

幾年前，在拍攝一個MTV時，一位年輕的制作人，希望讓背景色更飽和一些。

他們告訴我：“直接在后面加幾盞燈吧”。

我說：“那沒用，因為光是加色模式”

他們似乎沒聽進去：“你就這樣干吧!” 我們沒時間了，我不想爭論! ”

“好吧……我迫不得已在背景上添加了更多的燈，并加入了非常飽和的色紙。結果是背景變得更亮了，畫面飽和度反而更低了。

最后制作人妥協了，我把大部分燈都關掉，把周圍的光從背景中去除，這使得剩下的彩燈看起來更加純凈。

這就是光的工作方式。無論你加的色紙顏色有多重，如果你加入更多的光，你會得到一個更亮的畫面。

在加色法系統中，三原色等量相加得到白色，減色法則不同，在減色法系統中三原色等量相加得到的是黑色。

水彩畫就是一個很好的例子: 一開始是白色的，顏料的使用過濾了白色光譜的一部分，留下了想要的顏色。加色法總是會使顏色更深。

減色法三原色是黃、品紅和青。

加色法在光的領域（比如投影、led和顯示屏、交通燈...）等作用。但在沒有電的世界里，減色法決定了我們如何看這個世界。

在這個過程中，綠色是一種對于我們的肉眼來說相對更敏感的顏色。

我不知道這是否有用，但確實很有趣。

最亮的顏色是什么?

黃色

我們再來看看這個圖表

L和M錐體的光譜響應曲線重疊很多。有一種理論認為，L錐體只是M錐體的突變，這意味著人眼“紅色”視錐體可能是進化中的一個意外，這也解釋了為什么它們如此相似。

另一個方面，可以通過分析luma（亮度）系數來理解

Rec. 709:

Red = 0.2126

Green = 0.7152

Blue = 0.0722

換句話說，luma（亮度）通道下:

Red = 21%

Green = 71%

Blue = 7%

“這和黃色有什么關系?”

“對不起，我正要說呢。”

由于綠色和紅色構成了我們對亮度的主要感知，如果紅色是我們亮度感受的21% ，綠色是71%，那么它們相加（紅色+綠色=黃色）。黃色就是我們感覺亮度的92%。

另一方面，藍色只有7%。純藍色永遠不會很亮。

為什么這很重要?

你可以去問問室內設計師們，它們都知道的一個原理：

暖色前進，冷色后退

“好萊塢大片”的澄青色風格是眾所周知的，以至于已經成為陳詞濫調。

然而，最大的問題是。它的工作原理是什么？它為何產生？

讓我們回到幾十萬年前，人類還住在山洞里的時候

區分前景和背景的東西是:

前景:膚色(暖色)

背景:天空(冷色)

那我們就來逐一分析一下。

暖色

我們能很敏感的看到膚色，因為它是紅色和綠色的結合——這兩種顏色對我們肉眼的“明亮感”貢獻最大。

我第一次在弱光下使用Arri Alexa時，遇到了很大的一個困惑。我不斷檢查顯示器上的儀表，因為根據儀表顯示，我的臉應該是比顯示器上的黑很多，但肉眼看實際不是這樣的。

Arri似乎模仿了一種減色模式，最飽和的色彩也最暗的地方,因此它們會使色彩飽和，直到亮度達到中灰。在中灰之外，顏色只會變得更亮，而不是更飽和。

然而，這讓我感到困惑，因為從肉眼看膚色比我在儀表器讀出的更明亮，我認為這也是索尼LC 709 typeA LUT 讓人感覺曝光不足的原因之一。

幾年前，索尼讓我在CineGear上做一個關于索尼F55和Cine-EI的演講，聽眾抱怨說“正常”曝光看上去太暗。但通過亮度波形判斷，它已經快到頭了。

我的猜測是，他們把中間調的飽和度拉低了一點（這樣給予我們“明亮感”的橙黃色就少了）臉就會感覺比以前暗了一點。因為膚色是由紅綠兩種顏色組成的，而這兩種顏色是我們最容易產生明亮感的顏色。

還有一個例子，幾年前，我參與了一部黑白短片的制作，DP把膠片曝光得好像是（color negative）彩色負片一樣，但dailies中所有的膚色都顯示為暗灰色。

就在那時，突然我意識到，老黑白電影中的膚色應該比彩色電影中的膚色曝光的更亮——至少亮了一截——因為如果沒有顏色信息，它們看起來就是暗灰色，就需要更多的曝光，才能顯得栩栩如生。

冷色

藍色的天空總是明亮的，所以我們的肉眼不需要像對其他顏色那樣，對藍色過于敏感，通常我們看到的大量藍色都是在遠處，在主體的后面。

在自然界中，除了天空以外，真的沒有其它地方能看到更多藍色。比如很少有藍色的食物。根據《瓦格納顏色反應報告》，讓食物看起來沒有胃口的最好方法，就是用藍色的光來照亮它。

冷暖對比

原始時代，我們狩獵為生。習慣看到膚色在旁邊，藍天在遠處。

膚色看上去明亮，因為它包含了我們最敏感的兩種色彩，而眼睛最不感敏感的藍色和我們始終有一種距離。

在室內設計界有句話說“暖色前進，冷色后退”。在我們作為靈長類動物進化的背景下，這是很有道理的。

當調色師讓膚色變暖，讓其他顏色變冷時，他們只是在利用人類天生對顏色的反應，從而產生一種潛意識的原始視覺感受，增強我們對畫面層次，和前景/背景分離的感覺。

綠色，最好的增光劑

任何看過Rec. 709 (HD)和Rec.2020/2100 (UHD/HDR)色域對比圖的人都知道，綠色比其他顏色延展的范圍更大:

但你有想過為什么嗎？（這個問題在HOMEBOY調色職業班課堂上，也經常有不少學員問道）

還記得剛才說的嗎。綠色占亮度的71%，它也是我們能看到的最飽和的顏色之一。

如果你曾經在森林里拍攝過，你會發現森林是一個非常黑暗的地方，樹葉越重，顏色越深，它吸收藍色/紫外線，和紅色/紅外線，僅僅留下綠色。

在一個頭頂有捕食者的黑暗森林中，能夠看到樹葉和樹枝之間的移動可能意味著生與死的區別，所以我們先天就對綠色敏感。這也許就是為什么我們能如此清楚地看到綠色的原因。

根據《視覺與藝術:視覺的生物學》(強烈推薦)一書中說道；“我們觀察運動的能力很大程度上是基于光本身，這或許可以解釋，為什么這種感覺在很大程度上是基于綠色的”。

在藝術創作上，綠色是一種復雜的顏色。它的存在和不存在，都會引起注意:綠色過多（臉上呈黃色）或綠色不足（呈品紅色或紅色）的光線在視覺上都會令人感到不舒服。

綠色能使任何混合的顏色變亮，我們喜歡的許多色彩，或多或少都有一些綠色在里面。

在現實世界中，很少能看到純藍色，或純紅色，綠色經常與藍色混合在一起，創造出一種更明亮的色調，許多人認為這是純藍色，但事實并非如此；綠色還經常和紅色混合在一起，創造出一種更亮、略帶橙色的紅色，這種紅色有更多的“沖擊力”，但仍然給人以紅色的感覺。

藍色，很好的去飽和劑

有一次，當我用攝影機拍攝金門大橋時，我發現可以讓草變綠，或者讓橋偏向適當的橙色，但不能同時讓兩者兼得。

一些攝影機通常會將紅色偏向一點橙色，這顯然是為了將皮膚瑕疵（紅色）混合成膚色，并將橋的顏色染成橘紅色。

我通過使用一個攝影機內置的顏色矩陣，讓橋的顏色變得更合適了（偏向橙色），但同時也使得前景中的草地呈現出強烈的綠色，分散了畫面中對人物的注意力。

我意識到，在最初沒有添加顏色矩陣的畫面中，紅色向膚色傾斜，也將綠色向藍色偏移，這樣草地不會特別飽和，人物被很好的強調了出來。

所以，我開始在兩個方案之間掙扎。

這時我意識到，技術上正確的顏色并不總是完美的:很明顯，有人明白亮綠色搶了膚色的風頭，他們為此做了一些改變和修正（也就是向藍色偏移）。

我唯一有些抱怨的是：我不能在給草去飽和的同時讓橋的顏色合適，至少使用攝影機內置的顏色矩陣無法做到。我就不得不在后期通過調色來處理。

正在上映的電影《大黃蜂》中對于金門大橋場景的處理

在任何顏色中加入藍色都會降低它的亮度，因為藍色對我們的亮度貢獻很小，這通常也會降低顏色的飽和度。

這也是綠幕合成流行起來的原因之一。在任何使用綠色幕布的場景中，綠色幕布在現有光線下總是顯得更亮。(綠色=Rec. 709 luma 71%，藍色= 7%)，而以前的純藍幕就暗一些。

此外，任何在綠色背景前的物體，都會幫助畫面形成對比度比較高的場景。這對于生成蒙版很有用，但往往也更容易在畫面中暴露出攝影機和編解碼器的缺陷。

青色：我們愛它們，因為我們不能擁有它們

當Varicam 35攝影機發布時，我發現它在視覺上呈現出來的感受令人驚嘆，尤其是對于日光場景的記錄。我花了很長時間才弄明白為什么。

最終我意識到，這是因為它能以一種大多數攝影機無法做到的方式突出冷色調。

我有一個觀點，我們喜歡青色，是因為我們看得不太清楚。

在文章頂部的圖表中，我們看到藍色和綠色沒有重疊，所以我們在自然界中，我們看到減色法的青色不會非常明亮。

不過，加色法的青色,可以達到和預期一樣的明亮度。一些攝影機制造商會在藍色的天空中添加一點綠色，讓它們看起來更流行一些(有點類似于“糖果天空”風格，它們對我來說有點太過了)。

視頻鏈接：

https://v.qq.com/x/page/w08271rvazd.html

這是松下HDR電視廣告在Varicam 35上拍攝的一條廣告，大部分藍色實際上有點綠——但很微妙。

這個廣告中的鏡頭包含了好萊塢大片“暖色進，冷色退”的一些很好的例子。

看這個畫面，黃色花瓣需要最大的視覺處理能力，因為黃色同時刺激肉眼的L和M錐體。

整個畫面暖黃色為主，但最紅要的卻是背景中零星的青色窗口，盡管是作為點綴，但卻保證了畫面的顏色對比和層次感。它定義了畫面的最大深度。（暖色前進，冷色后退）。

這幅畫面也是同樣的道理，只是對比更加明顯一點。請注意這幅圖像的對比度本身是比較低的，因為沒有任何明亮的高光或深陰影。

但是色彩的搭配卻讓對比度感覺比實際高。有趣的是，花瓣是黃色(紅色+綠色)和青色的(藍色+綠色)。所以服裝要么是溫暖的(紅色+綠色)，要么是暗淡的白色，要么是黑色。如果沒有黑色的服裝，圖像會感覺有點單調。

這個畫面還是一樣，暖色前進，冷色后退。紅色的前景和青色的背景使這位女演員顯得很漂亮。汽車上的綠色亮點與車窗上的紅色倒影形成了鮮明的對比，使演員更加突出。

紅色和綠色是對立的: 我們從來沒有看到過綠紅色或紅綠色，所以把它們放在一起會形成更大的對比。他們變得更加“流行”了。

這個畫面，雖然整體上是冷色調，但是綠色和前景的暖色調混合在了一起，形成了略帶黃色的高光。溫暖的前景在冷色的背景襯托下顯得格外醒目。這是經典的“好萊塢大片”色彩風格。

這個屢試不爽的套路真的很管用！(此外，由于這款顯示器是專為HDR而設計的，所以額外的綠色可能會在Rec 2020/2100顯示屏上顯示出更多，因為綠色在Rec 2020色域中擴展的最多。)

這并不一定意味著它更飽和，但它有可能創造出比我們在Rec 709顯示器上看到的更微妙的綠色。

再來看這張，這是少有的前景不是暖色的情況。然而，這個火球一下子就吸引了我。你看，我們的老朋友黃色，依然扮演著重要的角色。

視頻鏈接：

https://v.qq.com/x/page/i0827nruy25.html

有趣的是，調色師把青色放到了女演員的腿上——我懷疑這樣做的原因是，青色在火球的映襯下效果不佳，因為火球中心的黃色可能會讓宇航服的青色顯得更暗。

再來看一個例子，這片冰之后出現的大多是青色，但也有一些紅色混合在一起，形成了一個非常復雜的冷色調。

這個畫面的色彩非常微妙，高光部分是偏綠的藍色，但是陰影部分是微紅的藍色。這不僅會讓冰感覺更冷，而且還會增加一大塊白色冰的對比度。

藍色是不變的，但是高光和陰影之間的對比是綠色和紅色之間的對比(在人類的視覺系統中，這是對比色)。

我認為人類不希望看到完全真實的影像，這是很無聊的。我們想看到的是“現實下的扭曲”或者“基于真實的變化”。

作為電影攝影師或者調色師，我們做出鏡頭選擇、燈光選擇、曝光選擇和顏色選擇，這些都是從自然界無法找到的視角來講述故事的。

我寫這篇文章，是因為我認為，自己所做的事情，一定有生物學上的原因。

讀了《視覺與藝術》這本書，促使我寫下自己腦海中出現的想法，盡管我離讀完這本書還差得很遠。

有很多藝術家憑直覺理解顏色，但我總是想知道藝術選擇背后的“原因”。這有助于我有意識地和有直覺地使用這些技巧。

我希望你讀完我這篇文章，能夠從中找到樂趣。

原文鏈接：https://www.provideocoalition.com/thoughts-color-brightness-contrast/

究背景

本文基于目前兩大設計體系：安卓端的谷歌設計規范和iOS人機交互指南對顏色的定義和規范，參考了部分 Ant Design 的色板生成原理，為大家帶來「米莊APP」設計系統顏色規范的建立過程。

色彩理論

1. 起源

對于現代色彩的理解，我們要歸功于一個人：牛頓。牛頓闡明了動量和角動量守恒的原理，提出牛頓運動定律，給世界帶來了秩序的同時，也通過對三棱鏡將白光發散成可見光譜的觀察，發展出了顏色理論。

牛頓注意到，當你通過棱鏡發出白光時，光會被分裂成彩色漸變。不僅如此，你還可以將顏色重新組合起來再回到白色，這在當時是一個非常全新的事物。要知道在這個實驗之前，混合顏色是一種普遍的禁忌和對自然的冒犯。

△ 牛頓的光學圖之一

牛頓的彩虹是一個完美的漸變，他把它進行了排序。并且把它分成了七種顏色：紅色，橙色，黃色，綠色，藍色，青色，紫色。

△ boute的色圈

2. 發展

同時，牛頓也發明了色輪，完整揭示了隱藏在自然中的秩序，就像音樂中的音節一樣，且由偉大的藝術家歌德完善了色彩理論。對，就是那個寫了《少年維特之煩惱》的歌德。

眾所周知，歌德是一個偉大的詩人、小說家、戲劇家和杰出的思想家。但是卻很少有人知道，他還是一個科學研究者，而且涉獵的學科很多。他從事研究的有動植物形態學、解剖學、顏色學、光學、礦物學、地質學等，并在個別領域里取得了令人稱道的成就。歌德同時也是一個著名的畫家。他系統地將顏色描述為「暖色」或者「冷色」，這種冷暖概念組成了現代色彩的一部分。早期的人們可能認為藍色是一種暖色，也許因為它是火焰中最熱的那個部分。

后來我們有了蒙塞爾的球體，包豪斯的學者也詳細闡述了色輪，并且形成色調，色相，對比度等各種色彩的屬性。然后出現了現代數字顯示器的發明，這種技術讓色彩產生了無數種可能性，更多現代科技的色彩模型，可以讓我們更細致地感知色彩。

色彩概念

1. HSL

HSL色彩模式是工業界的一種顏色標準，是通過對色相（Hue）、飽和度（Saturation）、明度（Lightness）三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是迄今運用最廣的顏色系統之一。

2. HSV

HSV又稱HSB，是基于人眼的，設計軟件中常見的色彩模式。

在HSB模式中，H（hues）表示色相，在0~360°的標準色環上，按照角度值標識。比如紅是0°、橙色是30°等；S（saturation）表示飽和度，是指顏色的強度或純度。飽和度表示色相中彩色成分所占的比例，用從0%（灰色）~100%（完全飽和）的百分比來度量。B（brightness）表示亮度，通常是從0（黑）~100%（白）的百分比來度量的，在色立面中從上至下逐漸遞減，上邊線為100%，下邊線為0% 。

HSV模型通常用于計算機圖形應用中，色相表示為圓環；可以使用一個獨立的三角形來表示飽和度和明度，三角形的垂直軸指示飽和度，而水平軸表示明度。在這種方式下，選擇顏色可以首先在圓環中選擇色相，再從三角形中選擇想要的飽和度和明度。

△ HSL和HSV都是圓柱形幾何形狀

如果我們繪制色調，亮度，而不是飽和度，那么分別得出的是雙錐體和錐體，而不是圓筒。

HSL 和 HSV 都是一種將 RGB色彩模型中的點在圓柱體中的表示法，以便更接近與人類視覺感知顏色制作屬性的方式對齊。在這些模型中，每個色調的顏色排列在徑向切片中，圍繞中性色的中心軸，其范圍從底部的黑色到頂部的白色。這兩種表示法試圖做到比 RGB 基于的幾何結構更加直觀。

△ RGB基礎原理模型

今天，幾乎每種計算器，顏色選擇器，以及 Web應用程序都使用 HSL 或者 HSV，至少作為一種選擇。并且大多數的 Web前端框架都存在預打包的開源顏色選擇器。在CSS 3規范中允許網頁制作者為他們的網頁直接與 HSL坐標制定顏色。

使用HSV（HSB）的應用：

• Apple Mac OS X系統顏色選擇器（有一個H/S顏色碟和一個V滑塊）
• Adobe圖形應用程序（Illustrator，Photoshop等等）

使用HSL的應用：

• CSS3規定
• Microsoft Windows系統顏色選擇器（包括Microsoft Paint）

設計系統色彩

1. Material Design Colors

一致且有意義：顏色有助于表達層次結構，建立品牌形象，賦予意義，并指示元素狀態。對每個組件的顏色應用都有做參考。整個UI用色的精髓，可在 material 工具中體現的淋漓盡致。

顏色用法

谷歌規范中顏色的使用主要對兩個部分進行了定義，一個是主色，一個是輔助色。配色靈感來自大膽的色調與柔和的環境、深度的陰影、明亮的高光并存。我們可以在大量頁面中清晰地感知到此顏色的使用手法。

主色：強調色。應用程序的屏幕和顯示組件最頻繁的顏色。要在元素之間創造對比度，可以使用較淺或較深色調的主色。較淺和較深的色調之間的對比度有助于區分不同的表面，例如區分狀態欄和工具欄。

輔助色：則是用來強調UI中關鍵部分的顏色。輔助色可以是和主色互補的，也可以是和主色類似的，但它不應該只是簡單的對主色進行加深或變淺。輔助色應該和它周圍的元素形成對比，并作為強調，且應謹慎使用。

△ 主要和輔助調色板示例

使用原則：

• 層次清晰：最重要的元素最突出。顏色可表示哪些元素是交互式的，它們與其他元素的關系以及它們的突出程度。
• 清晰易讀：文本和重要元素（如圖標）出現在彩色背景上時，應符合所有屏幕和設備類型的易讀性標準。
• 張力表現：通過在令人難忘的時刻展示品牌色彩來強化您的品牌風格，從而強化產品的品牌。

△ 一些案例

調色板生成器

這些調色板最初由 Material Design 于2014年創建，由可以和諧協作的顏色組成，可用于開發您的品牌調色板。

調色工具

選擇配色方案：你可以自定義應用的調色板，以適配你的品牌顏色。或者，你可以使用 Material Design 的調色板創建一個全新的配色方案。

使用顏色工具創建調色板，并在應用中使用。確保應用的顏色滿足無障礙標準，且元素之間有充分的對比度，

Material Theme Editor UI編輯器

在2018年5月份的 Google I/O 大會上，Google 設計團隊一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。

使用教程：《谷歌新出的這款 Material Theme Editor 神器，讓你做設計又快又好！》

創建色彩：

• 通過選擇主要、次要、背景、文本和圖標色調，自動將顏色應用于所有組件
• 檢查顏色對比度以滿足可訪問性要求
• 從「材質」調色板中選擇顏色
• 使用單一顏色自動生成10個顏色值的色調調色板
• 使用全局顏色更改自動填充符號

安裝插件后，在 Plugins — Material — Open Theme Editor 中打開。Material 組件庫：

2. iOS Colors

顏色定義

iOS人機規范顏色定義如下，為了便于對比，我將RGB格式的色塊都轉化為HSB，可以清楚地觀察到它的特點：

使用原則

使用顏色來進行明智有效地溝通，對于重要信息的表現，顏色有非常重要的作用。比如說用戶警示的紅色。

在 app 中使用互補色。app中使用的顏色需要協調一致，不會互相沖突和干擾。選擇合適的顏色。

選擇一種顏色來表示功能的可交互性，并且區分可點擊和不可點擊不同狀態的顏色使用。

在 Note 中，可交互的元素是黃色的。在 Calendar 中，可交互的元素是紅色的。如果你定義了一種關鍵色用于傳遞可交互性，那么你要保證其它顏色不會與之沖突。比如在 app 中我們也通常用藍色來代表可跳轉。

考慮無障礙設計：關注色弱或者色盲用戶的顏色體驗，并且同時也要注意色彩之間的對比度。

在多種光線條件下測試你的 App 顏色：在不同的環境之下，app中呈現的顏色會受到外界光線的影響，所以要考慮你的 app 的多種使用場景，選擇舒適的，不會產生閱讀干擾的顏色來使用。

使用足夠的顏色對比度：在 App 中，過低的對比度會讓內容難以閱讀。比如，圖標和文本可能會和背景相融合。網上有顏色對比度計算器能夠幫助你精確的分析 App 中的顏色對比度，以確保它符合最佳標準。請確保你的 App 對比度至少達到4.5 : 1 ，但是7 : 1更好，因為它更符合嚴格的功能標準。

3. Ant Design Colors

1.0 Ant Design 色板

有意義的色彩 ：對顏色部分進行了簡要的說明。

色彩在界面設計中的使用應同時具備品牌識別性以及界面設計功能性。色彩是相當感性的東西，設計中對色彩的運用首要應考慮到品牌層面的表達，另外很重要的一點是色彩的運用應達到信息傳遞，動作指引，交互反饋，或是強化和凸現某一個元素的目的。任何顏色的選取和使用應該是有意義的。

Ant Design Colors：提供了一套調色板，并介紹了每種顏色的含義，色板由9種基本色彩組成，每種基本色又衍生出九宮格色板，在此基礎上還可以通過黑白疊加的方式實現色彩明暗的效果。

色彩與交互：提供了色彩在交互時的使用指南。顏色選擇上運用了 tint and black 系統，通過顏色的不同階級來表現不同狀態。

△ tint/shade 色彩系統算法

選取一個主色作為5號色，將主色與純白色（#fff）混合，主色與純白色之間分成100份，20/40/60/80的位置分別分割，得到4/3/2/1號色。

將主色與純黑色（#000）混合，主色與純黑色之間分成100份，20/40/60/80的位置分別分割，得到6/7/8/9號色。

通過以上方式得到一條完整漸變色板。

色彩換算工具：

2.0 Ant Design 色板

使用原則：實用

不僅應考慮品牌的識別性，還需達到信息傳遞、操作指引、交互反饋，或是強化和凸顯某一個元素的目的。基于操作系統更注重高效、清晰等特點，Ant Design 的用色上更偏向實用便捷。在選擇色彩時有以下三個注意點：

意義明確：色彩應與產品定位相匹配，且符合用戶心理認知；定義了品牌色，中性色以及功能色。

層次分明：為重要行動點或關鍵信息定義一個主色，并建立視覺連續性。

足夠對比度：遵守 WCAG 2.0 的標準，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。在由淺至深的色板里， 6格色彩單元格普遍滿足 WCAG 2.0的 4.5 : 1 最小對比度（AA 級），我們將其定義為色板的默認品牌色。

色彩對比值校驗工具

算法升級

1.0的算法有個弊端，大自然中并沒有純白或者純黑的物體，所以顏色過渡不自然。基于此基礎，并且和谷歌規范保持一致，選擇一個主色，在保持1.0的算法基礎上，再加入貝塞爾曲線。結合了色彩加白、加黑、加深，貝塞爾曲線，以及針對冷暖色的不同旋轉角度，得出2.0色板生成算法。使用者指定主色（和谷歌規范操作一致），便可導出一條完整的漸變色板。

3.0 Ant Design 色板

基于2.0版本的算法，過于復雜，且迭代算法也比較難更新，所以3.0的色板重新從輕量明確簡單的角度出發，重新調整算法。相對于第二版，增加了幾種主色，整個色板的飽和度更高，不再使用貝塞爾曲線。也更容易和開發團隊溝通。

使用了HSV模型：此版本沒有繼續使用與某個淺色/深色值進行混合的形式獲取漸變色板，而是直接用HSV模型的值進行遞減/遞增得到完整漸變色板。

色彩體系：系統級色彩體系同樣源于「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的12色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，借助美術中素描的思路，對12個顏色進行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出的。

產品級色彩體系：同樣在品牌色，功能色和中性色進行拓展和定義。

基礎色板：共計120個顏色，包含12個主色以及衍生色。

最后將 Ant Design 3個色板迭代的顏色整合在了一起，對比一下還是非常明顯的。很直觀的看出來算法之下顏色的變化之美。

4. kitchen 工具

一款為設計者提升工作效率的 Sketch 工具集。提供了各大官方精選色板庫，并且可輕松管理屬于你的色板庫。

介紹和下載地址：https://www.uisdc.com/sketch-plugin-kitchen

MIZ Colors

根據米莊多年來的品牌定位，以及目前米莊的擴展業務需求，我們對米莊產品使用中的顏色進行重新定義。基于我們產品的關鍵詞：金融科技，安全可靠，專業智能，結合色彩工程學，賦予和諧的美感色彩。

1. 主色

顏色是有意義的。色彩的表達，需要符合用戶心理認知。它包含兩個層面，第一個是品牌識別性，傳遞米莊品牌價值。最直觀的展示公司文化，以及 app 的特性。品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。前期我們對關鍵詞進行拆分，并且對每一個關鍵詞配對適合的顏色進行性格心理解析，產出品牌色以及對應的輔助色系。顏色規范中使用HSB（HSV）——通過色相/飽和度/亮度三要素來表達顏色。

目前的主色，也是我們米莊的品牌色。

HSB = 20 100 100

2. 輔助色

我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產品體系的顏色搭配，實現不同功能點的視覺呈現。輔助色還起到中和品牌色的作用，根據不同的業務需求，結合不同的場景來呈現最佳視覺效果，減少用戶對于主色的視覺疲勞。對于輔助色的選擇，我們選取了類似色、互補色、中性色三種輔助色系。

同類色

同類色搭配原則：色環上相差15度之內的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預期。

并且于品牌色的色相冷暖性質一致，和諧統一。

對比色和互補色

24色相環上相距120度到180度之間的兩種顏色。品牌色為暖色系，暖色系會產生熱情、明亮、活潑溫暖等感覺，而互補色是冷色系，冷色系會中和過度的暖色情緒，從而令人心情從洋溢回歸至平靜。漸而平穩，安詳，天空之境之靜謐。所以我們也將紅色的對比色，以及黃色的互補色，來形成冷色調互補。輔助色紅色色相為H = 5，取對比色綠色，相應色相H為（H+120）；以及輔助色黃色的對比色藍色，H為215（H+180）。獲得以下兩個冷色調的輔助色：

校正輔助色

校正的原則一：色相差值不能超過15

近似色的選取，保證色相不超過15，保持統一的視覺體驗。

校正的原則二：盡量保持感官明度一致

可以從上圖看出，盡管保持了相同的飽和度和明度，色相不一致會導致在視覺上有不一樣的感官體驗。綠色的發光度比較亮，以及藍色就稍微偏暗一些。所以需要調整明度和飽和度，保持視覺感官一致性和相似的舒適程度。

中性色做輔助色

中性色作為輔助色，也是調和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。

3. 調色板

確定好主色和輔助色后，我們需要建立調色板來拓展不同場景下的顏色運用。既符合品牌傳遞，也需要通過不同顏色層級，來展示界面設計的功能性，進行信息傳遞，動作指引，交互反饋，或是強化和突顯界面元素。同時，也通過顏色層級的變化，對產品交互層面做出改變。

同色系的明度、純度取值

既能體現我們的品牌形象，也能保持頁面的統一性。我們通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。在色彩系統里，這種操作方式也叫做 Tints and shades 系統。tints 是指加入白色，減淡的意思；而 shade 是指加入黑色，加深的意思。

Tints and shades系統

為此，我們在 sketch 里根據 tint 和 shade 系統的算法，將算法可視化，在 sketch 中建立了這個系統，方便每個顏色都在統一的規則里形成衍生色。從而形成不同顏色的調色條。

依照上圖，我們可以發現：

• 品牌色值點以左的線段，飽和度S以S0/5遞減，明度B以 （100-B0）/5遞增；
• 品牌色值點以右的線段，飽和度S以（100-S0）/5遞增，明度B以B0/5遞減。

帶入我們的品牌色值HSB（20,100,100），可以得出我們想要的orange01（20,100,90），orange03（20,40,100），orange04（20,10,100）。

最后，結合 Ant Design2.0 中的計算工具校對，此 sketch 色板生成模版有效。

最終我們形成完整的調色板：

4. 色彩應用

在色彩使用上，依據不同場景，我們也從以下三個方面，定義了米莊基礎用色。

品牌色

品牌色是體現產品特性和傳播理念最直觀的視覺元素之一。

功能色

主要應用于消息通知、反饋提醒、表單校驗這類場景中的成功、出錯、失敗、提醒、鏈接等狀態。

中性色

關鍵內容的襯托和功能的引導，主要體現在導航框架、背景底色、描邊，或次級操作等。

sketch色板

5. 使用規范

色彩識別

遵守 WCAG 2.0 的標準，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。

層次結構

層次結構是指根據重要性級別來組織內容。顏色可以表達出一些內容相對與其他內容的重要性。

（參考校對工具：https://contrast-ratio.com/#%23454545-on-%23fff）

意義清晰

顏色可以用來表達屏幕中不同元素的含義。需注意使用中符合用戶認知心理預期，減少歧義的產生。

上線復盤

1. 命名

如何正確命名顏色？使用顏色屬性和數字組合來表示，方便修改和更換。

2. 替換

讓開發將線上的所有顏色都發一遍，然后畫出色塊，再對照目前調色板的顏色進行調整和修改。整體 app 更加輕量化以及溝通更順暢。

如何使用

作為一名現代社會中的設計師，我們的工作很多時候就是說服你的老板，你選擇的顏色是正確的。你可以準備一個40頁的 ppt 來準確的闡述計算邏輯。在這個陌生的數字化環境中，智能和科技讓一切都變得有可能，可預測，可驗證。

但是同時，也請大家保持對色彩的警惕。不要被工具所愚弄。我們能描述1700多萬種色彩，但這并不能代表什么。色彩的本質是什么？目前還有很多群落在沒有色彩定義環境中生存著。色彩之所以有意義，是因為我們賦予了它意義。

當下次，在眼睛離開電腦手機的時候，請花點時間留意你身邊的綠植，留意遠處云朵的色彩，留意旅途中海洋的顏色，留意清晨的露珠和晚霞落日。然后問問自己，你看到了什么？

△ 圖片來源：https://dribbble.com/google

附件資源

總結回顧大綱：

調色板下載

PS/AI：

• 下載鏈接：https://pan.baidu.com/s/1hqv4D_DDwDTln1OjO4Wuvw
• 提取碼：ce98

Material Theme Editor UI編輯器：https://material.io/tools/theme-editor/

色彩對比網站：https://contrast-ratio.com/