How to Create CSS Color Palettes

How to Create CSS Color Palettes

This article demonstrates how to create CSS color palettes. Whenever the user hovers over the palettes they enlarge. Included is usable code.

This article was first seen on and republished from csstutorial.io

Creating CSS Color Palettes
Creating CSS Color Palettes

HTML

The HTML code that we created below creates the rows and columns for the color palette layout. Additionally, each color palette is outlined below with an HTML div element that includes a class named “.color” The “.color” class is the basis of each color palette.

<div class="colors-container">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="colors box-1">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-2">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-3">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-4">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-5">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-6">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-7">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-8">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="colors box-9">
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-item"></div>
          <div class="color-buttons py-3">
            <div class="like-btn d-inline-block float-left">
              <i class="fas fa-heart"></i>
            </div>
            <div class="save-btn d-inline-block float-right">
              <i class="far fa-bookmark"></i> Save
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

The CSS styles below create the color themes for each palette. In addition to the color themes, the code below includes a hover selector that animates the cards with a CSS transform scale. The hover effect includes a transition cubic-bezier(0.01, 0.66, 0.99, 0.38) to smooth out the scale effect. This CSS transition timing function was created with a cubic-bezier generator.

Cubic Bezier Generator
Cubic Bezier Generator
body {
  font-family: "Poppins", sans-serif;
  background: #f1f1f1;
}

.colors {
  background: #fff;
  margin: 30px 0px;
  padding: 20px;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.1);
}

.colors:hover {
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
  transition: 0.5s cubic-bezier(0.01, 0.66, 0.99, 0.38);
}

.color-buttons .like-btn {
  color: #eb7979;
}
.color-buttons .save-btn {
  color: #7e7e7e;
}

.box-1 > div:nth-child(1) {
  background: #494ca2;
  height: 100px;
}
.box-1 > div:nth-child(2) {
  background: #8186d5;
  height: 70px;
}
.box-1 > div:nth-child(3) {
  background: #c6cbef;
  height: 60px;
}
.box-1 > div:nth-child(4) {
  background: #e3e7f1;
  height: 50px;
}

.box-2 > div:nth-child(1) {
  background: #faf562;
  height: 100px;
}
.box-2 > div:nth-child(2) {
  background: #f36a7b;
  height: 70px;
}
.box-2 > div:nth-child(3) {
  background: #b824a4;
  height: 60px;
}
.box-2 > div:nth-child(4) {
  background: #aaaaaa;
  height: 50px;
}

.box-3 > div:nth-child(1) {
  background: #b4e9e2;
  height: 100px;
}
.box-3 > div:nth-child(2) {
  background: #32dbc6;
  height: 70px;
}
.box-3 > div:nth-child(3) {
  background: #309286;
  height: 60px;
}
.box-3 > div:nth-child(4) {
  background: #ebefd0;
  height: 50px;
}

.box-4 > div:nth-child(1) {
  background: #cd4545;
  height: 100px;
}
.box-4 > div:nth-child(2) {
  background: #f16821;
  height: 70px;
}
.box-4 > div:nth-child(3) {
  background: #f3a333;
  height: 60px;
}
.box-4 > div:nth-child(4) {
  background: #fffe9a;
  height: 50px;
}

.box-5 > div:nth-child(1) {
  background: #c9f658;
  height: 100px;
}
.box-5 > div:nth-child(2) {
  background: #dbff3d;
  height: 70px;
}
.box-5 > div:nth-child(3) {
  background: #55968f;
  height: 60px;
}
.box-5 > div:nth-child(4) {
  background: #8acbbb;
  height: 50px;
}

.box-6 > div:nth-child(1) {
  background: #5c4d4d;
  height: 100px;
}
.box-6 > div:nth-child(2) {
  background: #915b4a;
  height: 70px;
}
.box-6 > div:nth-child(3) {
  background: #a96851;
  height: 60px;
}
.box-6 > div:nth-child(4) {
  background: #f2f1e7;
  height: 50px;
}

.box-7 > div:nth-child(1) {
  background: #ffaaaa;
  height: 100px;
}
.box-7 > div:nth-child(2) {
  background: #e37070;
  height: 70px;
}
.box-7 > div:nth-child(3) {
  background: #c7004c;
  height: 60px;
}
.box-7 > div:nth-child(4) {
  background: #8f1537;
  height: 50px;
}

.box-8 > div:nth-child(1) {
  background: #b5edba;
  height: 100px;
}
.box-8 > div:nth-child(2) {
  background: #f06f32;
  height: 70px;
}
.box-8 > div:nth-child(3) {
  background: #a44444;
  height: 60px;
}
.box-8 > div:nth-child(4) {
  background: #594129;
  height: 50px;
}

.box-9 > div:nth-child(1) {
  background: #00a8b5;
  height: 100px;
}
.box-9 > div:nth-child(2) {
  background: #774898;
  height: 70px;
}
.box-9 > div:nth-child(3) {
  background: #de4383;
  height: 60px;
}
.box-9 > div:nth-child(4) {
  background: #f3ae4b;
  height: 50px;
}

View and edit the live demo on codepen.io

Bootrap CSS Framework

This project uses the CSS bootstrap library for the layout of the CSS color palettes. For example, the CSS used from bootstrap is bootstrap’s column grid layout. We use the “.container”, “.row”, and “.col-$-$” layout to create the grid you see for the palettes. More information on how to use bootstrap’s grid system.

CDN – Content Delivery Network

The link below is the hosted bootstrap.min.css that this example uses. To include this library in your own project, include this code in the <head></head> of your HTML webpage. Down below you can see how the link is included for the browser to download.

Including this library from the Cloudflare CDN provides a benefit. Since this is hosted with a third party, the chance that a user has loaded a page with this library is extremely high. Whenever a user loads a page with this library already included, the library is cached within your browser. This reduces the number of resources your users will need to download when they visit your page.

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>

Font Awesome

To include the icons in this example use the Font Awesome CSS library below.

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>

Recommended Articles