Color values and manipulation in SASS

Introduction

Colors make websites look nice and easy to understand. Using color values and changing them helps you create beautiful designs.

You want to set the background color of a button.

You need to make text lighter or darker for better reading.

You want to create a hover effect by changing a color slightly.

You want to use the same color but with different brightness in different parts.

You want to mix two colors to get a new shade.

Syntax

SASS

$color-name: #rrggbb;

// Manipulate colors
lighten($color, 20%)
darken($color, 15%)
rgba($color, 0.5)
mix($color1, $color2, 50%)

Colors can be written as hex codes like #ff0000 for red.

Functions like lighten() and darken() change brightness by a percentage.

Examples

Set a variable for a blue color and use it as a button background.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}

Make the button color lighter when hovered by 20%.

SASS

.button:hover {
  background-color: lighten($primary-color, 20%);
}

Use red color with 70% opacity for an alert background.

SASS

.alert {
  background-color: rgba(231, 76, 60, 0.7);
}

Mix blue and red equally to get a purple shade.

SASS

.mixed-color {
  background-color: mix(#3498db, #e74c3c, 50%);
}

Sample Program

This example shows a green button that becomes lighter when hovered. It also shows an alert box with semi-transparent red background and a box with a mix of green and blue colors.

SASS

@use 'sass:color';

$base-color: #2ecc71;

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

.alert {
  background-color: color.change(#e74c3c, $alpha: 0.6);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  max-width: 300px;
}

.mixed {
  background-color: color.mix(#2ecc71, #3498db, 40%);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  max-width: 300px;
}

Important Notes

Use @use 'sass:color'; to access color functions in modern Sass.

Percentages in lighten/darken control how much brighter or darker the color becomes.

RGBA lets you add transparency to colors, useful for overlays or subtle effects.

Summary

Colors in Sass can be set using hex codes or named variables.

You can change colors easily with functions like lighten(), darken(), rgba(), and mix().

Manipulating colors helps create interactive and visually appealing web designs.