Open In App

Less.js Color Operation darken() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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;">
        GeeksforGeeks
    </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;">
        GeeksforGeeks
    </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



Last Updated : 06 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads