Adapted from our book and video series,?Refactoring UI.
你有用過那些色表盤生成器嗎？當(dāng)你選擇一個(gè)初始顏色七问，調(diào)整選項(xiàng)之后焚辅，可能生成了5個(gè)完美的用音樂術(shù)語命名的色表盤作瞄，你就用這些開始設(shè)計(jì)了嗎箍镜？
這種選擇完美色彩體系的方法非常誘人华嘹，但是并沒有實(shí)際的作用慎恒，除非你想要你的頁面如下：
你真正需要的是什么萌丈？
你不能用色相來進(jìn)行設(shè)計(jì)。為了設(shè)計(jì)真實(shí)的項(xiàng)目揍很，你需要更多郎楼、更有體系的大量色彩。
你可以把色表盤體系分成三個(gè)類別窒悔。
灰色
文字呜袁、背景色、面板蛉迹、表單----基本界面上所有的東西都是灰色的傅寡。
你需要的灰色非常多--3、4種色度看著很多但是你可能需要比2號色度更黑一些或者比3號色度更淺一些
實(shí)際上，你需要8-10種色度（可能后面需要更多荐操。）如果不夠多的話芜抒，你可能糾結(jié)于用77號色度還是用88號色度；但是如果數(shù)量足夠多的話托启，你就不要妥協(xié)了宅倒。
真正的黑色看著特別不真實(shí)，所以從一個(gè)黑灰色開始并且用你自己的方式一點(diǎn)點(diǎn)增加白色進(jìn)去屯耸。
主色調(diào)
大部分設(shè)計(jì)需要1到2種顏色作為主色調(diào)拐迁。用來標(biāo)注指示性的元素等。這些顏色可以確定設(shè)計(jì)的整體外觀--比如你覺得Facebook是藍(lán)色的疗绣，盡管他大部分是灰色的线召。
跟灰色一樣，你需要多種（5-10）深淺不一的主色調(diào)色盤以供選擇多矮。
特別淺的色彩在如警示的情況下特別有用缓淹，而更深的顏色對文字特別有用。
強(qiáng)調(diào)色
在主色調(diào)之外塔逃，每個(gè)設(shè)計(jì)還需要一些強(qiáng)調(diào)色為了告訴用戶一些特別的信息讯壶。比如說，你可能想要需要一些奪人眼球的顏色湾盗，比如黃色伏蚊。或者用青色來高亮新特性格粪。
你也同樣需要一些顏色強(qiáng)調(diào)特別的狀態(tài)躏吊，比如用紅色去確認(rèn)破壞性的操作。
用黃色來展示警示性的信息
用綠色來高亮積極的趨勢
你需要復(fù)雜的色度帐萎，即使在UI設(shè)計(jì)中需要謹(jǐn)慎的使用颜阐。
如果你需要用顏色去區(qū)別或者分類相似的元素，比如圖標(biāo)中的線吓肋，日歷中的事件或者項(xiàng)目中的標(biāo)簽，你可能需要更多的強(qiáng)調(diào)色瑰艘。
在一個(gè)復(fù)雜的UI系統(tǒng)中是鬼，用10個(gè)不用的顏色和5-10個(gè)色度并不常見。
首先定義你自己的色度
當(dāng)你的色盤需要建立更淺或更深的顏色變化紫新，不要用CSS函數(shù)比如“淺色”或“深色”來建立色度均蜜。那會產(chǎn)生35個(gè)輕微不同的藍(lán)色并且看上去v 都一樣。所以芒率，你就需要為你的工作定義一系列固定的色度囤耳，這樣你就可以挑選了。
那怎樣把調(diào)色板放在一起的呢？
首先選擇基本的色彩充择。
首先選擇你想要創(chuàng)建的基本色彩----顏色是處于中間的德玫，這樣你可以在這個(gè)基礎(chǔ)上選擇更淺或更深的色度。
選擇色彩并沒有一種特別好的辦法椎麦，但對于主色調(diào)和強(qiáng)調(diào)色來說宰僧，好的經(jīng)驗(yàn)是選擇一個(gè)可以作為按鈕背景的顏色。
很難總結(jié)出規(guī)律观挎，比如從50%的亮度開始選擇--因?yàn)槊總€(gè)選擇顏色的行為都是不同的琴儿，都依賴于你自己的眼睛。
尋找邊界
下一步嘁捷，選擇最深的色度和最淺的色度造成。這也并沒有規(guī)律，但可以通過觀察上下文的規(guī)律來選擇雄嚣。
最深的色度一般用在文字晒屎，而最淺的色度可以用在元素的淺背景上。
一個(gè)簡單的提示部分就是一個(gè)很好的展示例子现诀，所以你可以從這里選擇這些色彩夷磕。
從一個(gè)滿足你基本色彩的色相開始，調(diào)整飽和度和明度直到你滿意為止仔沿。
填充空隙
一旦你找到你基本的坐桩、最深色的和最淺色的色度，你需要把色階補(bǔ)充完成封锉。
對大部分項(xiàng)目來說绵跷，每種顏色至少需要5種色度；如果你覺得太受約束成福，也可以選10種色度碾局。
9是個(gè)非常好用的數(shù)字，因?yàn)楹苋菀追指畈⑶姨畛渖A的時(shí)候也變得簡單奴艾。我們把最深色的色度叫做900净当，我們基本的色度叫做500，我們最淺色的色度叫做100.想要選擇色度700和300開始蕴潦，就在兩個(gè)色度中間選擇像啼，這樣可以看起來像兩邊色度的完美折中。
這種方式可以創(chuàng)建4個(gè)色階 (800,?600,?400,和200), 你就可以用比較接近的色度來填充了潭苞。
當(dāng)你的色表盤可以提供足夠的選擇從而展示你的設(shè)計(jì)思路不受限制忽冻，那就夠了。
灰色怎么樣此疹？
灰色的基礎(chǔ)色不是很重要僧诚，但是色階也是使用同樣的方法遮婶。從邊界入手，填充空隙知道你足夠用湖笨。
選擇你最深的顏色作為項(xiàng)目中文本顏色旗扑，選擇最淺的顏色比如細(xì)微的灰白色作為背景。
這不是科學(xué)
雖然很誘人赶么，但你不能單純依靠數(shù)字來搭建完美色表盤肩豁。上文描述的系統(tǒng)方法對于你的開始很有幫助，但是不要害怕當(dāng)你需要的時(shí)候作出小調(diào)整辫呻。一旦你真正開始在設(shè)計(jì)中使用顏色清钥，你想調(diào)整明度或色度，或者想要色度更亮更暗都是不可避免的放闺。相信你的眼睛祟昭，不要相信數(shù)字。
盡量避免頻繁增加新的色度怖侦。如果你不努力限制你的色板篡悟，你還是沒有最終建立你的色表盤。
