概要
前回は 「HexではなくHSLを使って理論的な色選びをしよう！」 という内容をお届けしました。
今回はHSLとジャッドの色彩理論という考え方を参考にしながら、より理論的に色を選定して実際にコンポーネントに当てはめる方法を学んだので、共有したいと思います！
【簡単におさらい】HexとHSLの違い
Hexは赤・緑・青の3色の比率を16進数で示し、色を表現するコードです。（黒：#000、白：#FFFなど）
一方、HSLは以下の3つの要素から色を表現するものです。
- 【Hue（色相）】何色っぽくするか を決める要素
- 【Saturation（彩度）】鮮やかさ、グレーっぽさ を決める要素
-
【Lightness（輝度）】白っぽい、黒っぽい を決める要素
相性の良い色の組み合わせには法則がある
人が「相性の良い」と感じる色の組み合わせには、ある一定の法則があります。
「ジャッドの色彩理論」では、以下いずれかの原理を用いることで相性の良い色を作ることができると定義しています。
- 【共通性の原理】似た要素（色相、トーン）を持つ色の組み合わせは相性が良い
- 【なじみの原理】 自然界でよく目にする色の組み合わせは相性が良い
- 【秩序の原理】 色空間の中で一定の規則による色の組み合わせは相性が良い
- 【明瞭性の原理】 対照性、明確なコントラスト差がある色の組み合わせは相性が良い
今回は、これらの原理の中でも一番わかり易い 【共通性の原理】 を使ってボタンの色を選定してみました！
【共通性の原理】似た要素（色相、トーン）を持つ色の組み合わせは、相性が良い
色の組み合わせにおける共通性として、以下の2種類を紹介します！
色相の共通性
HSLのうち、H（色相）を固定し、S（彩度）またはL（輝度）のいずれかを可変にすると、調和する色になるというものです。
色彩の共通性を用いた色選びをすると、このようなカラーパレットができました。
トーンの共通性
HSLのうち、H（色相）を可変とし、S（彩度）とL（輝度）を固定すると調和する色になるというものです。
トーンの共通性を用いた色選びをすると、このようなカラーパレットができました。
コンポーネントに色相の共通性を当てはめてみた
今回紹介した共通性の中でも、色相の共通性（Hを固定、SまたはLのいずれかを可変）を用いてコンポーネントに色を当てはめてみました。
その結果、感覚的に色を選んでいた時よりも、色に統一感をもたせることができたように感じます！
次回予告
次回はトーンの共通性（Hを可変、SとLを固定）を使って色の種類を増やし、コンポーネントの色を増やしてみたことについて共有します！
Discussion