ノンデザイナーが色を選ぶとき
エンジニアが「管理画面作っておいてよ、デザインはないけど」と言われたときや「自分のウェブサイトを作りたいなあ」と思ったとき、デザイナーではないけど色を選ばないといけない。
しかし、色選びというのはロジカルなデザインの中でもセンスに依存しやすい領域。
「センスには自信がないけれども、ロジックには自信があるからエンジニアをやってるぜ！」という僕のような人間は毎回困ってしまうのである。
しかし、色選びがセンスに依存しやすいとはいえ、ロジックで決められる部分も多くあるので、そのへんについて書いておきたい。
プライマリーカラー（テーマカラー）の色相
実行ボタンやリンクの色としてなど採用されることを考えて、エラーっぽさを感じない（赤以外の）色を選ぶと良い。
Tailwind で言うと Lime から Purple くらいまで。
赤系の色を選んでしまうと、それがテーマカラーとしての赤なのかエラーや警告としての赤なのか混乱してしまう。（YouTube とか苦労してそう）
「オレンジならエラーっぽくない色だし活動的なイメージを出したいときには良いんでは？」と思ってた時期もあったけれども、コントラスト比で困ることが多い らしく、デザインの素人が足を踏み入れて良い領域ではない気がしてきた。
黄色も同様。
セカンダリーカラー
いまだに正解がわからない。
色（色相）を増やすと非デザイナーには管理できないレベルになるので、プライマリーカラーの彩度や明度を変えたもの（Tailwind でいう数字のところを変えたもの）を使うことが多い。
けど、あえてセカンダリーカラーを入れるのならコンプリメンタリー配色（補色）かアナロガス配色（類似色）とかになるの？
誰か教えて！
色相・彩度・明度の変え方
自分で彩度・明度を調整する場合は OKLCH カラースペースを使うと良い。
一昔前は「色というのは色相・明度・彩度の値に共通性を持たせると統一感が出るから、RGB じゃなくて HLS で変えるといいよ」みたいなことが言われていたけれども、HLS で色相だけを変えたとしても色によってはやたら明るく見えたりして、そこから先の調整はセンスの領域だった。
（色相によって感じる明るさが違うのは錐体細胞の仕組みのためらしい）
けれども OKLCH はそのへんの問題を解決してくれている（らしい）。
詳しくはこれらの記事を読んだりググってほしい。
だいたいのブラウザでは OKLCH の値がそのまま使える。
ネックになるのは Safari が 15.4 からのサポートというくらいか。
ピッカーはこれが便利。
これで選んで、あとはブラウザの DevTools で微調整をする。
色相だけ固定値で決めておいて、あとは OKLCH で各色の値を書いておくと、サイトを作っているうちに「今さらだけどプライマリーカラーを変えたい！」となったときにすぐに変られてそれなりの見た目になるので便利。
コントラスト
背景色と文字色のコントラストが高いと文字が読みやすい、けれども高すぎると堅すぎる印象を与えてしまうので、もうちょっとなじませてあげたいなというときには WCAG のコントラスト比が 7 をギリギリ超えるくらいの値にしてあげると、読みやすくなじむコントラストになる。
DevTools でもコントラスト比が見れる。
おまけ
フォントサイズやマージンのサイズのロジカルな選び方についてはこちらを参照されたい。
Discussion