⚽

CSS変数による配色はcontrastとrgbも用意したら捗るぞ

2020/09/26に公開

CSS

DESCRIPTION

CSSの基調色は変数化しよう
そうすることで部分最適で「同じような色を複数生み出すこと」が避けれるよ
「基調色」はcontrastとrgb値も用意するといいよ！

本文

プライマリーカラーやセカンダリーカラーは変数化するのが一般的になりました。配色をいろいろなコンポーネントプロパティに書き散らかすと部分最適化した結果「気づいたら青色が32種類」ということになる事例もありますので、全体を最適化して保守性を高めるために、配色の変数化は一般的です。こんな感じですね。

:root {
  --color-primary: #3880ff;
  --color-secondary: #3dc2ff;
}

ここまではしてる現場が多いのですが、Ionic FrameworkというモバイルアプリをWeb技術でつくるためのフレームワークでは「変数化するなら更に保守性を高めよう」という考え方をしています。例えば、上記配色を利用してbuttonを用意する時のCSSは以下のようになりがちです。

button.primary {
  background: var(--color-primary);
  color: #ffffff;
}

contrastが欲しくなる

メイン基調色となる background は変数化されていますが、buttonの文字色は変数化されていません。これは --color-font みたいな名前では一致しないための仕方なしの対応策になりがちなのですが、視点を変えると プライマリーカラーの対比色 として考えることができます。プライマリーカラーが濃い場合は #ffffff が入るでしょうし、薄い時は #000000 やそれに準じる色が想定されます。つまり、CSS変数は以下のようになります。

:root {
  --color-primary: #3880ff;
  --color-primary-contrast: #ffffff;
  
  --color-secondary: #3dc2ff;
  --color-secondary-contrast: #ffffff;
}

rgbが欲しくなる

これだけでいいでしょうか。皆さんは、CSSでつくってる時、「背景色を半透明にしたいけど、opacity プロパティだとその要素すべてが半透明になってしまう。私が透明にしたいのは背景色だけだ」みたいなことないですか。 opacity プロパティを使うとその要素は文字も含めすべて半透明になってしまいます。
これを避けるためには、色を rgba で指定します。第4引数が不透明度になっていますので、色を rgba で指定することによって、「背景は半透明・文字は半透明にならない」ことを実現することができます。

そうすると、これも基調色に入れると便利です。半透明にする時、もしくは微調整する時にrgbを毎回調べるのは大変ですし、そもそもrgb値を書き散らすと、基調色を変数化してる意味がなくなります。ですので、以下のようにします。

:root {
  --color-primary: #3880ff;
  --color-primary-rgb: 56,128,255;
  --color-primary-contrast: #ffffff;
  --color-primary-contrast-rgb: 255,255,255;

  --color-secondary: #3dc2ff;
  --color-secondary-rgb: 61,194,255;
  --color-secondary-contrast: #ffffff;
  --color-secondary-contrast-rgb: 255,255,255;
}

利用する時は以下のようにします。

button.primary {
  background: rgba(var(--color-primary-rgb), 0.9); // 不透明度90%
  color: var(--color-primary-contrast);
}

これで基調色を変数化することができました。

以下URLで基調色から自動生成できるよ

contrastを明度によって白と黒どちらにするかとか、色のrgb値をいちいち調べてられないという方は、Ionic Frameworkのカラージェネレーターを利用することができます。

生成された配色はスクロールしたところにCSS変数として表示されます。Ionicでは、 shade （基調色に比べてちょっと暗い色）、　tint （基調色に比べてちょっと明るい色）も同時に生成されますが、あるとこれらも（似た色をあちこちで生み出さずに済むので）意外に便利ですよ。

CSSのメンテナビリティを考え直す時に、ぜひ一緒に「基調色まわりをどこまで抑えるか」を考えてもらえればと思います。

それでは、また。

DESCRIPTION

本文

contrastが欲しくなる

rgbが欲しくなる

以下URLで基調色から自動生成できるよ

Discussion