ブランドカラーの間に10段階のグラデーションを作成する

1. 2つのブランドカラーを監査する

コンテキストなしで魅力的なエンドポイントを選択するのではなく、確立された2つの色から始めてください。Color Aはブランドのプライマリーカラーである場合があり、Color Bはサポートまたはキャンペーンカラーである可能性があります。それぞれが現在表示される場所と通信する内容を記録します。

ブランドガイドラインが古いPDFにのみ存在し、付随するテキストを処理する必要がある場合、PDF to Word Converterは編集可能なドキュメントを作成できます。変換された値は、変換がカラーコードが現在であるか正しいかを確認しないため、元のブランドファイルと比較する必要があります。

1つのエンドポイントがまだ承認されていない場合は、Color Palette Generatorを使用して、混合演習を開始する前に組み合わせを探索してください。まだ議論されている2つの色の間に詳細なグラデーションを作成しないでください。

この監査は一般的な問題を防ぎます。古いロゴカラー、承認されていないキャンペーン値、または圧縮されたスクリーンショットからコピーされたコードから磨かれたグラデーションを構築します。

2. 有効なHEXエンドポイントを準備する

Color MixerはそのエンドポイントとしてHEX値を使用します。各6桁のHEX値はハッシュシンボルで始まり、赤、緑、青を表すペアが含まれています。たとえば、#2563EBは強い青であり、#E11D48は鮮やかな赤ピンクです。

公式なブランドファイル、デザインシステムライブラリ、またはソースコードから値をコピーします。公式なコードが利用可能な場合は、ロゴスクリーンショットからサンプリングすることを避けてください。イメージ圧縮、表示設定、色管理は、スクリーンショットから収集した値を少し変更できます。

各エンドポイントを白、薄い灰色、チャーコール、黒の背景に配置します。これはまだ完全なグラデーションをテストしていませんが、一般的なコンテキストでエンドポイントが視覚的に弱くなるかどうかを明らかにします。

brand-startとbrand-endなどの一時的な作業用名を付けます。グラデーション方向が後で変更される可能性があるため、「左」と「右」という名前を付けることを避けてください。色はグラデーションが垂直、対角線、または放射状になっても、その識別を保持する必要があります。

3. 10段階のグラデーションを生成する

Color Mixerを開き、Color AとColor Bを入力して、ステップ数を10に設定します。結果を生成し、表示されたすべての値を元の順序で作業ドキュメントにコピーします。

停止に名前を付ける前に、ストリップとして完全な遷移を見てください。それは連続に感じますか、それとも1つの領域が突然ジャンプするように見えますか? 中間は退屈に見えますか? 一方のエンドポイントは他方より視覚的に強いですか?

数学的に均等なシーケンスは常に視覚的に均等に見えるわけではありません。明るい黄色は、混合パーセンテージが均等に分布していても、暗い青よりも明るく、より活発に見える場合があります。認識された明るさ、色相、彩度はすべて、シーケンスの感じ方に影響を与えます。

次の例は、2つのサンプルエンドポイント間に10の値がどのようにドキュメント化されるかを示しています。結果は、選択された色とツールまたはデザインアプリケーションで使用される補間方法によって異なります。

4. 中点と遷移パスを検査する

中点は2つのブランドカラーがどのように相互作用するかを明らかにするため、特別な注意が必要です。青と赤ピンクが混合されると、中心がバイオレットを通して移動する場合があります。他の組み合わせはより予測不可能な結果を生成できます。例えば、補色は、スムーズな中間値を生成する可能性があります。

中点を大きな孤立したスウォッチとしてのみ判断しないでください。隣接する停止の間に配置してから、現実的なコンポーネントでテストしてください。単独では興味のないように見える色は、チャートやイラストで必要な正確な遷移を提供できます。

生成された中点と、デザインソフトウェアでの単純な50パーセント重ねを比較してください。アプリケーションが異なるスペースで色を補間するか、透明度を異なる方法で適用できるため、値は異なる場合があります。最終的な本番環境と一致するワークフローを使用します。

中点を許容、調整可能、または拒否されたようにラベル付けします。濁った場合は、最初にそのスムーズな領域が有用であるかどうかを決定します。抑制された中心は、活発なエンドポイント間に視覚的な休息を提供できます。デザインを弱める場合は、公式なブランドカラーを変更するのではなく、意図的な中間停止を追加することを検討してください。

5. 弱いまたは濁ったストップを削除する

10個の生成されたストップは、10個すべてが永続的なデザイントークンになる必要があることを意味しません。演習は10の値を使用して遷移を見えるようにします。最終的なシステムは、繰り返される問題を解決する色のみを保持する必要があります。

すべての停止を前後の停止と比較してください。通常のコンポーネントサイズで2つの値がほぼ区別できない場合、個別の名前が必要ない場合があります。中間値が彩度を失う場合、それが消音サポートカラーとして機能するか削除されるべきかを決定します。

グレースケールでシーケンスをテストしてください。これは色相の気が散らされずに明るさの進行を明らかにします。複数の隣接する色が同じグレーに崩壊する場合、チャートやデータビジュアライゼーション用に十分な色合い分離を提供しない場合があります。

すべての通常の遷移を「修復」しないでください。2つのブランドカラーを混合する目的は、それらがどのように関連するかを発見することです。時々、正しい結論は、彼らが1つの継続的なグラデーションを形成すべきではないということです。彼らはそれらの間のニュートラル遷移を伴う別の固体色として機能するかもしれません。

6. 予測可能な命名システムを作成する

停止がレビューされた後、安定した名前を割り当てます。最も単純なシステムは、blend-01からblend-10などの位置に従って色に番号を付けます。これはシーケンスを保持しますが、各値をどのように使用する必要があるかは説明しません。

より強いシステムは、生の値をセマンティック役割から分離します。生のトークンは完全な色シーケンスを記録します。セマンティックトークンは、キャンペーン背景、チャート開始、チャート中点、またはイラストアクセントなどの責任に選択された色を接続します。

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

トークンの大きなリストや使用ラベルを保持する場合、Alphabetize Toolは参照リストを並べ替え、誤った重複行を削除できます。グラデーション視覚的な順序を保持する必要があるため、番号付きグラデーションシーケンス自体をアルファベット順にしないでください。

7. 有用なデザイン役割を割り当てる

グラデーションシーケンスは、そのストップを一貫して再利用できるときに価値があります。プロジェクトに基づいて役割を割り当てるのではなく、すべての色に人工的な用途を検索します。

エンドポイントはプライマリーブランドカラーのままである場合があります。中間値は、チャートスケール、イラストシリーズ、進捗インジケーター、またはキャンペーンシステムをサポートする可能性があります。より柔らかい中点は大きな装飾領域として機能でき、より強い停止は重要な統計を強調できます。

シーケンスが区別可能で意味のあるままでない限り、継続的なブランドグラデーションを使用して順序付けられたデータを表すことを避けてください。ユーザーは値の違いを理解できる必要があります。グラデーションが装飾的な場合、より自由があります。情報を伝えると、明確さが優先されます。

8. グラデーション方向とタイポグラフィをテストする

方向が変わるときに同じ色が異なる印象を作成できます。水平グラデーションはページ全体の移動を示唆する可能性があります。垂直グラデーションは深さを作成できます。対角方向はより活発に感じることが多く、放射状グラデーションは中心点に注意を引き付けます。

Figmaの公式ガイドからグラデーションを埋め込みまたはストロークとして使用する方法は、線形、放射状、角度、およびダイアモンドグラデーションタイプを説明しています。複数のタイプをテストしますが、最も視覚的に劇的なオプションではなく、構成をサポートするバージョンを選択してください。

グラデーションに実際の見出し、段落、ボタンを追加します。複数の位置でグラデーション上の白、チャーコール、および他の承認されたテキストカラーをテストします。テキストカラーはColor Aで読みやすくなり、背景がColor Bに近づくにつれて失敗する可能性があります。

装飾的なテキスト実験はFancy Text Generatorで探索できますが、Unicode形式のテキストは重要なヘッディング、ナビゲーション、またはアクセス可能なウェブコンテンツで適切なタイポグラフィを置き換えるべきではありません。限定的な創造的な探索のみに使用し、最終的なメッセージを読みやすく保ちます。

単一のテキストカラーがグラデーション全体で機能できない場合、単語から単語へテキストカラーを変更し続けないでください。固体パネルを追加し、コンテンツの位置を変更するか、グラデーションを重要なテキストなしの領域に予約します。

9. CSSでグラデーションを実装する

方向とストップが承認されたら、CSSを使用してウェブバージョンを作成します。MDNは、linear-gradient()をCSS関数として定義し、直線に沿って2つ以上の色間の段階的な遷移を生成します。

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

固体background-colorはフォールバックを提供します。選択されたグラデーションストップは、すべての10の値を自動的に追加するのではなく、意図的に配置されます。CSSでより少ないストップを使用しても、10段階の探索が無効になりません。それは、レビュープロセスが最終的な効果に必要な値を特定したことを示します。

CSS-Tricksは、方向、色ストップ、放射状グラデーション、グラデーションの繰り返し、および関連する実装パターンをカバーする詳細なCSSグラデーションガイドを提供します。

プロジェクトに関連するブラウザーとデバイスで実装をテストします。ライブCSS結果と承認されたデザインファイルを比較します。表示設定、色プロファイル、ブラウザーレンダリング、エクスポート方法のため、わずかな違いが表示される可能性があります。

10. システムをテスト、ドキュメント、エクスポートする

グラデーションは1つのモニターで魅力的に見えるときに完成していません。大きなサイズと小さなサイズで、テキストの有無にかかわらず、薄暗い周囲のサーフェスと暗いサーフェス上で、低品質のディスプレイでテストします。

見える帯状、弱い対比、予期しない濁った領域、エンドポイントとは無関係に見える中間色を探します。また、ソーシャルプラットフォームとプレゼンテーションソフトウェアがライブCSS背景とは異なる方法で圧縮または処理する可能性があるため、静的エクスポート画像をテストします。

2つのエンドポイント、すべての10個の生成されたストップ、保持された本番停止、意図した方向、承認された用途、および禁止された用途を含む1ページのグラデーション仕様を作成します。実際のタイポグラフィとコンポーネントコンテンツでグラデーションを示す例を追加します。

各仕様ページがJPGとして準備されている場合、JPG to PDF Converterはそれらを1つの順序付けられたドキュメントに組み合わせることができます。エクスポートされたPDFを開き、クライアントまたは開発チームと共有する前に、元のデザインと色を比較します。