Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that web browsers can use it, a computer language known as the CSS pre-processor is used. In addition, it is a CSS language extension that provides tools like variables, functions, mixins, and operations to help with the development of dynamic CSS while preserving backward compatibility.
In this article, we are going to discuss the Color Operation contrast() function, whose function is to calculate the luma values of the color object given and then assign a dark or light color accordingly. For example, for deep purple, the contrasting color will be lighter and for light yellow, the contrasting color is deeper. So this function takes hex value, RGB value, HSL or HSV value and it returns a value of the contrasting color object. It also takes the dark and light colors which will be used but it is optional.
Syntax:
contrast(color, dark, light, threshold)
Parameters:
- color: This is the first parameter and it is compulsory, it can be a hex value, RGB value, HSL, or HSV value.
- dark(optional): This parameter signifies the dark color, it is black by default.
- light(optional): This parameter signifies the light color, it is white by default.
- threshold(optional): This signifies the amount of intensity of the contrasting color. This parameter takes a value from 0-100% range.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Color Operation contrast() function.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js Color Operation contrast() Function</b></h3> <div class="c1"> <p>(base)#6f009f<br>(Contrast color)<br>rgb(253, 255, 146)</p> </div> </body> </html> |
styles.less
@body-bg-color: #eeeeee; @dark: hsl(25, 71%, 8%); @light: rgb(253, 255, 146); @color: #6f009f; body { background-color: @body-bg-color; } .c1 { width: 250px; height: 150px; margin: 1rem; background-color: @color; } p { padding: 50px 0px 0px 45px; color: contrast(@color, @dark, @light, 80%); } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc styles.less styles.css
style.css
body { background-color: #eeeeee; } .c1 { width: 250px; height: 150px; margin: 1rem; background-color: #6f009f; } p { padding: 50px 0px 0px 45px; color: #fdff92; } |
Output:
Example 2: The code below demonstrates the usage and implementation of the Color Operation contrast() function with the if() and boolean logical functions and the iscolor() type function.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js Color Operation contrast() Function</b></h3> <div class="c1"> <p>(base)#8cff45<br>(Contrast color)<br>hsl(25, 71%, 8%)</p> </div> </body> </html> |
styles.less
@body-bg-color: #eeeeee; @dark: hsl(25, 71%, 8%); @light: rgb(253, 255, 146); @color: #8cff45; @ccolor: contrast(@color, @dark, @light, 70%); @cond1: boolean(iscolor(@ccolor)); body { background-color: @body-bg-color; } .c1 { width: 250px; height: 150px; margin: 1rem; background-color: @color; } p { padding: 50px 0px 0px 45px; color: if(@cond1, @ccolor, @color); } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc styles.less style.css
style.css
body { background-color: #eeeeee; } .c1 { width: 250px; height: 150px; margin: 1rem; background-color: #8cff45; } p { padding: 50px 0px 0px 45px; color: hsl(25, 71%, 8%); } |
Output:
Reference: https://lesscss.org/functions/#color-operations-contrast
