Webサイトの配色とカラーホイール

2022/08/19

プログラミング学習には、HTMLを書くと良い¹そうです。なので、Webサイトを作りたいと思っています。

Webサイトは見た目よりも内容が重要なのですが、配色ぐらいは自分で選びたいです。

今回、夏休みの自由研究として、配色について学び、自分のWebサイトの配色を選びたいと思います。

配色とは

Wikipedia ² で調べてみると、「配色はカラーホイール上の色の論理的な組み合わせ」のことだそうです。

そして、「カラーホイール」とは、以下のような、色を配置した円のことです。

色相環

色の論理的な組み合わせとは

カラーホイール上の色の組み合わせにはいくつか種類³があるそうです。

配色パターン	説明
単色(Monochromatic)	同一の色相(hue)だけで配色します。同一色相で、シェード(黒の量)やトーン(黒+白の量)、ティント(白の量)の異なる色の組み合せです。
補色(Complementary)	ベースカラーと、その色の反対側にある色(互いの色相を打ち消し合う色)の、2色の組み合わせです。
分割補色(Split-complementary)	ベースカラーと、ベースカラーから150度と210度離れた2色からなる、3色の組み合せです。
無彩色(Achromatic)	彩度の低い色の組み合せです。ホイールの中心に近いほど彩度が低くなります。色相や明度は任意に指定できます。
類似色(Analogous)	ベースカラーと、隣接する色の組合せです。
トライアド(Triadic)	ベースカラーと、ベースカラーから120度と240度離れた2色からなる、3色の組み合わせです。
テトラディック(Tetradic) 長方形	ベースカラーから60度、180度、240度離れた4色の組み合せです。
テトラディック(Tetradic) 正方形	ベースカラーから90度、180度、270度離れた4色の組み合せです。

これからやること

カラーホイールを使って配色を選択できるツールを用意し、色の論理的な組み合わせを試し、サイトの配色を決めたいと思います。

研究方法

1. ツールの選定

GitHubで公開されているツールをカスタマイズして、配色を検討したいと思います。まずは、インクリメンタルハッキングサイクル⁴に従って、ツールを探してみましょう。

GitHub⁵でキーワード Color Wheel、使用言語 Python、最終更新日 2020-01-01以降 でプロジェクトを検索します。

先頭に表示された、israel-dryer/Color-Wheel⁶プロジェクトをもとに配色を学んでいきます。

2. ツールの拡張

次に、israel-dryer/Color-Wheelの使い方と機能を確認しましょう。

israel-dryer/Color-Wheelは、GUIツールキットである Tkinter を利用したGUIツールです。機能は以下になります。

カラーホイール(輝度が固定)とカーソルを表示
カーソルをドラッグで移動可能
カーソルが指し示す色情報を表示

これだけでは、学習に必要な機能が足りないので、以下を追加します。

輝度の異なるカラーホイールを表示
ベースカラー用のカーソルと組合せ用のカーソルを表示
配色パターン を切り替えて、カーソルの構成を変更可能に
カーソルが指し示す色情報をコピー可能に
カーソルが指し示す色情報を保存可能に
カーソルをダブルクリックで移動可能に
指定したRGB16進文字列(例: #FFFFFF)に対応する場所にカーソルを移動可能に

インクリメンタルハッキングサイクル⁴に従い、段階的に機能を追加していきましょう。

3. ツールの使用方法を確認

全ての機能を追加したツールは以下になります。

使い方

カラーホイール上に表示されるカーソル(図中1,2)を移動させると、選択色(図中5)が表示されます。
選択色が気に入れば、"+"ボタンを押すと、保存済みカラー(図中6)として保存されます。

また、輝度選択スライダー(図中4)を変更すると、カラーホイールの輝度が変わります。
配色パターン選択ラジオボタン(図中3)を変更するとパターンに応じたカーソルが表示されます。

4. 配色パターンを使って配色を検討

カラーホイールツールの準備ができました。実際に配色パターンを使って配色を検討しましょう。

まずは、好きな色を選びます。キーとなる色なので、純色(輝度(L):50)から色を選択します。

今回はカラーホイールツールで好きな青系の色を選択し、この色をベースカラーとしてスタートしたいと思います。

#3e6cc1

そして、Material Design 3 のカラーシステム⁷を参考に、キーとなる色とそのバリエーションを選んでいきます。

キーカラー

今回は配色パターンの色をそのままキーカラーとします。

キーカラー名	読み方	説明
Primary	プライマリ	おもに使用する色。ベースカラー
Secondary	セカンダリ	2番目に使用する色
Tertiary	ターシャリ	3番目に使用する色
Quaternary	クォータナリ	4番目に使用する色

カラーバリエーション

キーカラーのトーン(黒+白の量)を変えてカラーバリエーションを作成します。

今回は輝度(L)の値を変えてバリエーションを作成します。カラーバリエーション名は以下になります。名称は今回独自に命名しています。

カラーバリエーション名	輝度(L)	説明
main	40	おもに利用する通常色
light	90	通常色より明るい色
on main	100	通常色が背景の時に利用する色
on light	10	明るい色が背景の時に利用する色

単色

同一の色相の色(ホイールの同一角度上にある色)をプライマリ、セカンダリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#61779e

main

L:40

light

L:90

on main

L:100

on light

L:10

補色

プライマリカラーの反対側にある色をセカンダリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#c1933e

main

L:40

light

L:90

on main

L:100

on light

L:10

分割補色

プライマリカラーから150度と210度離れた2色をそれぞれ、セカンダリ、ターシャリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#adc13e

main

L:40

light

L:90

on main

L:100

on light

L:10

Tertiary

#c1523e

main

L:40

light

L:90

on main

L:100

on light

L:10

無彩色

ホイールの円の中心に近い、彩度の低い色の組合せ(本例では補色)を、それぞれプライマリ、セカンダリに選択します。

Primary

#768489

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#897b76

main

L:40

light

L:90

on main

L:100

on light

L:10

類似色

プライマリカラーに隣接する2色をそれぞれ、セカンダリ、ターシャリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#523ec1

main

L:40

light

L:90

on main

L:100

on light

L:10

Tertiary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

トライアド

プライマリカラーから120度と240度離れた2色をそれぞれ、セカンダリ、ターシャリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#523ec1

main

L:40

light

L:90

on main

L:100

on light

L:10

Tertiary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

テトラディック(長方形)

プライマリカラーから60度、180度、240度離れた2色をそれぞれ、セカンダリ、ターシャリ、クォータナリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#523ec1

main

L:40

light

L:90

on main

L:100

on light

L:10

Tertiary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Quaternary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

テトラディック(正方形)

プライマリカラーから90度、180度、270度離れた2色をそれぞれ、セカンダリ、ターシャリ、クォータナリに選択します。

Primary

#3e6cc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Secondary

#523ec1

main

L:40

light

L:90

on main

L:100

on light

L:10

Tertiary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

Quaternary

#3eadc1

main

L:40

light

L:90

on main

L:100

on light

L:10

5. サイトの配色を決定

個人的な好みなのですが、補色パターン か 分割補色パターン の組み合わせが一番使いやすそうに思いました。

また、以前利用したことのある、配色選択ツール Color Tool - Material Design⁸ では、カラーバリエーションに、main, light と dark の3つのバリエーションがありました。このバリエーションも使いやすそうでした。

そこで、今回は、 分割補色パターン から1色選び、セカンダリカラーとし、カラーバリエーションに dark を追加したいと思います。

カラー名	輝度(L)	説明
main	40	おもに利用する通常色
light	90	通常色より明るい色
dark	20	通常色より暗い色
on main	100	通常色が背景の時に利用する色
on light	10	明るい色が背景の時に利用する色
on dark	100	暗い色が背景の時に利用する色

以上の結果、私が選んだ色は以下になります。

Primary

#3e6cc1

main

L:40

light

L:90

dark

L:20

on main

L:100

on light

L:10

on dark

L:100

Secondary

#adc13e

main

L:40

light

L:90

dark

L:20

on main

L:100

on light

L:10

on dark

L:100

結果

各種機能を追加し、HLS形式の色相環をもつカラーホイールツール(kantas-spike/Color-Wheel)を完成させました。

本ツールでは、以下の色を選択できます。

配色パターンを使いキーカラーを選択
輝度(Lightness)の変更によりカラーバリエーション(main, light, dark)を選択

本ツールを使い、サイトの配色を検討、決定することができました。

私が決めたサイトの配色(再掲)

Primary

#3e6cc1

main

L:40

light

L:90

dark

L:20

on main

L:100

on light

L:10

on dark

L:100

Secondary

#adc13e

main

L:40

light

L:90

dark

L:20

on main

L:100

on light

L:10

on dark

L:100

感想と課題

ツール開発について

インクリメンタルハッキングサイクル(IHC)⁴が良いことを実感しました。わたしの実力では 0 を 1 にはできませんが、IHCのおかげで、1 を 1.3 ぐらいにはできたと思います。

ツールのデザインについて

カラーホイールツール自体のデザインが格好悪いです。少しずつデザインを改善したいですね。

数学の基礎知識について

ツールで画像を操作する時に、座標変換や三角関数など数学の基礎知識が必要になりました。

人生のどこで三角関数を使うのかと思っていましたが、ここでしたね。今回のツールのように画像を扱うスキルを身につけるため数学の基礎を学び直さないといけません。

配色について

今回参考にした Material Designのカラーシステムでは、キーカラーをアクセントカラーとニュートラルカラーに分けています。

アクセントカラーは、カラーホイールツールで選択したキーカラーと同じです。ニュートラルカラーは、サイトの背景やサーフェス、コンポーネントのアウトラインの色になります。

背景は灰色、サーフェスは白色のように、決めている場合は問題ありませんが、ニュートラルカラーの採用も今後検討する必要があります。

配色をCSSフレームワークで利用する

世にあるCSSフレームワークでは、スタイルで使用する色をカスタマイズできるようです。

例えば、primary-dark、on-primary-dark などの名前で色を登録し、サイトデザイン時に登録した色で配色すれば、あとは、登録した色の値だけ変えればサイト全体の配色を変更できるようになります。

CSSフレームワークのtailwindcss⁹の場合、以下のように設定ファイルに色を登録すれば、 bg-primary-dark, text-on-primary-darkのように登録した色名で各種配色を行えます。

設定変更だけで配色を簡単に変更できるので、CSSフレームワークを積極的に採用するべきです。

# tailwind.config
#   .. 略 ..
module.exports = {
  #   .. 略 ..
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#32569a',
          light: '#d8e2f3',
          dark: '#192b4d',
        },
#   .. 略 ..
        on: {
          primary: {
            DEFAULT: '#ffffff',
            light: '#0c1627',
            dark: '#ffffff',
          },
#   .. 略 ..

ダークモード

Material Designのカラーシステム¹⁰では、ダークモード時にカラーバリエーションについても説明があります。ダークモードの採用も今後検討する必要があります。

付録1. 調査輝度の異なるカラーホイールの作成

israel-dryer/Color-Wheelには1種類の輝度のカラーホイールしか用意されていません。カラーホイールを作る必要があります。

カラーホイールはどうやって作るのでしょうか？ググりましょう。

HSV色¹¹のカラーホイールを作成する方法¹²が見つかりました。

ただし、HSV色の場合、輝度100%を純色とするため、純色より明い色を指定できないようです。そこでHLS色¹³のカラーホイールを作成することにします。HLS色では、輝度50%が純色になります。

カラーホイールにはHLS色が向いてそうですね。

HLS算出方法のまとめ

カラーホイールを作成する方法¹²を確認すると、カラーホイールの色相(HLSのHue)は、逆三角関数の arctan を使って作成するようです。

三角関数は角度から値を求めますが、逆三角関数は値から角度を求めます。三角関数のtanは角度から余弦分の正弦を求めますが、逆三角関数のarctanは余弦分の正弦から角度を求めます。

カラーホイールでは、色相(HLSのHue)は、角度に対応しているので、arctanが利用できそうです。

また、Pythonのmathモジュールには、座標の点(x,y)から角度を求める、atan2¹⁴が用意されています。これによりホイール内の座標から角度(Hue)を算出できそうです。

そして、彩度(HLSのSaturation)は、ホイール内の座標から円の中心までの距離を求めれば算出できそうです。

ただし、輝度(HLSのLightness)は、2次元では表現できないので、ツールにラジオボタンなどを追加し、輝度を選択できるようにします。

まとめると、以下になります。

HLS	算出方法
H(Hue)	`math.atan2(y, x)`で算出
L(Lightness)	固定値。スライダーなどで値を選択し、外部から指定
S(Saturation)	座標から円の中心までの距離から算出

atan2の使い方の理解

atan2が難しそうなので、使い方をイメージするためにグラフにしてみました。座標のx, yとatan2の値の3次元グラフ(円内のみ色付けしています。)になります。

atan2グラフ

atan2(y, x)そのままグラフにすると、Y軸のマイナス側を北とした場合、西側から時計周りに色相が変化します。

カラーホイールは北側から時計周りに色相が変化するようなので変更したいと思います。

atan2(-x, y)をグラフにすると北から時計回りに色相が変化しました。この呼び出し方を採用します。

atan2グラフ

カラーホイール作成ツール(kantas-spike/create-color-wheel.py)の作成

これまでの調査結果をふまえ、任意の輝度、任意の半径のカラーホイールを生成するツール kantas-spike/create-color-wheel.py ¹⁵を作成しました。

以下を実行するとツールで使用する輝度0〜100(間隔は50刻み)の半径365pxのカラーホイールを作成します。(例外的な間隔を追加したい場合は--append-valuesオプションで指定します。)

poetry run python3 create-color-wheel.py -r 365 --outputdir ./images --color hls --start 0 --end 1.0 --step 0.05 --append-values 0.97 0.98 0.99

ツールで作成したカラーホイールの例

輝度	0	20	50	70	90	100
ホイール

付録2 色の論理的な組み合わせ名で表示するカーソルの構成を変更可能に

配色のパターンに合せて、ベースカラー用のカーソルと、その他の組み合わせカラー用のカーソルを表示する必要があります。

ツールにおける配色パターンの組み合わせカラーの数と、カーソル表示位置を以下に整理しました。

配色パターン	組み合わせカラー数	カーソル表示位置
単色(Monochromatic)	1	-
補色(Complementary)	2	ベースカラーを180度回転
分割補色(Split-complementary)	3	ベースカラーを150, 210度回転
無彩色(Achromatic)	1	-
類似色(Analogous)	3	ベースカラーを30, 330度回転
トライアド(Triadic)	3	ベースカラーを120, 240度回転
テトラディック(Tetradic) 長方形	4	ベースカラーを60, 180, 240度回転
テトラディック(Tetradic) 正方形	4	ベースカラーを90, 180, 270度回転

それでは、実現方法を考えましょう。

Tkinter¹⁶ では、座標を指定して画像を配置できます¹⁷。(デフォルトでは、画像の中心が指定座標に配置されます。)

canvas.create_image(x, y, image=cursor_image)

ベースカラーのカーソル座標を、さきほど整理したカーソル表示位置の角度に回転させれば、組合せカラー用のカーソルを配置できます。

では、任意の角度に座標を回転できるのでしょうか？

三角関数を使えば実現できるそうです¹⁸。

回転の中心となる原点: \((0,0)\)
回転角: \(\theta\)
回転前の点: \((a, b)\)
回転後の点: \((a', b')\)

この時、回転後の点は以下になる。

\( (a', b') = (a \cos\theta - b \sin\theta, a \sin\theta + b \cos\theta) \)

以下のような関数を用意すれば、ベースカラーのカーソル座標を任意の角度で回転させることができます。

def rotate(x, y, deg, center_x, center_y):
    rad = math.radians(deg)
    rx, ry = (x - center_x), (y - center_y)
    nx = rx * math.cos(rad) - ry * math.sin(rad) + center_x
    ny = rx * math.sin(rad) + ry * math.cos(rad) + center_y
    return int(nx), int(ny)

これまでの調査結果をふまえ、配色パターンに合せたカーソルを表示する機能を追加しました。

付録3 自由研究の紹介動画

この自由研究を紹介する動画を作成しています。ご興味があれば参照ください。

作成日: 2022/08/19