Easily create new colors with scss

LastModified
Category SCSS

概要

How to use color-changing functions

mix the colors

SCSS


#scss-functions01{
    background-color: mix(#ff0000, #ffff00, 50%);
}

After compilation


#scss-functions01{
    background-color: #ff8000;
}

HTML

#ff0000
#ffff00
mix

<div id="scss-functions01">mix</div>

lighten up with brightness

SCSS


#scss-functions02{
    background-color: lighten(#ff0000, 20%);
}

After compilation


#scss-functions02{
    background-color: #ff6666;
}

HTML

before
lighten

<div id="scss-functions02">lighten</div>

lower the lightness and darken

SCSS


#scss-functions03{
    background-color: darken(#ff0000, 20%);
}

After compilation


#scss-functions03{
    background-color: #990000;
}

HTML

before
darken

<div id="scss-functions03">darken</div>

Increase saturation

SCSS


#scss-functions04{
    background-color: saturate(#336699, 40%);
}

After compilation


#scss-functions04{
    background-color: #0a66c2;
}

HTML

before
saturate

<div id="scss-functions04">saturate</div>

Decrease saturation

SCSS


#scss-functions05{
    background-color: desaturate(#336699, 40%);
}

After compilation


#scss-functions05{
    background-color: #5c6670;
}

HTML

before
desaturate

<div id="scss-functions05">desaturate</div>

Returns a complementary color

SCSS


#scss-functions06{
    background-color: complement(#ff0000);
}

After compilation


#scss-functions06{
    background-color: cyan;
}

HTML

before
complement

<div id="scss-functions06">complement</div>

Returns grayscale

SCSS


#scss-functions07{
    background-color: grayscale(#336699);
}

After compilation


#scss-functions07{
    background-color: #666666;
}

HTML

before
complement

<div id="scss-functions07">complement</div>

Invert a color

SCSS


#scss-functions08{
    background-color: invert(#336699);
}

After compilation


#scss-functions08{
    background-color: #cc9966;
}

HTML

before
complement

<div id="scss-functions08">complement</div>

Change the transparency

SCSS


#scss-functions09{
    background-color: rgba(#ff0000,0.25);
}

After compilation


#scss-functions09{
    background-color: rgba(255, 0, 0, 0.25);
}

HTML

before
complement

<div id="scss-functions09">complement</div>