今回はトーンの共通性という法則を用いてコンポーネントの色数を増やす方法を学んだので、共有したいと思います！
※前回までにご紹介した内容を一部含んでいるため、まだ見ていない方は以下のおさらいから是非ご確認ください🙌
これまでのおさらい
HexとHSLの違い
第1回の記事では、HSLという色空間を用いることで、感覚ではなく理論立てて色を選べることについて紹介しました。このシリーズでは、色について考える際はHexではなくHSLを用いています！
相性の良い色の組み合わせを作る法則
第2回の記事では、相性の良い色の組み合わせとして、以下のような法則を紹介しました。
- 【共通性の原理】似た要素（色相、トーン）を持つ色の組み合わせは相性が良い
- 【なじみの原理】自然界でよく目にする色の組み合わせは相性が良い
- 【秩序の原理】色空間の中で一定の規則による色の組み合わせは相性が良い
- 【明瞭性の原理】対照性、明確なコントラスト差がある色の組み合わせは相性が良い
前回は共通性の原理に着目し、その中でも色相の共通性（Hを固定、SまたはLを可変）を用いてコンポーネントに色を当てはめてみました。
共通性の原理【トーンの共通性】を用いてボタンコンポーネントの色数を増やす
さっそく、今回のテーマであるトーンの共通性を用いて色を増やし、ボタンコンポーネントの種類を増やしていきます！
トーンの共通性とは、HSLのうち、H（色相）を可変とし、S（彩度）とL（輝度）を固定すると調和する色になるというものです。
この法則を用いた色選びをすると、このようなカラーパレットとボタンができました！
なお、H（色相）を変える際は 【色相環の中で幾何学的な位置関係にある色相】を規則的に選ぶと、より相性の良い色の組み合わせが作れます。
今回選定したボタンの4色も、テトラード配色という色相環の規則性を利用して選んでいます！
選んだ色を塗りで使用したり、線や文字に用いたりすることで、このようにボタンの種類を増やすことができました。
まとめ
HSLという色空間と共通性の原理という色彩理論を一緒に用いることで、感覚ではなく理論立てて色の統一感を作ることができるという学びを、全3回に渡ってご共有しました！
これまで感覚でデザインの色を決めてしまっていた…とお困りの方に、少しでも参考になれば幸いです！
第1回
第2回
株式会社 Squad のテックブログです。採用情報: speakerdeck.com/siva_official/engineer-recruting-deck
Discussion