任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
この記事は約9分ぐらいで読めます
色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。
私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、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の関数、lightenやdarken、彩度を変更する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%) ;
自分の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ファイルからの生成
画像からピックすることもできる
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の教科書 - 公式サポートサイトのページを参考にしました★ お世話になったので書籍のリンクも置いておきますね〜
インプレスジャパン
売り上げランキング: 74,822