CSSで白と黒のどちらの背景色でも見やすい色を作る方法

ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?

今回は、汎用的に使用する色を作るためにしたことを紹介していきます。

最初に灰色を決める

ウェブサイトの配色は大きく分けて、白っぽい (明るい) 配色、黒っぽい (暗い) 配色、白っぽくも黒っぽくもない原色系配色の3種類があります。そこで、白っぽい配色と黒っぽい配色の両方で使える、少し欲張りな色を作ろうと考えました。

白と黒の両方の背景色で見やすい色は、その中間にある灰色のはずなので、まずは灰色を決めます。通常、#808080 あたりで問題ないと思います。

色相を決める

色を決める際は、色相 (hue)、彩度 (saturation)、明度 (lightness) で設定できるhsl関数値が便利です。まずは、彩度を100%、明度50%に固定して色相のみを決めます。

hsl( HUE, SATURATION, LIGHTNESS )

明るい色 (薄い色) の場合、彩度と明度を調整したときに、くすんだ色 (濁った色) になりやすいので、はっきりした色がオススメです。ここでは、180deg (#00ffff) から 240deg (#0000ff) までの 10deg 刻みの青色を例に示します。

彩度と明度を決める

あとは彩度と明度を調整するだけなのですが、今回は白と黒の両方の背景色で見やすい色を設定するために、filterプロパティとsaturate関数値を活用します。

filter: saturate(0); を要素に適用すると、要素上の色は、彩度に応じた灰色で表示され、モノクロになります。

このモノクロの状態で、彩度と明度を調整し、最初に決めた灰色に近づけていきます。主に明度を調整しますが、必要に応じて彩度も調整します。

最後にfilterプロパティを取り除けば、白と黒のどちらの背景色でも見やすい青色が完成します。

CodePen

その他の色も同様の方法で作る

汎用的に使われる色は、赤色、黄色、緑色、青色、灰色の5色が多いので、残りの赤色、黄色、緑色も作りましたが、黄色はくすみやすく (濁りやすく)、緑色は明るくなりやすい傾向があります。

〆

色は難しい。