Less CSS - SPLessons

Chapter 17

Less Color

Less Color

This chapters covers about Less color definition functions, Less color channel functions, Less color operation, and Less color Blending function. We will also provide you an example illustrating how Less color functions work. Now let’s take a look at the following:

To manipulate the color in different ways and alter the useful color functions, Less supports some color functions.

Functions

The following are a few of Less Color Definition Functions.

Less Color Definition Functions Examples
rgb:
Used to create blurred color objects from decimal RGB(red, green and blue) values and also use standard HTML/CSS formats to define colors.
Framework:

  • red: An integer range from 0-255 or percentage range from 0-100%.
  • green: An integer range from 0-255 or percentage range from 0-100%.
  • blue: An integer range from 0-255 or percentage range from 0-100%.

Returns: color

rgb(105,95, 95)

Result: #695F5F

rgba:
Used to create a transparent color object from decimals RGBA(red, green, blue and alpha) values.
Framework:

  • red: An integer range from 0-255 or percentage range from 0-100%.
  • green: An integer range from 0-255 or percentage range from 0-100%.
  • blue: An integer range from 0-255 or percentage range from 0-100%.
  • alpha: An number 0-1 or percentage 0-100%.

Returns: color

rgba(105, 95, 95, 0.5)

Result: rgba(105, 95,95 0.5)

argb:
Used to create a hex representation of a color in #AARGGBB format, which is used in Internet Explorer, Android and .NET.
Framework: color
Returns: string
argb(rgba(90, 23, 148, 0.5))

Result: #805a1794

hsl:
Used to create a blurred color object from HSL(hue, saturation and lightness) values.
Framework:

  • hue: An integer range from 0-360 and represents degrees.
  • saturation: A percentage 0-100% or number 0-1.
  • lightness: A percentage 0-100% or number 0-1.

Returns: color

hsl(90, 100%, 50%)

Result: #80ff00

hsla:
Used to create a transparent color object from HSLA(hue, saturation, lightness and alpha) values.
Framework:

  • hue: An integer range from 0-360 and represents degrees.
  • saturation: A percentage range from 0-100% or number range from 0-1.
  • lightness: A percentage range from 0-100% or number range from 0-1.
  • alpha: A percentage range from 0-100% or number range from 0-1.

Returns: color

hsla(90, 100%, 50%, 0.5)

Result: rgba(128, 255, 0, 0.5)

hsv:
Used to create blurred color object from HSV(hue, saturation and value) values. This is the color space available in Photoshop.
Framework:

  • hue: An integer range from 0-360 and represents degrees.
  • saturation: A percentage range from 0-100% or number range from 0-1.
  • value: A percentage range from 0-100% or number range from 0-1.

Returns: color

hsv(90, 100%, 50%)

Result: #408000

hsva:
Used to create a transparent color object from HSVA(hue, saturation,value and alpha) values.
Framework:

  • hue: An integer range from 0-360 and represents degrees.
  • saturation: A percentage range from 0-100% or number range from 0-1.
  • value: A percentage range from 0-100% or number range from 0-1.
  • alpha: A percentage range from 0-100% or number range from 0-1.

Returns: color

hsva(90, 100%, 50%, 0.5)

Result: rgba(64, 128, 0, 0.5)

The following are some of the Less Color Channel Functions.

Less Color Channel Functions Examples
hue:
Used to extract the hue channel of a color object in HSL color space.
Framework: color
Returns: integer 0-360
hue(hsl(90, 100%, 50%))

Result: 90

saturation:
Used to extract the saturation channel of a color object in HSL color space.
Framework: color
Returns: percentage 0-100
saturation(hsl(75, 90% ,30%))

Result: 100%

lightness:
Used to extract the lightness channel of a color object in HSL color space.
Framework: color
Returns: percentage 0-100
lightness(hsl(75, 90%, 30%))

Result: 90%

hsvhue:
Used to extract the hue channel of color object in HSV color space.
Framework: color
Returns: integer 0-360
hsvhue(hsv(75, 90%, 30%))

Result: 75

hsvsaturation:
Used to extract the saturation channel of a color object in HSV color space.
Framework: color
Returns: percentage 0-100
hsvsaturation(hsv(85, 100%, 40%)

Result: 100%

hsvvalue:
Used to extract the value channel of a color object in HSV color space.
Framework: color
Returns: percentage 0-100
hsvvalue(hsv(85, 100%, 40%)

Result: 40%

red:
Used to extract the red channel of a color object.
Framework: color
Returns: float 0-255
red(rgb(40, 50, 60)

Result: 40

green:
Used to extract the green channel of a color object.
Framework: color
Returns: float 0-255
green(rgb(40, 50, 60)

Result: 50

blue:
Used to extract the blue channel of a color object.
Framework: color
Returns: float 0-255
blue(rgb(40, 50, 60)

Result: 60

alpha:
Used to extract the alpha channel of a color object.
Framework: color
Returns: float 0-1
alpha(rgba(40, 50, 60, 0.5))

Result: 0.5

luma:
Used to calculate the percentage brightness of a color object.
Framework: color
Returns: percentage 0-100%
luma(rgb(100, 200, 30))

Result: 44%

luminance:
Used to calculate the luma value without gamma corrections.
Framework: color
Returns: percentage 0-100%
luminance(rgb(100, 200, 30))

Result: 65%

Following table explains the Less Color Operation function.

Less Color Operation Functions Examples
saturate:
The saturation of a color in the HSL color space increases by an absolute amount.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

saturate(hsl(90, 80%, 50%), 20%)

Result:

#80ff00 // hsl(90, 100%,50%)

desaturate:
The saturation of a color in the HSL color space decrease by an absolute amount.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

desaturate(hsl(75, 90% ,30%), 20%)

Result:

#90cc33 // hsl(75, 70%, 50%)

lighten:
The lightness of a color in the HSL color space is increased by an absolute amount.
Framework:

  • color: color object.
  • amount: A percentage range between 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

lighten(hsl(90, 80%, 50%), 20%)

Result:

#b3f075 // hsl(90, 80%, 70%)

darken:
The lightness of a color in the HSL color space is decreased by an absolute amount.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

darken(hsl(90, 80%, 50%), 20%)

Result:

#4d8a0f // hsl(90, 80%, 30%)

fadein:
Used to increase the opacity or decrease the color transparency and make it more blur.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

fadein(hsla(90, 90%, 50%, 0.5), 10%)

Result:

rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout:
Used to decrease the opacity or increase the color transparency and make it less blur.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.
  • method: Optional, and is used to set the relative adjustments for current value.

Returns: color

fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Result:

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade:
Used to set the absolute transparency of a color and apply colors even after having an opacity value or not.
Framework:

  • color: color object.
  • amount: A percentage range from 0-100%.

Returns: color

fade(hsl(90, 90%, 50%), 10%)

Result:

rgba(128, 242, 13, 0.1) // hsla( 90, 90%, 50%, 0.1)

spin:
The angle of a color rotate in either direction.
Framework:

  • color: A color object.
  • amount: number of degrees used to rotate (+ or -).

Returns: color

spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)Result:#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)
mix:
The opacity included in the calculations by mixing two colors together in variable proportion.
Framework:

  • color1: Color object.
  • color2: Color object.
  • weight: It is optional, and by default the percentage balance point between the two colors is 50%.

Returns: color

mix(#ff0000, #0000ff, 50%)
mix(rgba(100, 0, 0, 1.0), rgba(0, 100, 0, 0.5), 50%)Result:#8000080
rgba(75, 25, 0, 0.75)
tint:
The color is mixed with white in variable proportion.
Framework:

  • color: Color object.
  • weight: It is optional, and by default the percentage balance point between the two colors is 50%.

Returns: color

no-alpha: tint(#007fff, 50%);
with-alpha:tint(rgba(00, 0, 255, 0.5), 50%);Result:no- alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);
shade:
The color is mixed with black in variable proportion.
Framework:

  • color: Color object.
  • weight: It is optional, and by default the percentage balance point between the two colors is 50%.

Returns: color

no-alpha: shade(#007fff, 50%);
with- alpha: shade(rgba(00, 0, 255,0.5), 50%);Result:no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);
greyscale:
In the HSL color space, the saturation from a color is removed.
Framework:

  • color: color object.

Returns: color

grayscale(hsl(90, 90%, 50%))

Result:

#808080 // hsl(90, 0%, 50%)

contrast:
Used to choose the colors, and provides the greatest contrast with another.
Framework:

  • color: Color object.
  • weight: It is optional, and by default the percentage balance point between the two colors is 50%.

Returns: color

no-alpha: shade(#007fff, 50%);
with- alpha: shade(rgba(00, 0, 255,0.5), 50%);Result:no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

The following table explains the Less Color Blending Functions.

Color Blending Functions Framework Returns
multiply:
Used to multiply colors. The corresponding RGB channel from each color are multiplied and then divided by 255, which results in the dark color.
color1: color object.
color2: color object.
color
screen:
Quite opposite to the function multiply, and results in brighter color.
color1: color object.
color2: color object.
color
overlay:
Both effects multiply and screen are combined, which makes light channels to lighter and dark channels to darker.
color1: A determinant color which make the result lighter or darker. it’s a base color object.
color2: A color object used to overlay.
color
softlight:
Quite similar to overlay, avoids pure black in pure black resulting and pure white in pure white resulting.
color1: color object used to softlight another color.
color2: color object used for soft lighten.
color
hardlight:
Quite similar to overlay, but the color roles are reversed.
color1: color object used to overlay.
color2: base color object, which determine the color to make the result darker or lighter.
color
difference:
On channel-by-channel basis, it is used to subtract the second from first color and the negative values are inverted, which subtract black and results no change, subtract white and results color inverse.
color1: color object act as minuend.
color2: color object act as subtrahend.
color
exclusion:
Quite similar to difference function, but works with a lower contrast.
color1: color object act as the minuend.
color2: color object act as subtrahend.
color
average:
On RGB basis, the average of two colors is calculated.
color1: color object.
color2: color object.
color
negation:
Quite opposite to the function difference.
color1: color object act as the minuend.
color2: color object act as subtrahend.
color

Example

Below example explains the Less Color functions in detail.
The below conceptual diagram represents the overall view about the below example like creating .html and .less files in node js folder and compiling .less to .css.
Create a simple HTML for color function file as shown below.

Less_color_functions.html

<div class="swatch start-color">Original</div>
<div class="swatch darken">Darken</div>
<div class="swatch lighten">Lighten</div>
<div class="swatch saturate">Saturate</div>
<div class="swatch desaturate">Desaturate</div>
<div class="swatch darken-saturate">Darken & Saturate</div>
<div class="swatch lighten-saturate">Lighten & Saturate</div>
<div class="swatch darken-desaturate">Darken & Desaturate</div>
<div class="swatch lighten-desaturate">Lighten & Desaturate</div>

Create a LESS file in the same Nodejs folder as shown below.

style.less

// Start Color
@start-color:                  #fe6700;
@lighten-percentage:           10%;
@darken-percentage:            10%;
@saturate-percentage:          15%;
@desaturate-percentage:        50%;
body {margin:0;
}
.swatch {
  background: @start-color;
  display: block;
  float:left;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin: 30px;
  border: solid 4px #fff;
  box-shadow: 0 0 9px rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
  font-family: courier;
}
.start-color {
  width:1000px; 
  float:none;
}
.darken {background: darken(@start-color, @darken-percentage)}
.lighten {background: lighten(@start-color, @lighten-percentage)}
.saturate {background: saturate(@start-color, @saturate-percentage)}
.desaturate {background: desaturate(@start-color, @desaturate-percentage)}
.darken-saturate {background: darken(saturate(@start-color, @saturate-percentage), @darken-percentage)}
.lighten-saturate {background: lighten(saturate(@start-color, @saturate-percentage), @lighten-percentage)}
.darken-desaturate {background: darken(desaturate(@start-color, @desaturate-percentage), @darken-percentage)}
.lighten-desaturate {background: lighten(desaturate(@start-color, @desaturate-percentage), @lighten-percentage)}

Compile the above .less code in command prompt by using the following command.

lessc style.less style.css

By compiling the above .less file, it automatically generates the CSS file as shown below.

style.css

body {
  margin: 0;
}
.swatch {
  background: #fe6700;
  display: block;
  float: left;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin: 30px;
  border: solid 4px #fff;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.4);
  color: #fff;
  text-align: center;
  font-family: courier;
}
.start-color {
  width: 1000px;
  float: none;
}
.darken {
  background: #cb5200;
}
.lighten {
  background: #ff8532;
}
.saturate {
  background: #fe6700;
}
.desaturate {
  background: #bf7340;
}
.darken-saturate {
  background: #cb5200;
}
.lighten-saturate {
  background: #ff8532;
}
.darken-desaturate {
  background: #985c33;
}
.lighten-desaturate {
  background: #cc8f65;
}

After making all the required changes, run the html file in a browser to get the following output.

Summary

  • Each color function is defined with their respective variable.
  • Each color function has its own framework, which returns with respect to that framework designed.

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the code before running the application.