配色方案,使用LESS color函數(shù)創(chuàng)建配色方案(2)

來源:站酷 作者:謝爾魚 學(xué)習(xí):5795人次

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

結(jié)果證明同樣是不錯的:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

混合色

創(chuàng)建配色方案的另一種方式是對兩種顏色進行混合,也許就像你上小學(xué)美術(shù)課時學(xué)到的那樣。例如,如果我們把紅色與黃色混合,我們會得到橙色。在LESS中,我們可以使用mix()函數(shù)實現(xiàn)同樣的效果:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

這個例子的輸出的是“#ff8000”——“橙色”的準確的十六進制顏色編碼:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

提示

避免混合頻譜相同的顏色。對于基準色#3bafdA——位于可見光譜藍色光的范圍之內(nèi),通過與一種對立的顏色進行混合我們將得到一種比較滿意的結(jié)果,比如說中紫羅蘭紅或者淺海綠色:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

這給了我們一個可愛的配色方案,所有生成的顏色由于繼承相同的色調(diào)#3bafdA而顯得非常和諧。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

假如你對色彩一無所知,你可以挑選一種你最喜歡的顏色,通過mix()函數(shù)與其他任何一種顏色進行混合,結(jié)果可能令你大吃一驚。

 

以下有一個采用混合色得到的結(jié)果進行手機原型設(shè)計的例子:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

 

顏色的色調(diào)和飽和度

讓我們研究一些其他的配色方法。

明暗度

明暗度定義了一種顏色明與暗的程度。在網(wǎng)頁設(shè)計中,明暗度一般用來區(qū)分元素的狀態(tài)。舉個例子,一個按鈕,可能在:hover時是較淺的顏色,在:focus時是較深的顏色。在LESS里,我們就可以分別使用函數(shù)darken()和lighten()使一種顏色深一點或者淺一點。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

結(jié)果是:

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!