BLOG

ベースカラーから良い感じの色を決めてくれるSCSS

2022/10/07
ひらの

今回は、指定したベースカラーから良い感じの色を自動で決めてくれるSCSSを考えてみました。

こんな時に使いたい

CSSを書いていて「ココの色、見えにくいなぁ」とか「思ってた色と違うなぁ」ということありませんか？

Webページの作成時、複数色のパーツセットを作ることもあります。
そんな時に各色の指定を確認してまわるはちょっと大変。

そんな時に使いたいSCSSです。

適当な文字色を自動で設定したい

ボタン要素などを作っていると起きる「背景色によって文字がみずらくなる問題」を解決してくれるSCSS。

W3Cのウェブアクセシビリティでは背景色と文字色で一定のコントラスト比を維持することが推奨されています。
W3Cのガイドライン: https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast

このように、背景色によって文字色が見えなくなってしまう事もしばしば…

「デザインツールなどでコントラスト比を確認してまわるのも面倒だな…自動で切り替わればいいのに…」
そんな時のためにSCSSでベースの色を判定して文字色を 暗い色 or 明るい色 で決めてくれる関数を作成します。

@function _text-color($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);
  $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
  @if($brightness >=128) {
    //明るい
    @return black;
  }
  @else {
    //暗い
    @return white;
  }
}

まずは 引数（$color） でベースカラーを受け取ります。
ベースの色を rgb値に変換し、色の明るさを数値で取得します。（この計算式はW3Cが公開しているガイドラインにも記載があります）

計算で取得した数値を if文で 128 以上かどうかを判定し、半分よりも大きければ明るい色、小さければ暗い色と判定するようにしました。
※ 128 はrgb値が0~255までなので、256÷2 をしたものです。

ベースが明るい色の場合は文字色を黒で返し、暗い色の場合は文字色を白で返します。

結果…背景色が暗めの色でもしっかり文字が読めるようになりました。

関数を使った実際のコード↓↓

See the Pen contrast by hirano (@_y_hirano) on CodePen.

良い感じのグラデーションも作りたい

CSSを書いていて、「ココに綺麗なグラデーションを入れよ～」と思い、いざ設定してみると「なんか思ってたよりも汚いな…」ということありませんか？

私はよくあります。

例えばこんな色。
緑もピンクもきれいな色なのに、真ん中のあたりがモヤっとした色になってしましました。

綺麗な色に見えるグラデーションにはルールがあり、そのルールに沿ってないとこのようにモヤっとしたグラデーションになってしまいます。

綺麗なグラデーション作り

1、明暗だけを変更する

まずは、ベースカラーの明るさを変更するして作るグラデーションです。
色相や彩度を変更しないため、自然なグラデーションになります。

See the Pen Untitled by hirano (@_y_hirano) on CodePen.

こちらは先述の文字色設定SCSSを少し変更して
ベースカラーが明かるときは暗い色に、ベースカラーが暗い時は明るい色にグラデーションするように設定しました。

@function _bg-color($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);
  $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
  @if($brightness >=128) {
    @return darken($color, 20%);
  }
  @else {
    @return lighten($color, 20%);
  }
}

if文の分岐で明度を20%変更して背景色のグラデーションを作ります。

2、近似色を使う

近似色は、カラーサークルでベースカラーの近くにある色を使う方法です。

カラーサークルはこんな虹色の環を画像編集ソフトなどで見たことがあるかもしれません。
これがカラーサークルです。

このカラーサークルでベースカラーとなる色を基準に近似色を決めるため、カラーサークルをザックリ12色くらいに分けます。

12色に分けたときのカラーサークルはこんな感じ。
頂点の色（今回は黄緑）を0度として、30度ずつの箇所の色で別けました。

近似色はベースカラーの左右30～60度くらいの位置

さっそく、このカラーサークルを元に自動で色を設定するSCSSを作ります。

@function _dominant-grad($color) {
  $h: hue($color); //色相
  $s: saturation($color); //彩度
  $l: lightness($color); //明度
  $color-diff: 30; //色差
  @if ($h >= $color-diff) {
    $h: $h - $color-diff;
  } @else {
    $h: $h - $color-diff + 360;
  }
  @if ($l >= 90) {
    $l: $l - 30%;
  } @elseif ($l < 50) {
    $l: $l + 30%;
  }
  @return hsl($h, $s, $l);
}

今回は色を決めるために HLS色空間 を使います。
※HSL色空間は HLS と呼ぶこともあり、コード中はHLSと記述しています。

ベースカラーをそれぞれ Hue（色相）、Saturation（彩度）、Lightness（明度）ごとに数値化し
この中の Hue（ 色相 ）を30度ずらします。
今回はカラーサークルで、ベースカラーの左隣になる色になるようにしました。

これだけでもOKですが、ブラウザで見た時にグラデーションが分かりにくい箇所があったので明度を調整するif文を追加しています。

その結果がコチラ。

See the Pen Untitled by hirano (@_y_hirano) on CodePen.

明度を変更したグラデーションと違い、他の色が入るので鮮やかに見える気がします。

もう少し変化をつけて…色相のを変化を60度にしてみました。

See the Pen approx-2 by hirano (@_y_hirano) on CodePen.

3、反対色を使う

もっと変化の大きいグラデーションの場合は反対色を使うと良さそうです。

補色の左右となり30～60度くらい

See the Pen Untitled by hirano (@_y_hirano) on CodePen.

こちらはベースカラーの補色近くの色を指定しています。
ベースカラーとの色の違いが大きくなるので、よりカラフルなグラデーションができました。

ただし、グラデーション終点の色を補色にするとあまりきれいに見えないので、終点の色は補色近くの色に設定しておくのが良さそうです。

まとめ

いかがでしょうか？
今回のサンプルではベースカラーを16色用意して、それぞれのSCSSで色を変えてみました。

普段のWebページ制作では色指定までバッチリのデザインを使うことがほとんどなので
CSSで色指定を決める機会は少ないですが、こういった指定方法を知っていると多くの色を使うWebページのコーディングが速くなりそうです。

今回この記事を書くにあたり、色空間の話なんかも出てきてきました。
私はCSSの書き方は知ってても色のルールは全然知らなかったので勉強しながらコードを書きました。

今回作ったSCSSでの計算はあくまで「ザックリ」なものになります。
W3Cのガイドラインのウェブアクセシビリティ基準を満たしていない場合がありますのでアクセシビリティ基準が定められているWebページ制作時はご注意ください。

label