編者按：配色弱福音！今天來一組超實(shí)用的配色神器，第一個(gè)不僅能直接幫你生成配色方案，還可以按照配色方案生成網(wǎng)頁Demo，絕對是懶人必備！除此之外還有在線的配色方案參考，漸變色方案和隨機(jī)色列表等，以后再也不愁沒有配色靈感了 >>>

貝尼：HTML5變得越來越強(qiáng)大之后，很多以前需要特意安裝一個(gè)軟件來實(shí)現(xiàn)的功能，現(xiàn)在只需要在網(wǎng)頁端就能夠?qū)崿F(xiàn)。這樣一來，無論你是Windows用戶或者M(jìn)acOS用戶，都能夠在同樣的體驗(yàn)下使用一個(gè)自己喜愛的工具，因?yàn)槟愕墓ぞ叨荚谠贫恕?/p>

決定設(shè)計(jì)好壞因素有很多，顏色就是其中一個(gè)相當(dāng)重要的元素。下面為大家介紹幾個(gè)最近收集的個(gè)人覺得挺有用的處理顏色的WebApp，它們中有些功能類似，但各有不同的亮點(diǎn)。

Paletton（配色工具）

這個(gè)工具是之前介紹過的Chrome插件ColorZilla中的一個(gè)外鏈功能。它的作用和Adobe Kuler類似（Adobe Kuler也有web app版本），可以用來為整個(gè)界面進(jìn)行配色。你設(shè)定一個(gè)基色，然后通過它的一些選項(xiàng)和微調(diào)參數(shù)生成一套配色方案。除了Kuler的一些相同功能外，它還有個(gè)比較有意思的地方，它可以模擬色弱看到的顏色以及不同顯示器參數(shù)下的顏色。另外還可以模擬一個(gè)按照這套配色方案生成的網(wǎng)頁demo。

之前的好文：《設(shè)計(jì)師專屬！有哪些強(qiáng)大好用、鮮為人知的Chrome插件？》

下圖是一個(gè)配色后網(wǎng)頁的大致模擬~

類似應(yīng)用：www.colorhexa.com（功能更簡單，界面更清新）

Webcolourdata（配色方案參考）

這個(gè)應(yīng)用很簡單，輸入你喜愛的網(wǎng)站地址，它就能獲取這個(gè)網(wǎng)站的配色方案。搜索欄下方成列了一些諸如Facebook、Google、Firefox等知名網(wǎng)站的配色方案。

UiGradients（美觀的漸變色）

這是一個(gè)托管在github上的開源項(xiàng)目。打開網(wǎng)站映入眼簾的就是一整個(gè)屏幕的雙色漸變，而且顏色相當(dāng)舒服。你可以通過左右切換來探索更多的搭配方案。細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)有一個(gè)按鈕能將所有這個(gè)應(yīng)用收集列表中的美麗漸變色全部顯示出來。同時(shí)你還能提交自己覺得出彩的漸變給他們。對于前端工程師來說，它還提供了一鍵獲取漸變色CSS代碼的功能。小而強(qiáng)大。

DraGGradients（漸變色處理）

這個(gè)應(yīng)用的界面和上面那款非常像，而且也都是處理漸變色的。不過區(qū)別在于這個(gè)應(yīng)用可以讓你自定義漸變，并且不止兩個(gè)顏色。右側(cè)的加號按鈕可以新增顏色，然后移動(dòng)畫面當(dāng)中的白色控制點(diǎn)然后移動(dòng)漸變色。

Colours（隨機(jī)顏色）

這個(gè)應(yīng)用功能性不是很大，主要是每次隨機(jī)羅列一套顏色，而且每個(gè)顏色上都標(biāo)了css中對應(yīng)的英語名字及Hex格式和Rgb格式的顏色碼。也許在你沒有靈感時(shí)，看看這個(gè)隨機(jī)的列表會(huì)有所啟發(fā)哦~另外，當(dāng)你點(diǎn)擊頂部色帶中某個(gè)顏色，那么頁面就會(huì)顯示所有這個(gè)顏色的不同明度亮度等的衍生色。

【靈感與色彩，你想要什么？】

想要靈感？
《設(shè)計(jì)師必備！10個(gè)包羅萬象的靈感發(fā)掘網(wǎng)站》

想要色彩靈感？
《配色神器！向大自然借點(diǎn)顏色的SIP COLOR》

想學(xué)色彩基礎(chǔ)功？
《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》

原文地址：jianshu
作者：貝尼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege