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.