Sass(Scss)で基本の色の演算をまとめた

前回、配色のことについていろいろとわかったので今度はwebデザインでそれをどうにか生かしてみたい。
ということでSass(Scss)を使って色の配色を簡単にできないかどうか調べてみました。

Scssでは色の演算ができます

まずは簡単に青色と補色に近い値のオレンジ色を足したり引いたりしてみました。

See the Pen PzKjRk by shimizu (@ryo0326) on CodePen.0

簡単ですね。
足すとピンク色、引くとわかりにくいですけど紺っぽい色になるみたいです。

色相の変化

See the Pen WxEOaO by shimizu (@ryo0326) on CodePen.0

色相をいろいろ変化させています。{adjust-hue(ベースの色,どれだけの角度回転させるか)}という感じで色を変化させられます。
180度変えると当然、補色になりますね。

彩度と明度も変えられるんです。

See the Pen akywxr by shimizu (@ryo0326) on CodePen.0

ベースカラーを彩度普通くらいの緑色にしました。
彩度と明度を上げ下げするだけでもこれだけ変わるんですね。

これはHP制作でいろいろ使えそう

今後しっかりとデザインをすればベースカラー1色の変更だけでそれなりに綺麗なサイトになりそう。
多分デザインに詳しい人はすでにこの方法でやってると思う。

他にもSassの関数は多いので今後も記事にしていきます。

コメントを残す

メールアドレスが公開されることはありません。