Less.js Misc color() Function
Last Updated :
28 Apr, 2025
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.
In this article, we are going to discuss the Misc color() function, whose function is to transform a string value into a color object. This function returns the color object value and this can only take hex color code, not HSL or RGB values.
Syntax:
color("string")
Parameters:
- string: This is the only compulsory parameter for this function. This parameter takes the string value of the name of the color mainly a hex color code.
Please refer to the Compile LESS code into CSS code. article for the detailed description.
Example 1: The code below demonstrates the usage and implementation of the Misc color() function along with if and boolean functions.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js Misc color() Function</h3>
<div class="c1">
<p>boolean(iscolor("#21ff7a"))
<br>TRUE
</p>
</div>
</body>
</html>
style.less:
CSS
@body-bg-color: #eeeeee;
@str: "#21ff7a";
@color1: color(@str);
@color2: #381508;
@cond: boolean(iscolor(@color1));
body {
background-color: @body-bg-color;
}
.c1 {
width: 500px;
height: 250px;
background-color: if(@cond, @color1, @color2);
margin: 1rem;
}
p {
color: if(@cond, @color2, @color1);
font-size: 1.5rem;
padding: 5rem 0 0 4.5rem;
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
style.css: The compiled CSS file comes to be:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 500px;
height: 250px;
background-color: #21ff7a;
margin: 1rem;
}
p {
color: #381508;
font-size: 1.5rem;
padding: 5rem 0 0 4.5rem;
}
Output:
Example 2: The code below demonstrates the usage and implementation of the Misc color() function along with using saturate color operation functions with if and boolean functions.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js Misc color() Function</h3>
<div class="c1">
<p>saturate(#80e619, 50%)
<br>boolean(iscolor("#80ff00"))
<br>TRUE
</p>
</div>
</body>
</html>
style.less:
CSS
@body-bg-color: #eeeeee;
@str: "#80e619";
@color1: color(@str);
@color2: #381508;
@color3: saturate(@color1, 50%);
@cond: boolean(iscolor(@color3));
body {
background-color: @body-bg-color;
}
.c1 {
width: 500px;
height: 250px;
background-color: if(@cond, @color3, @color2);
margin: 1rem;
}
p {
color: if(@cond, @color2, @color1);
font-size: 1.5rem;
padding: 5rem 0 0 4.5rem;
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
style.css: The compiled CSS file comes to be:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 500px;
height: 250px;
background-color: #80ff00;
margin: 1rem;
}
p {
color: #381508;
font-size: 1.5rem;
padding: 5rem 0 0 4.5rem;
}
Output:
Reference: https://lesscss.org/functions/#misc-functions-color
Similar Reads
Less.js Misc convert() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has
4 min read
Less.js Misc Functions Less.js is a CSS preprocessor which basically means that it provides some additional features to the traditional CSS which helps us to write CSS code more efficiently. All the Misc functions are explained below. In this article, we are going to learn about the Misc or Miscellaneous functions that ar
4 min read
Less.js Misc default() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and proc
3 min read
Less.js Math cos() Function Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The cos() function is a Math Function in Less.js which is used to find out the cosine value of the argument provided and returns the output. In this articl
2 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 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