配色方案,使用LESS color函數(shù)創(chuàng)建配色方案(2)
結(jié)果證明同樣是不錯(cuò)的:
混合色
創(chuàng)建配色方案的另一種方式是對(duì)兩種顏色進(jìn)行混合,也許就像你上小學(xué)美術(shù)課時(shí)學(xué)到的那樣。例如,如果我們把紅色與黃色混合,我們會(huì)得到橙色。在LESS中,我們可以使用mix()函數(shù)實(shí)現(xiàn)同樣的效果:
這個(gè)例子的輸出的是“#ff8000”——“橙色”的準(zhǔn)確的十六進(jìn)制顏色編碼:
提示
避免混合頻譜相同的顏色。對(duì)于基準(zhǔn)色#3bafdA——位于可見(jiàn)光譜藍(lán)色光的范圍之內(nèi),通過(guò)與一種對(duì)立的顏色進(jìn)行混合我們將得到一種比較滿意的結(jié)果,比如說(shuō)中紫羅蘭紅或者淺海綠色:
這給了我們一個(gè)可愛(ài)的配色方案,所有生成的顏色由于繼承相同的色調(diào)#3bafdA而顯得非常和諧。
假如你對(duì)色彩一無(wú)所知,你可以挑選一種你最喜歡的顏色,通過(guò)mix()函數(shù)與其他任何一種顏色進(jìn)行混合,結(jié)果可能令你大吃一驚。
以下有一個(gè)采用混合色得到的結(jié)果進(jìn)行手機(jī)原型設(shè)計(jì)的例子:
顏色的色調(diào)和飽和度
讓我們研究一些其他的配色方法。
明暗度
明暗度定義了一種顏色明與暗的程度。在網(wǎng)頁(yè)設(shè)計(jì)中,明暗度一般用來(lái)區(qū)分元素的狀態(tài)。舉個(gè)例子,一個(gè)按鈕,可能在:hover時(shí)是較淺的顏色,在:focus時(shí)是較深的顏色。在LESS里,我們就可以分別使用函數(shù)darken()和lighten()使一種顏色深一點(diǎn)或者淺一點(diǎn)。
結(jié)果是:
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps基礎(chǔ)教程
- 配色方案
- 創(chuàng)建
- 謝爾魚
- 函數(shù)
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- Photoshop初級(jí)教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法