柔軟でとっても便利！Sassの変数を使って相対カラーパレットを作る方法

Sassの変数を使ってカラーパレットを作れたら最高ですよね。色彩定義を一か所で管理できるようになり、うっかり一貫性のない色合いを作ってしまったりすることもなくなり、柔軟なコーディングが可能になります。例えば、色変数の値を1つ変えれば、該当箇所がすべて変更される、などですね。素晴らしいコーディングは柔軟性に飛んでいます。

 

 

でもカラーパレットの柔軟性はそれだけじゃないんです。

カラーパレットの全てが、一つの色から作り出せるし、その一色を変えればカラーパレット全体を変えることだってできるんです！もっとも、一番適した使い方についてはまだまだ議論の余地があります。それについては、最終章をご覧くださいね。まずはHSL色空間について見ていきましょう。

 

 

 

H/S/L って何？

CSS上で色を表すには様々な方法で表現できます。例えば、#ff0000ですが、これは鮮明な赤を表していますが、他にも以下のような表現ができます。

• ・ #ff0000
• ・ #f00
• ・ Red
• ・ rgb(255, 0, 0)
• ・ hsl(0, 100%, 50%)

 

上記のどの値を使ってもCSSでは全く同じ赤を表示します。ChromeやSafari、それにFirefoxのデバイスツールだと、shiftを押しながら色のついたボックスをクリックすると、これらの表記が順番に現れます。

 

 

では、あまりなじみがないと想定される最後の値を詳しく見てみましょう。

 

HSLはhue（色相）、saturation（彩度）、lightness（輝度）の3つの成分で成り立っています。最初は少しとっつきにくいかもしれませんが、色を作り出す上で、大変わかりやすく、直観的に使える手法だと思います。

 

 

Hue（色相）は色味を0～360度の円で表す値です。0度は赤、120度は緑、240度は青、360度は赤に戻ってきます。それぞれの値の間にある数値はその中間色になります。

Saturation（彩度）は明暗度を示しています。100%はかなり鮮明で、50%だと少し色あせ、0%だと完全に灰色になります。

Lightness（輝度）は色味が白に近いか、黒に近いかを示しています。50%だと中間で、100%だと白、0%は黒になります。

 

 

RGBと比べると、HSLは人に理解しやすい自然な形になっていますし、違う色に変換するのも簡単です。

hsl(0, 100%, 50%)　は鮮やかな赤色ですね。では、少し値を変えて、hsl(0, 50%, 80%)を見てみましょう。2番目のhue（色相）は同じですが、saturation（彩度）が低く、lightness（輝度）が高くなっています。つまり、値から判断すると、2番目の色は1番目よりも明るく白っぽいことになります。

 

これは大変興味深いポイントなのですが、これらの値の違いが、それぞれの色味の関係性を示しているのです。そしてこの関係性は違う色にも適用できます。

2番目の値から最初の値を引くと、hue（色相）の差異は0、saturation（彩度）の差異は-50%、そしてlightness（輝度）の差異は+30%となります。これらの変化を鮮明な青に適用すると、明るく白っぽいラベンダー色が作られ、鮮明な緑に当てはめると、明るく白っぽい海の泡のような緑色ができます。

 

 

 

 

機能を最大限に活用する

Sassには、色を変換できる様々なカラーファンクション（リンク）があります。色を一つ打つと違う色が帰ってきます。

そのファンクションを使って、色のhue（色相）を変えたり、saturation（彩度）を増やしたり減らしたり、またはlightness（輝度）を調整したりできます。さらに、最終数値として使う前に、これらのファンクションをつなぐことで、一色に変更を加えるだけで複数の色変換を行うこともできます。

 

これらファンクションのコンビネーションで、色変換を一つの再利用可能な機能にします。つまり、1機能でどの2色の関係性も示すことができるのです。

 

 

 

面白くなってきましたね。これらの変換を自動化したことで、もっといろんなことができるようになります。

1つの基本色からの1変換しかお見せしていませんが、実際には変換に限度はないのです。複数のファンクションに色を一つ入力するだけで、様々な色を得ることができます。まさにファンクションパレットですね。このダイナミックなカラーパレットは、もとは1色から成り立っています。基本色を変えると、他の色もそれに合わせて変化します。

 

 

 

 

ロボットに働いてもらう

HSL表記法について調べ、分解し、その成り立ちを理解することは無駄ではありません。自分で計算できることはもちろん素晴らしいことですが、PCにその作業をやらせられるともっとかっこいいですよね。

 

 

SassMe（リンク）は自動でカラーコンバージョンができるツールです。まず、最初の色を入れ込み、スライダーを使ってhue（色相）、saturation（彩度）、lightness（輝度）を調整します。その結果、Sassの連結ファンクションができ、それがSassのビルトインカラーファンクションを使ってオリジナルカラーを変換します。このツールを使った方が、自分で計算するより分かりやすく、色変化もその場で確認できるので、いろんなことを試せてより良いものが出来上がります。

 

 

まだSassを使ったことがない？ここまでよく記事を読んでくださいました！ColorMe（リンク）でもSassと全く同じことができます。

ただ、これは近く発表されるCSSレベル4のカラーファンクション（リンク）を採用していて、この記事を執筆している段階ではどのブラウザもこれらのファンクションに対応していません。しかし、cssnext（リンク）などを使ってスタイル処理をするのであれば、ブラウザは必要ないので、今すぐ使い始められます。最先端の世界へようこそ。

 

 

 

そもそもどうやって使うの？

極端な話、このテクニックを使えば、一つの色でウェブサイトのカラーパレットを構成できてしまいます。しかし、ソースコードの可読性を考えるとあまりお勧めしません。

それよりも、ミニカラーパレットを作り出すのにとても便利なんです。1度モジュールをデザインしたら、そのモジュールには数十のカラーバリエーションが作れるようになります。手掛けているウェブサイトに複数のテーマがある場合（リンク）はまさにもってこいです。このテクニックなら、様々な色を自由に試せるし、PhotoshopやSketchなどより数段早くデザインへ繰り返し適用できます。さらに、「ブラウザ上でデザインするタイプの人」であれば、思いもよらないデザインに出会えることでしょう。

 

 

 

 

 

※本稿は 「Relative Color Palettes with Sass」を翻訳・再編集したものです。