Less.js Color Operation contrast() Function
Last Updated :
11 Oct, 2022
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">GeeksforGeeks</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>
@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">GeeksforGeeks</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>
@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Â
Similar Reads
Less.js Color Operation desaturate() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more beneficial because it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. The CSS pre-processor i
3 min read
Less.js Color Operation fade() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more advantageous. LESS is adaptable enough to function in a variety of browsers. A computer language called
3 min read
Less.js Color Operation Functions
Less (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and gives it superpowers. Color operation functions are built in Less.js to perform various operations such as saturation, de-saturation, lighten, darken, etc on a color object and return th
8 min read
Less.js Color Operation fadeout() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pr
3 min read
Less.js Color Operation darken() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is more advantageous because CSS employs a dynamic style sheet language. Several different browsers can use LESS because of its flexibility. In order for web br
3 min read
Less.js Color Operation fadein() Function
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
3 min read
Less.js Color Operation mix() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use CSS,
3 min read
Less.js Color Operation tint() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is better since it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. CSS must be created and developed
3 min read
Less.js Color Operation spin() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is better since it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. CSS is created and improved using
3 min read
Less.js Color Operation shade() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. Web browsers can only use CSS if it i
3 min read