flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Colors


Introduction

CSS Framework has 18 color schemes, 18 hover color schemes and a class for transparency.
You can also use the 29 color themes included.
There are also 7 border colors, 7 border hover colors, 8 text colors and 8 text hover colors.


Basic and hover colors

Click on the Class name to copy it.

Colors

c-black
c-white
c-gray
c-blue
c-red
c-green
c-yellow
c-orange
c-brown
c-purple
c-pink
c-violet
c-teal
c-olive
c-pale-blue
c-pale-green
c-pale-red
c-pale-yellow
c-transparent

Hover

h-black
h-white
h-gray
h-blue
h-red
h-green
h-yellow
h-orange
h-brown
h-purple
h-pink
h-violet
h-teal
h-olive
h-pale-blue
h-pale-green
h-pale-red
h-pale-yellow

Example code:

<div class="container c-blue">
  <p class="lorum-sm"></p>
</div>

<button class="button c-black h-pink">Button</button>

Text colors and text hover colors

Click on the Class name to copy it.

Text

text-c-whiteText Color

text-c-blackText Color

text-c-grayText Color

text-c-blueText Color

text-c-redText Color

text-c-greenText Color

text-c-yellowText Color

Hover

text-h-whiteHover Color

text-h-blackHover Color

text-h-grayHover Color

text-h-blueHover Color

text-h-redHover Color

text-h-greenHover Color

text-h-yellowHover Color


Example code:

<div class="container">
	<p class="text-c-green lorum-sm"></p>
</div>

<a class="text-c-red text-h-blue" href="#">Link</a>

Border colors and border hover colors

Click on the Class name to copy it.

Border colors

border border-c-black

border border-c-white

border border-c-blue

border border-c-gray

border border-c-green

border border-c-red

border border-c-yellow

Hover

border border-h-black

border border-h-white

border border-h-blue

border border-h-gray

border border-h-green

border border-h-red

border border-h-yellow


Example code:

<div class="container margin-bottom border border-c-gray border-thick">
  <p>border border-c-gray</p>
</div>

<div class="container margin-bottom border border-h-yellow border-thick">
  <p>border border-h-yellow</p>
</div>

Color Themes

Example code:

<head>
  ...
  <link rel="stylesheet" href="color-themes/airy-blue.css" />
  ...
</head>
<body>
  ...
  <button class="button color-theme-d5 color-hover-theme">Color Button</button>
  ...
</body>


© Copyright by Web Henkie
All right reserved
Webmaster