Thursday, October 23, 2025
HomeLanguagesJavascriptLess.js Color Operation darken() Function

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 browsers to use CSS, it must be built and enhanced using a computer language known as the CSS pre-processor. It is also a CSS language extension that provides tools like variables, functions, mixins, and operations to help create dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the Color Operation darken() Function is used to reduce the lightness channel of a color object. It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

darken(value, amount);

 

Parameters:

  • value: This is the parameter that is compulsory for the darken function. It takes values in hex codes, RGB values, HSL values, and HSV values.
  • amount: This parameter is also compulsory and this parameter is used to specify the amount of light you want to reduce.

Please refer to the Less.js Installation article for a detailed description.

Example 1: The code below demonstrates the usage and implementation of the Color Channel darken() function.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        type="text/css" href="style.css" />
</head>
  
<body>
    <h1 style="color:green;">
        neveropen
    </h1>
      
    <h3>Less.js Color Operation darken() Function</h3>
      
    <div class="box">
        <div class="container1">
            <p class="text">
                Base Color<br>hsl(60, 50%, 52%)
            </p>
        </div>
        <div class="container2">
            <p class="text">
                Darkened Color<br>hsl(60, 50%, 32%)
            </p>
        </div>
    </div>
</body>
  
</html>


styles.less




@body-bg-color: #eeeeee;
@text-color: hsl(250, 90%, 19%);
@container-bg: hsl(60, 50%, 52%);
@color: darken(@container-bg, 20%);
  
body {
    background: @body-bg-color;
}
  
.box {
    display: flex;
}
  
.container1 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: @container-bg;
    margin-right: 2rem;
}
  
.container2 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: @color;
}
  
.text {
    color: @text-color;
}


Syntax: To compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css




body {
    background: #eeeeee;
}
  
.box {
    display: flex;
}
  
.container1 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: hsl(60, 50%, 52%);
    margin-right: 2rem;
}
  
.container2 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: hsl(60, 50%, 32%);
}
  
.text {
    color: hsl(250, 90%, 19%);
}


Output:

 

Example 2: The code below demonstrates the usage and implementation of the Color Channel darken() function with the if and boolean logical functions.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        type="text/css" href="style.css" />
</head>
  
<body>
    <h1 style="color:green;">
        neveropen
    </h1>
      
    <h3>Less.js Color Operation darken() Function</h3>
      
    <div class="box">
        <div class="container1">
            <p class="text">
                Base Color<br>#475cc2
            </p>
        </div>
          
        <div class="container2">
            <p class="text">
                Darkened Color<br>#29377a
            </p>
        </div>
    </div>
</body>
  
</html>


styles.less




@body-bg-color: #eeeeee;
@text-color: #d8db95;
@container-bg: #475cc2;
@color: darken(@container-bg, 20%);
@cond: boolean(lightness(@color) < 60%);
  
body {
    background: @body-bg-color;
}
  
.box {
    display: flex;
  
}
  
.container1 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: if(@cond, @container-bg, @color);
    margin-right: 2rem;
}
  
.container2 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: if(@cond, @color, @container-bg);
}
  
.text {
    color: @text-color;
}


Syntax: To compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css




body {
    background: #eeeeee;
}
  
.box {
    display: flex;
}
  
.container1 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: #475cc2;
    margin-right: 2rem;
}
  
.container2 {
    height: 100px;
    width: 150px;
    padding: 20px;
    background-color: #29377a;
}
  
.text {
    color: #d8db95;
}


Output:

 

Reference: https://lesscss.org/functions/#color-operations-darken

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32361 POSTS0 COMMENTS
Milvus
88 POSTS0 COMMENTS
Nango Kala
6728 POSTS0 COMMENTS
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
6801 POSTS0 COMMENTS