stylecow-plugin-color
v5.0.0
Published
Stylecow plugin to add support for CSS Color Module Level 4
Downloads
33
Readme
stylecow plugin color
Stylecow plugin to add support for CSS Color Module Level 4
- Hex + alpha colors:
#26f3
or#2266ff33
- Support for gray():
gray(50%)
- Support for color() to calculate color conversions:
color(red tint(50%))
.
The available color modifiers supported inside color() are:
alpha()
/a()
. Modify the alpha channel:color(green a(0.5))
red()
. Modify the red channel:color(blue red(+55))
green()
. Modify the green channel:color(blue green(+55))
blue()
. Modify the blue channel:color(blue green(+55))
rgb()
. Modify the red,green,blue channels:color(blue rgb(+55, -23, +12))
saturation()
/s()
. Modify the saturation:color(blue s(50%))
lightness()
/l()
. Modify the lightness:color(blue l(50%))
whiteness()
/w()
. Modify the amount of white:color(blue w(50%))
blackness()
/b()
. Modify the amount of black:color(blue b(50%))
blend()
. Blends a color with other:color(blue blend(yellow, 50%))
blenda()
. Blends a color with other including the alpha channel:color(blue blenda(rgba(23, 12, 123, 0.3, 50%))
tint()
. Calculate the percentage of a color to white:color(red tint(50%))
shade()
. Calculate the percentage of a color to black:color(red shade(50%))
contrast()
. Calculate the color with a enought contrast to be readable in front of:color(red contrast(50%))
You write:
p {
background: color(red alpha(0.5));
color: color(blue tint(50%));
border-color: gray(50%);
}
And stylecow converts to:
p {
background: rgba(255, 0, 0, 0.5);
color: #7F7FFF;
border-color: #7F7F7F;
}
More demos in the tests folder