五款幫你在線搞定配色的Web App

0 評論 34133 瀏覽 16 收藏 5 分鐘

Nancy導讀:配色弱福音!今天來一組超實用的配色神器,第一個不僅能直接幫你生成配色方案,還可以按照配色方案生成網頁Demo,絕對是懶人必備!除此之外還有在線的配色方案參考,漸變色方案和隨機色列表等,以后再也不愁沒有配色靈感了 >>>

貝尼:HTML5變得越來越強大之后,很多以前需要特意安裝一個軟件來實現的功能,現在只需要在網頁端就能夠實現。這樣一來,無論你是Windows用戶或者MacOS用戶,都能夠在同樣的體驗下使用一個自己喜愛的工具,因為你的工具都在云端。

決定設計好壞因素有很多,顏色就是其中一個相當重要的元素。下面為大家介紹幾個最近收集的個人覺得挺有用的處理顏色的WebApp,它們中有些功能類似,但各有不同的亮點。

Paletton配色工具

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

之前的好文:《設計師專屬!有哪些強大好用、鮮為人知的Chrome插件?》

ps20150123 (1)

下圖是一個配色后網頁的大致模擬~

ps20150123 (2)

類似應用:www.colorhexa.com(功能更簡單,界面更清新)

Webcolourdata(配色方案參考)

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

ps20150123 (3)

UiGradients(美觀的漸變色

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

ps20150123 (4)

DraGGradients(漸變色處理)

這個應用的界面和上面那款非常像,而且也都是處理漸變色的。不過區別在于這個應用可以讓你自定義漸變,并且不止兩個顏色。右側的加號按鈕可以新增顏色,然后移動畫面當中的白色控制點然后移動漸變色。

ps20150123 (5)

Colours(隨機顏色)

這個應用功能性不是很大,主要是每次隨機羅列一套顏色,而且每個顏色上都標了css中對應的英語名字及Hex格式和Rgb格式的顏色碼。也許在你沒有靈感時,看看這個隨機的列表會有所啟發哦~另外,當你點擊頂部色帶中某個顏色,那么頁面就會顯示所有這個顏色的不同明度亮度等的衍生色。

ps20150123 (6)

作者:@cyRotel???來源:優設網

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!