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.
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
[ga_res]
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
[ga_link_728]
That’s it. Hope you enjoy this small piece.