Divi 4とDivi 5のカラーピッカーを比較します

色は1つの単語が読まれる前にトーンを設定しますが、従来のカラーピッカーにより、真のブランドの一貫性を実現するのが難しくなります。精度の代わりに、多くの場合、推測と極端な近似を取得します。

そのため、Divi 5はそのカラーシステムを完全に再考しました。この投稿では、Divi 4のカラーピッカーと直接比較し、それがどれほど強力で柔軟性があるかを示します。

カラーピッカーを比較しました

それらを並べて置くと、新しいインターフェイスがどれほど強力であるかがすぐにわかります。 Divi 4のカラーピッカーは、おなじみのレインボースペクトルとドラッグから選択のアプローチをよく提供してくれました。

その白い円をドラッグして色を選び、16進コードで作業し、保存された、グローバル、および最近のタブを通して物事を整理します。色見本の小さな白い三角形は、どのものがグローバルな色であるかを教えてくれました。

外観を超えて、Divi 4のカラーピッカーには素晴らしい基盤がありました。魔法の色のツールはかなり賢く、ページの色と最近のピックから引っ張って、実際に一緒に機能するパレットを提案しました。このビートは毎回ゼロから始まります。

Divi 4が制限されました

しかし、すべてが完璧ではなかったわけではありません。すべてがHEXまたはRGBAコードのみを使用しました。青の軽いバージョンを取得することは、推測するか、別のアプリを使用してそれを把握することを意味しました。ブランディングには、メインブランドの色よりも20％暗いまたは40％明るい色が必要な場合、Divi 4はこれを行うことができませんでした。

それぞれの色はそれ自体で生きました。 Divi自体の中で色が互いに関連するスマートカラーシステムを構築することはできませんでした。適切なコントラスト比を構築すると、DIVI以外の手動作業が行われました。

Diviの5つの視覚的な変更とは何ですか

Divi 5は視覚的なカラーピッカーを保持しますが、より多くのオプションを備えた正確なスライダーを追加します（これについてさらに説明します）。グローバルタブは、色を含むDiviの可変システムに直接接続する動的変数アイコンに進化しました。

色見本自体はより賢くなりました。彼らは実際に、あなたが働いている色の種類とそれがあなたのシステムにどのように接続するかをあなたに示します。

あなたが見ているのは、Diviが個々のカラーピッキングからカラーシステムに移動することです。 Divi 4は、「この特定の青が必要です」のために構築されました。 Divi 5は、「ブランドカラーを完全に変更すると、プライマリカラーよりも20％軽量で、自動的に更新される青が必要です。」

インターフェイスが変更されたため、インターフェイスを変更する必要がありました。

Divi 5の新しいカラーピッカー

古いアプローチが最新のデザインワークフローを処理できなかったため、私たちのチームはカラーシステムを再構築しました。この新しいピッカーは、色相、飽和、軽さ（HSL）、相対的な色の関係、およびDivi 5の可変システムとの深い統合を中心にしています。

分離された16進コードを使用する代わりに、接続された色ファミリを構築できるようになり、1つの色を変更すると、関連するすべてのバリエーションが自動的に更新されます。色相、飽和、軽さ、不透明度のための個別のスライダーがあり、正確な調整を行うことができます。インターフェイスは、視覚インジケーターを使用してどのタイプの色を使用しているかを正確に示しています。

カラースウォッチは、それ自体に関する情報を表示するようになりました。色が静的な値、変数、またはHSL変更が適用された相対的な色であるかどうかを確認できます。システムには、知る必要があるすべての色の詳細が表示されます。

新しいシステムが実際にどのように機能するか

相対色はベースカラー変数から始まり、バリエーションを適用できます。プライマリブルー変数を選択し、軽さを20％減らし、「ロイヤルディープブルー」変数として保存します。

Divi 5のHSLカラーピッカーvs Divi 4のカラーピッカー

どちらのシステムも、サイト全体で色を管理するのに役立ちますが、まったく異なる方法で動作します。この違いを理解することで、インターフェイスがそんなに劇的に変化しなければならなかった理由と、新しいアプローチが建物を高速化する理由を説明します。

Divi 4のグローバルな色がどのように機能するか

Divi 4のグローバルな色は、基本的なパレットシステムのように機能しました。ブランドブルーを一度保存してから、その正確な色合いが必要なときはいつでもクリックします。その後、その青を別のものと交換し、サイト全体ですべてのボタン、ヘッダー、バックグラウンドの更新を視聴します。

ほとんどの人は、このように3つまたは4つの主要なブランドの色を設定します。ヘックスコードを介したハンティングや、リンクに＃2E86C1または＃3498DBを使用したかどうかを覚えようとしています。

問題は、あなたが8つのグローバルな色を持っていて、なぜあなたがその特定の灰色の色合いを保存したのか覚えていなかったときに後で起こりました。テキスト用でしたか？境界？背景のオーバーレイ？グローバルな色には、記憶をジョギングするラベルや説明がありませんでした。

Divi 5が変数を設計するために移動した理由

デザイン変数は、単なる色以上のものを処理するようになりました。フォント、間隔番号、画像、およびテキスト文字列はすべて同じトリートメントを取得します。すべてが、異なるパネルの周りに浮かぶ代わりに、1つの変数マネージャーに住んでいます。

各変数は、適切な名前と説明を取得します。 「グローバルカラー3」の代わりに、「ヘッダーテキストグレー」または「微妙な背景オーバーレイ」と呼ぶことができます。 6か月後、あなたはそれが何のためにあるのか正確にわかります。

しかし、ここで物事が面白くなります。変数は互いに参照し、関係を形成できます。プライマリグリーンを基礎として設定します。その緑を取り、その明るさを軽減する「焦げた苔」を作成します。次に、この焦げた苔の色をもたらし、不透明度を15％に低下させる「シャドウ（焦げた苔）」を構築します。

そして、もちろん、プライマリグリーンをオレンジに変更すると、3つのバリエーションはすべて自動的に更新されます。焦げたバージョンは、選択した色よりも明るく少なくなり、それに応じて影が適応します。関係は固執します。

実践の重要な違い

グローバルな色は、複数のスポットで同じ色を持つことを意味しました。変数とは、一緒に適応する色の関係を持つことを意味します。ホバー状態は、ベースカラーに接続されたままです。影の色は、ランダムなグレーとして生きる代わりに、ブランドパレットに関連しています。システムは、追加の作業を行わなくてもこれらの接続を維持しています。

Divi 4 vs Divi 5でカラーシステムをセットアップする

適切なカラーシステムを作成すると、Webサイトがプロフェッショナルに見えるか、ランダムな選択のパッチワークのように見えるかが決まります。両方のDiviバージョンは、色を整理する方法を提供しますが、そのアプローチはこれ以上違いはありません。各バージョンでカラーシステムを構築する方法と、デザインワークフローにとってプロセスが重要な理由は次のとおりです。

Divi 4の色のセットアップ

あなたの色の選択は、訪問者があなたのウェブサイトをどのように体験するかを形作ります。カラー管理Divi 4へのアプローチをご覧ください。

1.グローバルな色を追加します

Divi 4のカラーセットアップは、グローバルなカラーシステムと手動組織に依存していました。任意の要素のカラーオプションに移動することから始めて、「グローバル」タブにナビゲートするか、カラーピッカーの横にあるプラスアイコンをクリックするか、クリックして既存のグローバルカラーを編集してグローバルな色を作成します。インターフェイスを使用すると、ヘックスコードを直接入力したり、視覚ピッカーを使用して色を選択したりできます。

あなたはすでに変換したい色を適用していますか？それを右クリックして、「グローバルに変換」を選択します。これにより、その正確な色がグローバルパレットに追加され、モジュールをスイッチしてグローバルバージョンを使用します。最初からグローバルなものを作るべきだったことに気付いたとき、それは非常に役立ちます。

魔法の色の提案

Divi 4のMagic Color機能は、既存のデザインの選択肢から調整されたパレットを構築します。どの色が一緒に機能するかを推測する代わりに、このツールはあなたがすでに使用しているものに基づいて提案を作成します。

アクティブな色のアイドロッパーの下にある3つのドット（楕円）を探してください。これらのドットをクリックして、カラーパレットの提案をたくさん入手します。 Diviは、あなたがあなたのページや最近のプロジェクトですでに使用した色を見て、一緒に機能するはずの組み合わせを示しています。

2。グローバルな色を適用します

グローバルな色を設定すると、それらを使用することは非常に簡単です。色を適用するモジュールをクリックしてください。次に、[デザイン]タブに移動し、変更する色設定を見つけます。

グローバルなカラーパレットを表示するには、グローバルをクリックしてください。グローバルカラースウォッチをクリックすると、すぐにモジュールに適用されます。

3.グローバルな色の変更

これが物事が面白くなるところです。グローバルな色を変更したい場合は、それを使用するすべてのモジュールを狩る必要はありません。任意の色設定に移動し、グローバルタブをクリックして、編集する色を見つけてください。

Divi 5で色をセットアップします

Divi 5に適切なカラーシステムを構築するには、4つのステップが必要です。このアプローチに従って、わずかに異なるシェードが必要なときはいつでも、色コードを推測する古い方法を打ち負かします。

1.ベースカラー変数を作成します

Design変数マネージャーを開き、既存のプライマリおよびセカンダリカラー変数としてプライマリブランドの色を追加します。また、三次またはアクセントの色などの色を追加することもできます。これらはあなたの基礎の色になります。ベースカラーは、視覚的アイデンティティを定義するメインブランドパレットを表す必要があります。

2。ベースから相対色を構築します

これで、ベースカラーにリンクされたカラーバリエーションを作成できます。デザイン変数マネージャーに新しい色を追加し、ベースカラーを選択します。

HSLスライダーを使用して調整します。テキストの見出しでは、軽さを25％、ボディテキストで20％低くします。ホバー状態で20％を上昇させるか、変化したバックグラウンドの飽和を変化させます。これらのバリエーションに「ディープオレンジ」や「明るい深紅色」、「ホバー状態（プライマリカラー）」、「ミュートされた背景（二次色）」などの名前を明確にします。

すべての設計変数を積み重ねることができるため、作成した色からより多くの色を作成できます。それらはすべてシステムとのつながりを保ちます。

後でベース色を変更すると、これらの関連する色が自動的に更新され、関係がそのまま続きます。

3.要素に変数を適用します

任意の色フィールドの動的コンテンツアイコンを使用して、変数にアクセスします。インターフェイスは、各色が静的、変数、またはHSL変更の相対色であるかどうかを示します。

一貫性を破るランダムな1色の色を作成する代わりに、整理されたカラーシステムから選択します。

ベースまたは構築された色のいずれかのプロパティを変更すると、それらから継承されたものはすべて、新しい変更に自動的に適応します。ブランドの更新を決定したときに、手動で色をスクラブして交換する必要はありません。

4. HSLカラー変数を参照するプリセットの構築

特定のデザインパーツのオプショングループプリセットを使用して戦略を構築します。これらのプリセットは、要素プリセットとは異なります。オプショングループプリセット変数を使用して、背景、境界線、テキスト色などのターゲットスタイルグループ。

プライマリカラーに基づいてシャドウカラー変数を使用して、オプショングループプリセットとして影を保存します。

このプリセットを列、セクション、行、およびモジュールで使用します。

別の色の個別のオプショングループプリセットを作成します。1つはアクセント色の境界用に、もう1つはセカンダリカラーのテキスト用などです。

要素プリセットは、コンテンツやすべてのスタイルを含む完全なモジュールセットアップを保存します。オプショングループプリセットと使用されるカラー変数にスタイルのボタンロックの要素プリセットを作成します。すぐに適用すると、まったく同じボタンが得られます。

5.サイト全体に色を巻きながら

Extend属性機能は、要素間で設計プロパティをコピーできるようにすることでこれをさらに取ります。変数を使用してアイコンの配色を完成させると、これらの属性を、行、ページ、またはサイト全体の他のアイコンに拡張できます。

これにより、色の関係を維持しながら、手動で一貫したスタイリングを広げます。

Divi 5の検索および交換機能は、散在する静的な色で既存のサイトの変換プロセスを速度速く速めます。任意のカラーフィールドを右クリックして、「検索と交換」を選択します。

特定の要素、セクション全体、またはページ全体をターゲットにするようにスコープを設定します。 「交換」の下で、グローバルタブから新しい変数を選択します。 「すべての検出値を交換する」を確認して、その色のすべてのインスタンスを変数に交換します。

これは、古いデザインを新しいカラーシステムに移行するときに完全に機能します。 1つの一貫した変数で、数十秒で類似したが同一ではないオレンジを数十個置き換えることができます。

すべての側面が連携して機能します。色変数を確立し、検索と交換を使用して既存の矛盾をクリーンアップし、拡張属性を使用して、新しいセクションを構築する際に設計基準を維持します。次に、オプショングループと要素プリセットを使用してスタイルを簡単に適用できるため、通常、ページを構築します。

新しいカラーピッカーがワークフローに適合します

Divi 5のカラーシステムは、長年プロジェクトを遅らせてきたワークフローの問題を修正します。外部ツールを使用して適切なシェードを見つける必要はなくなりました。 HSLスライダーは、ビルダーを離れることなく正確なコントロールを提供します。

あなたの色の決定は、設計変数を通じて接続されたままです。プライマリブランドの色を変更すると、関連する色が関係を維持しながら自動的に更新されます。これは、あなたが目で生み出したすべての青いバリエーションを手動で狩ります。

Divi 5の新しいカラーシステムを今日お試しください！