scss で 簡単に新しい色を作る

LastModified
Category SCSS

概要

色を変化させる関数の使い方

色をまぜる

SCSS


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

CSSコンパイル後


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

HTML

#ff0000
#ffff00
mix

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

明度をあげて明るくする

SCSS


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

CSSコンパイル後


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

HTML

before
lighten

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

明度を下げて暗くする

SCSS


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

CSSコンパイル後


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

HTML

before
darken

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

彩度を上げる

SCSS


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

CSSコンパイル後


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

HTML

before
saturate

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

彩度を下げる

SCSS


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

CSSコンパイル後


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

HTML

before
desaturate

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

補色を返す

SCSS


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

CSSコンパイル後


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

HTML

before
complement

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

グレースケールを返す

SCSS


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

CSSコンパイル後


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

HTML

before
complement

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

色を反転させる

SCSS


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

CSSコンパイル後


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

HTML

before
complement

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

透明度を変更する

SCSS


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

CSSコンパイル後


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

HTML

before
complement

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

使用例

マウスhoverで色を変える


#scss-functions10{
    background-color: #ff0000;
    transition: all .25s linear;
}
#scss-functions10:hover{
    background-color: cyan;
}
HOVER

<div id="scss-functions10">HOVER</div>