デザイン用にカラーパレットを生成する方法

色は、Webサイト、アプリ、デザインについて人々が最初に気づくものの1つです。よく選ばれたパレットは、結束感のあるプロフェッショナルな見た目を作ります。下手に選ばれたものは、良いコンテンツでさえ違和感を感じさせ、アクセシビリティ問題は何百万人ものユーザーを静かに排除する可能性があります。良い色を選ぶのにデザイナーである必要はありません。色彩理論は信頼できる公式を提供し、それらの公式をアクセシビリティチェックと組み合わせるツールは、使えるパレットを5分の仕事にします。

色彩理論の簡単な歴史

Isaac Newtonは1666年頃に最初のカラーホイールを構築し、線形の虹を自分自身に折り曲げて、可視スペクトルを円にマッピングしました。Johann Wolfgang von Goetheは1810年にTheory of Coloursでアイデアを拡張し、物理的にどう構成されているかよりも、色がどう感じられるかに焦点を当てました。Albert Munsellは1905年に色相、明度、彩度を分離して体系化し、デザイナーに「より暗い赤」対「より彩度の高い赤」のための語彙を与えました。

20世紀は知覚的色空間を加えました。CIE Lab(1976年)は「等しい数値距離は等しい知覚的差を意味する」を実際の目標にした最初のものでした。HSLとHSV(1978年)はプログラマーにより簡単な抽象化を与えました。モダンなWebデザインはOKLCH(2020年)とOKLABに移行しており、これらは知覚的に均一な色空間で、ついに「明度50%」が実際に色相に関わらず50%の明るさに見えるようにします。進歩が重要なのは、パレットジェネレーターが、数値的に関連するだけでなく、色全体で一貫して見える濃淡を生成できるようにするからです。

色のハーモニーモード

ハーモニーモードは、カラーホイール上の色間の関係に基づいています。それぞれが異なる感覚を作ります:

補色: ホイールで互いに直接反対の2色(例: 青とオレンジ、赤と緑)。高コントラスト、エネルギッシュ。目立つ必要のあるコールトゥアクション要素に良いですが、緊張が大きく感じられる可能性があるためまばらに使ってください。

類似色: ホイール上で隣接する3色(例: 青、青緑、緑)。調和的で穏やか。背景、自然をテーマにしたデザイン、すべてが関連していると感じるべきパレットに良い。

トライアド: ホイールの周りに均等に配置された3色(例: 赤、黄、青)。鮮やかでバランスが取れています。遊び心のある、創造的な、または子供向けのデザインに良い。

スプリットコンプリメンタリー: 1つの色と、その補色に隣接する2色。補色に似たコントラストですが緊張が少なく、しばしばインターフェースでより使いやすい。

テトラド(または長方形): 2つの補色ペアとして配置された4色。豊かで多様ですが、バランスが取りにくい。通常、1色が支配し、他はアクセントとして機能します。

正方形: ホイールの周りに均等に配置された4色。最大の多様性、均等な強調。4つのうち3つを小さなアクセントとして保たない限り、うまく使うのが難しい。

モノクロマティック: 単色の異なる濃淡、明度、トーン。つねに調和的で洗練されていますが、使いすぎると視覚的な興味を欠く可能性があります。編集レイアウトとミニマリストブランドシステムに優れています。

アクロマティック: 黒、白、グレーのみ。クラシックな新聞や高コントラスト雑誌の見た目。しばしば1つの明るいアクセントとペアになります。

パレットを生成する手順

1. ハーモニーモードを選ぶ: ランダム、類似色、補色、トライアド、スプリットコンプリメンタリー、テトラド、またはモノクロマティックを選び、色間の関係を設定します。
2. 開始色を選ぶ: ブランドカラーを入力するか、参照画像から色を引くか、ジェネレーターに選ばせます。
3. 好きな色をロック: 保持したい色を見つけたら、ロックして、完全なパレットが一緒に機能するまで他を再生成します。
4. 明度と彩度を調整: ほとんどのジェネレーターは各色の明度と彩度を独立して調整でき、パレットがUI作業に十分な明るさの変動を持つようにします。
5. アクセシビリティチェックを実行: テキスト・背景の組み合わせがWCAG AA(4.5:1)またはAAA(7:1)コントラストを満たすことを検証します。
6. エクスポート: HEXコード、CSS変数、Tailwind設定、ASEスウォッチをコピーするか、パレットをFigma、Sketch、Canvaなどのデザインツール用に画像として保存します。

使えるパレットの構築

パレットは美しい色のセット以上です。実際のプロジェクトには通常、次のものが必要です:

一般的なモダンパターンは、各色に10ステップの明度スケール(50、100、200、...、900)で、手動の調整なしにボタン、ホバー状態、無効状態、ダークモード相当のための十分なニュアンスを提供します。

色空間とそれがパレットに与える影響

生成する空間は色がどう関連するかを形作ります。モダンなパレットツールは切り替えを許可します。

2024年のほとんどのWeb作業には、OKLCHで生成して互換性のためにHEXにエクスポートします。CSSは今やモダンブラウザでoklch()をネイティブに受け入れるため、より豊富な色操作のためにOKLCH値をスタイルシートに直接保持することもできます。

アクセシビリティ、美学だけではない

素晴らしく見えるパレットは、視聴者の一部が読めなければ役に立ちません。3つのチェックがきれいなパレットを包括的なものに変えます。

WCAGコントラスト比は、テキストが背景からどれだけ区別可能かを測定します。標準閾値:

色覚異常シミュレーション: 男性の8%と女性の0.5%が何らかの色覚異常を持ち、最も一般的なのは赤緑です。情報が色だけで伝えられないことを保証するために、パレットをシミュレータ(第二色覚異常、第一色覚異常、第三色覚異常)に通してください。

APCA(Advanced Perceptual Contrast Algorithm)は、WCAG 3.0でWCAGコントラストの候補置き換えです。古い式よりも知覚を良くモデル化し、わずかに異なる背景上のテキストに重要です。WCAG 2.xと並んで第二意見として使ってください。

最高の結果を得るためのヒント

• 1色から始める: 好きなプライマリカラーを選び、ハーモニーモードを使ってそれを補完する色を見つけます。これは5色を独立して選ぼうとするよりも簡単です。
• 実コンテンツでテスト: スウォッチとして見て素晴らしいパレットは、実際のテキスト、ボタン、背景に適用されたときに機能しないかもしれません。つねに実際のUIでテストしてください。
• 明度スケールを生成: 単一の「青」を選ぶのではなく、非常に明るいから非常に暗いまでの10ステップスケールを生成します。明るいステップを背景に、暗いものをテキストに、中間範囲をアクセントに使います。
• 少ない方が多い: 3つのよく選ばれた色のデザインは、7つのデザインよりもプロフェッショナルに見えます。インターフェースのほとんどにニュートラルを使い、大胆な色は重要なものに保持してください。
• 写真から引く: 参照写真からスポイトで色を取り、現実世界に根ざしたパレットを得ます。Coolors、Color Hunt、専用の写真エクストラクターのようなツールが1クリックでこれを行います。
• ダークモードを念頭に置く: 明るいバリアントとダークバリアントを一緒に生成します。白で機能するプライマリカラーは、黒で不快に光るかもしれません。OKLCHでは色相をシフトせずに明度だけを調整できます。
• 理由を保存: 各色がなぜそうなのか(ブランドアラインメント、アクセシビリティ制約、ムード)を文書化します。将来のあなたが現在のあなたに感謝するでしょう。

よくある落とし穴

• HSLで色を選んでHSLでレンダリング: HSLの等しい明度値は、色空間が人間の知覚と一致しないため、不等に見えます。50%明度の黄色は50%明度の青よりずっと明るく見えます。均一な濃淡のためにOKLCHに切り替えてください。
• カラーホイールだけに依存: ホイールは出発点であり、保証ではありません。コミット前にリアルテキストでつねにコントラストをチェックしてください。
• 文化的意味を無視: 赤は中国で幸運を、西洋で警告を意味します。白は西洋で純粋さを、アジアの一部で哀悼を意味します。グローバルに出荷するなら、ローカルに調査してください。
• グレーが多すぎる: 4つまたは5つのニュートラルステップは通常、テキストから微妙なボーダーまですべてをカバーします。12は将来のあなたを含むすべての人を混乱させます。
• 純粋な白の上の純粋な黒: 極端なコントラストは眼の疲労を引き起こす可能性があります。長文の読書には、ほぼ白(#FAFAFA)の上のほぼ黒(#1A1A1A)を使ってください。
• テストされていない組み合わせ: 背景に対してコントラストをパスする色は、他のすべての表面に対して自動的にパスするわけではありません。デザインが実際に生成する各ペアリングをテストしてください。
• 1ページに単一のアクセント: フォーカスを引く1つの大胆なアクセントは良い。注意を引き合う2つのアクセントは悪い。最も重要なコールトゥアクションを選んでください。
• アクセシビリティに失敗するブランドカラー: 会社のロゴは感情的な理由で低コントラストペアリングを使うかもしれません。Webサイトはそうできません。UIにはアクセシブルなバリアントを生成し、ロゴロックアップにはブランドペアリングを予約します。
• リンクと訪問済み状態を忘れる: 両方は本文テキストおよび互いに区別可能である必要があります。3つすべてをテストしてください。
• ジェネレーターにセマンティックカラーを選ばせる: 成功 / 警告 / エラー色には文化的およびアクセシビリティ期待があります。慣習で(緑 / 琥珀 / 赤)を選び、パレットに対して正しく見えることを検証してください。

代替ツールとアプローチ

洗練されたブランド作業には、パレットジェネレーターをコントラストチェッカーと色覚異常シミュレータと組み合わせてください。3つすべてを1か所で行うツールは最も時間を節約します。

プライバシーとパレットジェネレーター

パレットジェネレーターは完全にブラウザ内で動作します。色抽出のためにアップロードする任意のソース画像はFileReader APIで読まれ、オフスクリーンキャンバスでサンプリングされ、色が抽出されると破棄されます。アップロードなし、ロギングなし、構築するパレットはあなたに関連付けられません。未発表のブランド作業、漏洩したムードボード画像、クライアント写真には、そのローカル専用フローがすべてを存在すべきマシン上に保ちます。色を選ぶような日常のタスクには、プライバシーのデフォルトは、何もページを離れない、何も保存されない、何も共有されない、であるべきです。