對(duì)設(shè)計(jì)(和色彩有關(guān)的如叼，平面設(shè)計(jì)、UI設(shè)計(jì)穷劈、服裝設(shè)計(jì)笼恰、室內(nèi)設(shè)計(jì)、web網(wǎng)頁(yè)設(shè)計(jì)……)很感興趣的小白們歇终，會(huì)不會(huì)遇到這樣或那樣的困擾：
- 色殘黨社证，配色怎么配，怎么不理想(╯﹏╰)
- 配色理論看的頭暈评凝，總是學(xué)不會(huì) (╯﹏╰)
- 我盡量發(fā)揮自己的創(chuàng)意追葡，但是配色不是太花哨就是太單調(diào)很難符合情景 (╯﹏╰)
- boss 和客戶總是說(shuō)我的設(shè)計(jì)主題表達(dá)不突出 (╯﹏╰)
……
惆悵，(╯﹏╰)
藍(lán)瘦，(╯﹏╰)
香菇宜肉，(╯﹏╰)
but, 熱愛(ài)設(shè)計(jì)的我們匀钧，怎么能說(shuō)被打敗就被打敗，今天題主就做一些學(xué)習(xí)分享谬返！
- Step1.顏色屬性介紹
色相
色相即每種顏色的相貌之斯、名稱，如紅遣铝、橘紅佑刷、翠綠、湖藍(lán)等酿炸，色相是區(qū)分色彩的主要依據(jù)项乒，是色彩的最大特征。
明度
明度即色彩的明暗差別梁沧，也即色彩差別檀何，色彩的明度包括連個(gè)方面：一是指某一色相的深淺變化，如淡紅廷支、紅色频鉴、深紅，這些都是紅色恋拍，但是一種比一種深垛孔，二是指不同色相間存在的明度變化，如六標(biāo)準(zhǔn)色中黃色最淺施敢，紫色最深周荐，橙和綠、紅和藍(lán)處于相近的明度之間僵娃。
純度
純度即各種色彩中包含的單種標(biāo)準(zhǔn)色成分的多少概作。純的色色感強(qiáng)，即色度強(qiáng)默怨，所以純度也是色彩感強(qiáng)弱的標(biāo)志讯榕。不同色相所能達(dá)到的純度是不同的，其中紅色的純度最高匙睹，綠色的純度相對(duì)低一些愚屁，其余色相居中，同時(shí)明度也不相同痕檬。
- Step2.簡(jiǎn)單介紹顏色搭配原理
1.采用補(bǔ)色（180°）霎槐、對(duì)比色（120°）產(chǎn)生視覺(jué)碰撞效果；
2.采用中度色（90°）梦谜、類(lèi)似色（60°）丘跌、相近色（30°）袭景、同色（0°）去規(guī)劃整體主題色或者過(guò)度局部效果；
- Step3.利器在手碍岔，天下我有
了解了Step1浴讯、Step2后朵夏，小白們(including me)對(duì)配色的整體概念應(yīng)該有了初步的了解蔼啦。下面就是借助工具的時(shí)候了！
1.取色器
剛開(kāi)始學(xué)H5的時(shí)候老師推薦的小demo仰猖，百度即可下載捏肢。當(dāng)老師布置網(wǎng)頁(yè)設(shè)計(jì)、H5的作業(yè)時(shí)饥侵，大腦色彩感一片空白就先自己去查找一些色彩搭配比較好的案例鸵赫，再用取色器，去采集案例中的主要顏色躏升，cope到自己的作業(yè)中去辩棒。
在開(kāi)發(fā)里，一些前端開(kāi)發(fā)工程師也會(huì)這個(gè)demo確切地采集UI設(shè)計(jì)師設(shè)計(jì)圖的色彩膨疏，為了使web界面真實(shí)地還原UI的設(shè)計(jì)效果一睁。
但是，取色器的功能還是方便大家為了學(xué)習(xí)和模仿佃却，還不能給予小白們一個(gè)很好的配色概念者吁。
2.在線配色器
網(wǎng)址： www.peise.net/tools/web
工具界面如下：
①號(hào)區(qū)域是根據(jù)step2里的理論設(shè)計(jì)搭配模式；
③號(hào)區(qū)域是色彩采集區(qū)域饲帅；
④號(hào)區(qū)域是設(shè)置③號(hào)區(qū)域色彩顯示模式复凳；
②號(hào)區(qū)域是根據(jù)③號(hào)的顏色和①號(hào)的模式設(shè)置顯示的顏色搭配；
⑤號(hào)區(qū)域是顯示配色效果包含三種模式(基本模式灶泵、高明度網(wǎng)頁(yè)演示育八、低明度網(wǎng)頁(yè)演示)；
右下角還有這款工具的所屬網(wǎng)站鏈接赦邻；點(diǎn)擊即可跳轉(zhuǎn)到主頁(yè)配色網(wǎng)单鹿。
3.配色網(wǎng)(http://www.peise.net/)
配色網(wǎng)是交流色彩的專(zhuān)業(yè)網(wǎng)站,致力于設(shè)計(jì),網(wǎng)頁(yè),家居,時(shí)尚,服飾等方面色彩理論的學(xué)習(xí)和提高,并提供大量?jī)?yōu)秀配色方案,為色彩構(gòu)成學(xué)習(xí)者提供免費(fèi)資料。(來(lái)源此網(wǎng)站介紹)
界面隨簡(jiǎn)單深纲，但是功能很強(qiáng)大仲锄，有各種主題的配色方案，有各種配色學(xué)習(xí)資源下載分享湃鹊，還為用戶提供了交流論壇儒喊。
還有！Ｐ疽濉哈垢！之前介紹的工具利器都能在主頁(yè)找到鏈接(o)/~
4.站長(zhǎng)之家>站長(zhǎng)工具>在線調(diào)色板
網(wǎng)址: http://tool.chinaz.com/Tools/onlinecolor.aspx
界面如下：
同樣支持各種功能模式切換。
以上就是最近的學(xué)習(xí)分享扛拨，如有不對(duì)或者疏漏的地方耘分，歡迎大家給予修正意見(jiàn)，期待和大家的學(xué)習(xí)交流绑警，謝謝Ｇ筇！计盒！
文章step1渴频、step2配色原理借鑒：PS配色速成指導(dǎo) www.fevte.com/tutorial-13906-1.html
