使用Less color函式建立專業網站配色方案

世有因果知因求果發表於2015-04-22
函式網站

　　Less提供了很多實用的函式專門用於定義和操作色彩。本文將介紹如何使用這些函式來

幫助你控制色彩，創造合適的色彩搭配，並且保持網站的一致性和專業性

  • 　　color spinning

spin()函式允許我們調整一個基礎色以便達到色帶輪的任何一點。該函式非常有用，比如，當我們在

建立一個配色方案時就會很有用。你可能度過一些基礎的色彩理論，比如需要色彩搭配和諧：比如互補色理論，組合等。有很多實用的工具幫助你達成目標，比如adobe color cc(kuler)，利用該工具你就可以建立遵循上述理論的配色方案。但是我們如何實用Less建立自己的配色呢？

  • Complementary

我們將通過建立最簡單的色彩結構：complementary(互補方案）來開始我們的介紹。這種方案中強調有兩個在色帶輪相對180度方向的兩個色彩作為基色。

首先，我們需要定義一個base color作為引用second color的基點。選擇任何一個你喜歡的顏色，比如blue-ish #3bafda

使用spin函式旋轉180度，取得第二個顏色

@color-base       : #3bafdA;
@color-complement : spin(@color-base, 180);

這樣就生成兩個精確的，漂亮的色彩，他們互為補充。

  • Triadic

三元色方案是由三個顏色來組成的。我們通常通過對色輪分為三部分來取三色，調整spin函式的引數就可以達到目的。

// Triadic structure
@color-base        : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary  : spin(@color-base, (360 / 3));

這將形成下面的配色：

  • colors mixing

另外一種建立配色的方法是混合兩種基色形成新的顏色，這就好比我們在小學藝術課堂中學習到的：如果我們將紅色和黃色混合將形成一個橙色。使用Less，我們可以使用mix()函式達到同樣的目的。

div {
    color: mix(red, yellow);
}

上面的例子將生成#ff8000

注意：避免混合相同光譜(spectrum)的顏色，比如基色#3bafda這個顏色居於藍色光譜區域，你如果將該色和其對立的色彩混合將得到一個比較滿意的混合色，比如mediumvioletred,或者lightseagreen。

@color-base      : #3bafdA;
@color-primary   : mix(@color-base, mediumvioletred);
@color-secondary : mix(@color-base, lightseagreen);
@color-tertiary  : mix(@color-base, mintcream);

通過這個方法將得到和基色和諧共存的色彩搭配

  • Color Shades and Saturation

shade定義了一個顏色亮和暗的程度(light and dark)在web設計中，一個色彩的shade通常用於辨別元素的不同狀態。比如：一個button，當hover或者focus時，其顏色通常使用一個更亮或更暗的背景色。使用Less，我們可以使用darken(),lighten()函式輕易得到這個darker/lighter。

@color-base  : #3bafdA;
@color-hover : lighten(@color-primary, 10%); //#9c84c1
@color-focus : darken(@color-primary, 10%); //#684b94

另一方法，我們可以通過調整飽和度saturation而不是Lightness來實現類似代表不同狀態的功能。飽和度定義了一個色彩的深度;更大的飽和度則色彩更亮麗，更低的飽和度則更灰暗。

上面的例子中，我們通過saturate(),desaturate()函式來實現類似的功能：

@color-base    : #3bafdA;
@color-hover   : saturate(@color-primary, 10%);
@color-focus   : desaturate(@color-primary, 10%);
@color-disable : lightness(desaturate(@color-primary, 100%), 30%);

更進一步我們通過調整上述通過飽和度調整後形成的色彩的亮度直到達到我們的要求。

我們通過上述調整飽和度及亮度得到的基色變種色系將會給我們定製button style時省去大量時間，當我們調整base color時，其他的幾個顏色變種將自動變更。

  • Intelligent color output

Less允許我們的樣式更加聰明。例如，我們可以讓我們的樣式自己思考並且決定在特定清形下使用什麼顏色。假設我們在建立一個網頁的模板，這是衣蛾基礎的樣式button，我們計劃將來擴充為不同的顏色和樣式。我們如何控制顏色的輸出呢？我們一定不希望一個亮的文字色(color text)放在亮的背景色上，也不希望暗色的文字放到暗色背景上去。我們得確保文字和背景永遠保持足夠的對比度，這樣才便於閱讀，這裡contrast()函式將有了用武之處。

@body-bg: #000;
 
body {
    background-color: @body-bg;
    color: contrast(@body-bg);
}

在上面的例子中，我們通過contrast()函式設定color。這將確保text的color和背景的顏色有足夠的對比。如果背景為0,則前景返回fff,如果背景為fff，則前景就為0.如果你設定背景為一個其他的亮色，比如white,whitesmoke或者skyblue,那麼text color就將返回0

我們也可以對亮和暗的對比度來定製顏色。下例中，將返回999或者777以替代fff,000

@body-bg     : #f0f0f0;
@color-light : #999;
@color-dark  : #777;
 
body {
    background-color: @body-bg;
    color: contrast(@body-bg, @color-dark, @color-light);
}

 

相關文章