WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

作る。

WEBCRE8.jpが作ったサービス、素材、サイトなどを
公開していくカテゴリです。

任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する

この記事は約9分ぐらいで読めます

トーンのイメージがわからない人もデモでつかめるはず
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★

色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。

私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー!

デモ

どんなものなのか、とりあえずデモです。

See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on CodePen.

CSSパネルはSCSSで書いています。CSSパネルの一番上の$color-main: rgba(#ff0088, 1) ;の部分の色のHEX値を好きなものに変更するとそれ以外のサークルの色がそれぞれストロング、グレイッシュなどの様々なトーンをイメージした色になります

これはそれぞれのサークルに振ってある名前からわかるようにPCCSなどでも用いられているトーン名をイメージしているものですが、値の算出方法は私が独自に設定したものであり、あくまでイメージだと考えてください。雰囲気が伝わるように各トーンには漢字の名前も振ってあります。

リポジトリー

上記はあくまでデモなので見せる用のスタイルを設定していますが、変数のファイル自体はGitHubに上げています。

webcre8/css-colortone-variable

もし変数の設定のしかたなど、もっと私がやろうとしているトーンの再現に近い方法があるよという場合はプルリクもらえるとうれしーです★

使い方

リポジトリーと言っても、単にSCSSファイルがあるだけの簡素なものです。デモもCodePenに置いちゃったし。

_var-colortone.scssを開くとデモにあった変数群がさらにいくつかあるだけです。これらはベースとするそれぞれの色の明度を変更するSassの関数、lightendarken、彩度を変更するdesaturateを使って様々なトーンに対応させた色の変数を作り出しています。

/* Main Color */
$color-main: rgba(#00ffe4, 1) ;
$color-main-blight: lighten($color-main, 12.5%) ;
$color-main-strong: desaturate($color-main, 25%) ;
$color-main-deep: darken($color-main, 12.5%) ;
$color-main-light: lighten($color-main, 25%) ;
$color-main-soft: desaturate(lighten($color-main, 12.5%), 50%) ;
$color-main-dull: desaturate(darken($color-main, 12.5%), 50%) ;
$color-main-dark: darken($color-main, 25%) ;
$color-main-pale: lighten($color-main, 37.5%) ;
$color-main-lgrayish: desaturate(lighten($color-main, 12.5%), 75%) ;
$color-main-grayish: desaturate(darken($color-main, 12.5%), 75%) ;
$color-main-dgrayish: darken($color-main, 37.5%) ;
メインカラーを指定するSassの変数

自分のSCSSファイルに貼り付けてWebサイトのそれぞれのカラーを入れておけばそのまま変数を使うことができます。ちなみにすぐカラーコードだけ欲しいという人は前述のデモでCSSプレビューを見るとHEX値が算出されているのでその値を取るジェネレーターとして使ってください。CodePen便利だなあ。

色を入れる際は、なるべく純色で彩度の高いものを入れてください。具体的には、例えばHEX値で言うならR、G、Bのうちどれか一つをff、さらに一つを00とすると残りの一つを何にしても濁りがなく彩度の高い純色になります。ベースカラーが極端に暗かったり明る過ぎたりするとそっち方向に偏った色ができ、必ずしもトーンの名前にマッチした色になるとは限りません。どうせ暗い色や明るい色はより彩度の高い色から生成されるのでいったん高彩度の色を入れるといいでしょう。

もちろん、この中間が欲しいんだよというときはあえて暗め、明るめ、濁った色を入れるのもアリです!

BracketsのSwatcher

またかって感じかもしれませんがw これに関連してBracketsのエクステンション、Swatcherを紹介します。

Swatcherは、現在開いているCSS Preprossesor(SassまたはLESS)の中で使われている色の変数をカラースウォッチのように表示させるパネルを出すエクステンションです。試しに_var-colortone.scssを開いてみると、スウォッチが表示されます。

各色のスウォッチが表示される

各色のスウォッチが表示される

このスウォッチはホバーすると変数名と色指定(関数含む)、クリックするとその色の変数がエディターのカーソル位置に挿入されます。また、$を入力すると変数がサジェストされます。

Swatherは他にも.acoファイルからスウォッチを生成したり、画像から色をとったりすることができます。

.acoファイルからの生成

.acoファイルからの生成

画像からピックすることもできる

画像からピックすることもできる

Bracketsを使っている人は試してみてくださいー!

トーンについて

トーンのイメージがわからない人もデモでつかめるはず

トーンのイメージがわからない人もデモでつかめるはず

トーンとは、色を構成する色相、明度、彩度のうち、明度と彩度の組み合わせのことを言います。色彩を選定する際に、色相は変化させずに色の雰囲気だけを変えたいときに使われるものです。同じ色相であっても様々なパターンが存在する色において、柔らかい緑、暗い緑などといった言葉の表現とも符合した実用的な用語です。

トーン名 印象・特徴
Vivid 鮮やかな。冴えた。純色
Blight 明るい。明清色
Strong 強い。男性的
Deep 深い。暗清色
Light 軽い。パステルカラー。明清色
Soft 柔らかい
Dull 鈍い
Dark 暗い。暗清色
Pale 薄い、淡い。明清色
Light Grayish 明るい灰みの
Grayish 灰みの
Dark Grayish 暗い灰みの。暗清色
White
Light Gray 明るい灰色
Medium Gray 灰色
DarkGray 暗い灰色
Black
トーンを表す言葉と印象
上に行くほど彩度が高く、左に行くほど明度が高い

上に行くほど彩度が高く、左に行くほど明度が高い

最下段の列は彩度が0なので無彩色、それより上は全て有彩色と言います。また、左列全てを明清色、右列全てを暗清色、頂点の色を純色と言います。今回の場合はこの図のように頂点に純色を入れるとは限らないので使う人によってはその通りになるとは限りませんが、このようなルールのもとに作られているものだと思ってください。

こうした色についての用語は様々なサイトで紹介されていたり、色彩検定なんかでも勉強しますねー!

おわりに

Webサイトを作成する際に使う色は真っ先に決めると思うので、Sassの変数で管理すると便利でしょう。もし変わっちゃったとしても基準の色を変えれば済みますしね!

16進数の指定自体がどうなっているかを知りたい人は昔の記事ですが[色]デザイナーっぽくカラーコードの16進数を覚えたくないですか?も参考になると思いますー!


追記

今回の記事を書くにあたって関数一覧 | Web制作者のためのSassの教科書 - 公式サポートサイトのページを参考にしました★ お世話になったので書籍のリンクも置いておきますね〜

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
平澤 隆 森田 壮
インプレスジャパン
売り上げランキング: 74,822