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

前言：用LESS CSS框架進(jìn)行編碼會(huì)簡(jiǎn)化代碼結(jié)構(gòu)，提高我們的工作效率，但是試驗(yàn)后你會(huì)發(fā)現(xiàn)，默認(rèn)情況下，LESS在Firefox中能被正確編譯，實(shí)現(xiàn)效果，但I(xiàn)E和Chrome是無法解析LESS代碼的，必須對(duì)瀏覽器進(jìn)行一些設(shè)置才行。如果希望對(duì)LESS有一個(gè)最基礎(chǔ)的了解，IBM 對(duì)LESS CSS框架的簡(jiǎn)介會(huì)幫到你https://img.lvups.com/d/file/bigpic/2022/12/26/12lwhvqdaas

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

LESS提供了一些函數(shù)，使定義和操作顏色變得超級(jí)簡(jiǎn)單。在本教程中，我們將使用其中的一些函數(shù)幫助你控制顏色，更好地配色并保持其組織性。

色輪

首先是spin()函數(shù)，它可以讓我們?cè)谏喩现付ㄒ环N顏色。這個(gè)函數(shù)是非常有用的，比如說，在進(jìn)行配色的時(shí)候。你可能已經(jīng)看過一些常見的顏色結(jié)構(gòu)，以一種和諧的方式進(jìn)行組合，比如說互補(bǔ)色，三元色，混合色。使用一些工具，像Adobe Color CC(原名Kuler)，你可以遵循這些結(jié)構(gòu)快速的生成配色方案。但是如何使用LESS制定我們自己的配色方案呢？

互補(bǔ)色

我們將以生成最簡(jiǎn)單地色彩結(jié)構(gòu)——互補(bǔ)色開始。這種互補(bǔ)的顏色正好在色輪相反的位置。

首先，我們定義一種基準(zhǔn)色，然后參照基準(zhǔn)色定義第二種顏色。挑選一種你最喜歡的，或者是任意一種突然浮現(xiàn)在你腦海里的顏色。這里我們挑選了一種青藍(lán)色，#3bafdA，作為實(shí)例：

由于想要在色輪上得到基準(zhǔn)色的補(bǔ)色，我們將度數(shù)值設(shè)為180。

這讓我們得到兩個(gè)精確、可愛的顏色，它們是互補(bǔ)的。

以下是將這些顏色應(yīng)用到網(wǎng)頁原型設(shè)計(jì)中的一個(gè)例子：

三元色

我們可以進(jìn)一步探討顏色模型并且創(chuàng)建一個(gè)三元色結(jié)構(gòu)。“三元”，顧名思義，是由三種顏色組成。因此，我們將色輪分成三部分，并且用函數(shù)spin()來設(shè)置旋轉(zhuǎn)的度數(shù)：