Bishwajit Ghose

css codes for color

Almost all the resources were collected from https://graphicdesign.stackexchange.com, which are hard to compile or navigate for busy creators. Here is a list of the functions I use on regular basis.

.foo {

  color: tint(#BADA55, 42%);

}

 

.bar {

  background-color: shade(#663399, 42%);

}

Opacity will lighten colors. Using transparency in itself is not generally a problem.

100% color @ 20% opacity = 20% color @ 100%opacity.

It’s 6 of one, half dozen of the other.

The difference is interaction.

A 20% tint over 100% (of the same) color means there’s 20% color in that area.

20% opacity over 100% (of the same) color means there’s 100% color in that area.