Color schemes and combinations

In CSS, color schemes and combinations can be achieved using a variety of properties and values. Here are some of the most common ways to apply color schemes and combinations in CSS:

1. Background Color: The `background-color` property sets the background color of an element. You can use any valid CSS color value, such as a named color (e.g. "red"), a hexadecimal color value (e.g. "#ff0000"), an RGB value (e.g. "rgb(255, 0, 0)"), or an HSL value (e.g. "hsl(0, 100%, 50%)").


body {
  background-color: #f1f1f1; /* light gray */

2. Text Color: The `color` property sets the text color of an element. You can use the same color values as with `background-color`.


h1 {
  color: blue;

3. Gradient Backgrounds: CSS gradients allow you to create a smooth transition between two or more colors. There are two types of gradients: linear and radial. Here's an example of a linear gradient:

div {
  background-image: linear-gradient(to bottom, #ff0000, #00ff00);

This creates a gradient that starts with red at the top and transitions to green at the bottom.

4. Color Functions: CSS also provides several functions that allow you to manipulate colors. For example, the `rgba()` function allows you to set a color with an alpha (opacity) value, while the `hsl()` function allows you to set a color using hue, saturation, and lightness values. Here's an example of using the `rgba()` function:

h2 {
  color: rgba(255, 0, 0, 0.5); /* semi-transparent red */

5. Color Palettes: Finally, CSS preprocessors like Sass and Less provide features for creating and using color palettes. For example, in Sass, you can create a color palette as follows:

$primary-color: #007bff; /* blue */
$secondary-color: #6c757d; /* gray */
$success-color: #28a745; /* green */

/* Usage: */
button {
  background-color: $primary-color;
  color: white;

a:hover {
  color: $secondary-color;

This creates variables for each color in the palette, which can then be used throughout your stylesheets.

When working with color schemes and combinations in CSS, it's important to consider the color contrast and accessibility of your designs, as well as the overall visual appeal. By understanding these concepts and techniques, you can create compelling and effective designs using color.

Was this page helpful?