Lighten and darken functions in SASS

Introduction

Lighten and darken functions help you make colors lighter or darker easily. This is useful to create different shades of the same color for your website design.

When you want to create a hover effect that changes the button color slightly.

When you need a lighter background color based on a main color.

When you want to make text color darker for better readability on a light background.

When designing a color palette with consistent shades for your site.

When adjusting colors to improve contrast for accessibility.

Syntax

SASS

lighten($color, $amount)
darken($color, $amount)

$color is the base color you want to change.

$amount is how much you want to lighten or darken, usually in percentages (e.g., 20%).

Examples

This makes the blue color 20% lighter.

SASS

$light-blue: lighten(#007BFF, 20%);

This makes the red color 15% darker.

SASS

$dark-red: darken(#FF0000, 15%);

Button background will be a lighter green than the base color.

SASS

button {
  background-color: lighten(#28a745, 10%);
}

Paragraph text will be much darker gray for better readability.

SASS

p {
  color: darken(#333333, 30%);
}

Sample Program

This code creates a button with a blue background that is lighter than the base color. When you hover over the button, the background becomes darker. This gives a nice visual effect showing interaction.

SASS

@use 'sass:color';

$base-color: #3498db;

.button {
  background-color: color.lighten($base-color, 20%);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: color.darken($base-color, 15%);
}

Important Notes

Always use percentages for the amount to control how much lighter or darker the color becomes.

Lighten and darken work best with colors in hex, rgb, or named color formats.

Use these functions to keep your color scheme consistent and easy to adjust.

Summary

Lighten and darken functions adjust colors by making them lighter or darker.

They take a color and a percentage amount as inputs.

Use them to create hover effects, improve readability, and build color palettes.