CSS Background Color Palette

Color palette is a collection of color classes that are used to generate background colors for HTML elements. These prepared classes can help creating and customizing frontend templates easily and quickly.

This color palette includes solid, transparent and also gradient colors that are very easy to use. You just add color classes to HTML elements and done. You may like to combine them with other CSS properties like “opacity” or “position” to make modern, stylish layers to your themes. There is also have a class “.bg-reverse” to reverse directions of gradient colors.

 

 

 

License:

This product is free for both personal and commercial uses. If you like to share or distribute this product please include the link of this article at the place or web page where you are sharing or distributing this one, please DO NOT share our direct download links. If you want to share our articles on your site, you are free to copy excerpts but please DO NOT copy entire articles.

Please note, resources (like: images, videos, audios ...) are used for demonstration purpose only. Some resources may have third party licenses so please respect them in that case.

 

Projects are using this color palette CSS:

 

Change logs:

Oct 2018: First version.

 

 

Usage:

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at the top of page.
Include the “color-palette.css” into the HEAD section of your page:

<head>
  <link rel="stylesheet" href="color-palette.css">
</head>

 

Then, add one of color classes to the element you want to fill that color:

<div class="solid-red-500">Example</div>

 

Example gradient color usage:

<div class="bg-gradient-yg-h">Example</div>

Reverse gradient colors:

<div class="bg-gradient-yg-h bg-reverse">Example</div>

 

Color Palette:

 

I. Solid Colors:

Black and White:

bg-black
bg-white

 

Red:

bg-red-50
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
bg-red-a100
bg-red-a200
bg-red-a400
bg-red-a700

 

Pink:

bg-pink-50
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
bg-pink-a100
bg-pink-a200
bg-pink-a400
bg-pink-a700

 

Purple:

bg-purple-50
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
bg-purple-a100
bg-purple-a200
bg-purple-a400
bg-purple-a700

 

Deep Purple:

bg-deep-purple-50
bg-deep-purple-100
bg-deep-purple-200
bg-deep-purple-300
bg-deep-purple-400
bg-deep-purple-500
bg-deep-purple-600
bg-deep-purple-700
bg-deep-purple-800
bg-deep-purple-900
bg-deep-purple-a100
bg-deep-purple-a200
bg-deep-purple-a400
bg-deep-purple-a700

 

Indigo:

bg-indigo-50
bg-indigo-100
bg-indigo-200
bg-indigo-300
bg-indigo-400
bg-indigo-500
bg-indigo-600
bg-indigo-700
bg-indigo-800
bg-indigo-900
bg-indigo-a100
bg-indigo-a200
bg-indigo-a400
bg-indigo-a700

 

Blue:

bg-blue-50
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-blue-a100
bg-blue-a200
bg-blue-a400
bg-blue-a700

 

Light Blue:

bg-light-blue-50
bg-light-blue-100
bg-light-blue-200
bg-light-blue-300
bg-light-blue-400
bg-light-blue-500
bg-light-blue-600
bg-light-blue-700
bg-light-blue-800
bg-light-blue-900
bg-light-blue-a100
bg-light-blue-a200
bg-light-blue-a400
bg-light-blue-a700

 

Cyan:

bg-cyan-50
bg-cyan-100
bg-cyan-200
bg-cyan-300
bg-cyan-400
bg-cyan-500
bg-cyan-600
bg-cyan-700
bg-cyan-800
bg-cyan-900
bg-cyan-a100
bg-cyan-a200
bg-cyan-a400
bg-cyan-a700

 

Teal:

bg-teal-50
bg-teal-100
bg-teal-200
bg-teal-300
bg-teal-400
bg-teal-500
bg-teal-600
bg-teal-700
bg-teal-800
bg-teal-900
bg-teal-a100
bg-teal-a200
bg-teal-a400
bg-teal-a700

 

Green:

bg-green-50
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
bg-green-a100
bg-green-a200
bg-green-a400
bg-green-a700

 

Light Green:

bg-light-green-50
bg-light-green-100
bg-light-green-200
bg-light-green-300
bg-light-green-400
bg-light-green-500
bg-light-green-600
bg-light-green-700
bg-light-green-800
bg-light-green-900
bg-light-green-a100
bg-light-green-a200
bg-light-green-a400
bg-light-green-a700

 

Lime:

bg-lime-50
bg-lime-100
bg-lime-200
bg-lime-300
bg-lime-400
bg-lime-500
bg-lime-600
bg-lime-700
bg-lime-800
bg-lime-900
bg-lime-a100
bg-lime-a200
bg-lime-a400
bg-lime-a700

 

Yellow:

bg-yellow-50
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
bg-yellow-a100
bg-yellow-a200
bg-yellow-a400
bg-yellow-a700

 

Amber:

bg-amber-50
bg-amber-100
bg-amber-200
bg-amber-300
bg-amber-400
bg-amber-500
bg-amber-600
bg-amber-700
bg-amber-800
bg-amber-900
bg-amber-a100
bg-amber-a200
bg-amber-a400
bg-amber-a700

 

Orange:

bg-orange-50
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-orange-a100
bg-orange-a200
bg-orange-a400
bg-orange-a700

 

Deep Orange:

bg-deep-orange-50
bg-deep-orange-100
bg-deep-orange-200
bg-deep-orange-300
bg-deep-orange-400
bg-deep-orange-500
bg-deep-orange-600
bg-deep-orange-700
bg-deep-orange-800
bg-deep-orange-900
bg-deep-orange-a100
bg-deep-orange-a200
bg-deep-orange-a400
bg-deep-orange-a700

 

Brown:

bg-brown-50
bg-brown-100
bg-brown-200
bg-brown-300
bg-brown-400
bg-brown-500
bg-brown-600
bg-brown-700
bg-brown-800
bg-brown-900

 

Grey:

bg-grey-50
bg-grey-100
bg-grey-200
bg-grey-300
bg-grey-400
bg-grey-500
bg-grey-600
bg-grey-700
bg-grey-800
bg-grey-900

 

Blue Grey:

bg-blue-grey-50
bg-blue-grey-100
bg-blue-grey-200
bg-blue-grey-300
bg-blue-grey-400
bg-blue-grey-500
bg-blue-grey-600
bg-blue-grey-700
bg-blue-grey-800
bg-blue-grey-900

 

Solid colors

 

II. Transparent Colors:

bg-transparent-jade
bg-transparent-deepsea
bg-transparent-smoke
bg-transparent-grass
bg-transparent-black
bg-transparent-darknight
bg-transparent-red
bg-transparent-violetred
bg-transparent-green
bg-transparent-yellow
bg-transparent-orange
bg-transparent-coral
bg-transparent-wheat
bg-transparent-redwine
bg-transparent-mist

 

III. Gradient Colors:

Yellow – Green:

bg-gradient-yg-h
bg-gradient-yg-v
bg-gradient-yg-d

 

Green – Blue:

bg-gradient-gb-h
bg-gradient-gb-v
bg-gradient-gb-d

 

Blue – Purple:

bg-gradient-bp-h
bg-gradient-bp-v
bg-gradient-bp-d

 

Purple – Red:

bg-gradient-pr-h
bg-gradient-pr-v
bg-gradient-pr-d

 

Red – Orange:

bg-gradient-ro-h
bg-gradient-ro-v
bg-gradient-ro-d

 

Orange – Green:

bg-gradient-og-h
bg-gradient-og-v
bg-gradient-og-d

 

 

 

That’s it. Hope you enjoy this small piece.