HSLとは何ですか、そしてデザイナーがそれを習得する理由

Colorは、デザイナーのツールキットで最も強力なツールの1つですが、HEXやRGBなどの従来のシステムを操作することで、制限を感じることがあります。これらの形式は機能しますが、実際に色をどのように見たり考えたりする方法を反映していません。明るい色合いが必要ですか、それとも異なる色合いで飽和を一致させたいですか？あなたは推測しています。

そこで、色相、飽和、軽さ（HSL）が入ります。色の調整により視覚的で予測可能になり、Divi 5は相対色とHSL機能リリースのおかげでネイティブにサポートしています。それがどのように機能し、なぜそれを習得したいのかを探りましょう。

ほとんどのデザイナーが色の選択に苦労している理由

カラーツールは、私たちが色について自然に考える方法と一致しないことがよくあります。愛する青の色合いが見えますが、それをキャプチャする唯一の方法は、＃4A90E2のような16進コードを使用することです。それらの文字と数字はあなたの脳にとって何の意味もありません。

ヘックスの色は、赤、緑、青の値を混合することによって作られます。各ペア（4A、90、E2など）は、各色の使用が0から255まで使用されるかを示しています。

ブランドブルーの軽いバージョンが必要なときに変更する数字を把握するのに問題があるかもしれません。すべてのRGB値を均等に増やす必要がありますか？または、1つのRGBチャネル（赤、緑、または青）のみを調整しますか？数字はあなたの目が期待するものと一致しないので、それが正しいと感じるまで調整してプレビューします。

従来のカラーシステムは、さまざまなコンテキストで作業するときに大きな問題を引き起こします。色のバリエーションを作成することは、純粋な推測になります。一緒に機能する5つの色合いが必要ですが、システムはありません。ライトニング＃4A90E2から＃6BA3E8から右に見えるか、洗い流されているように見えるかもしれません。あなたがそれを見るまであなたは知りません。

ヘックスコードを変更してシェードを取得するだけではありません。 ＃4A90E2の明るい色合いを作成するために、左側に新しいHEX値（＃6BA3E8）が慎重に選択されます。右側では、名目上の変更（＃3B99E5）を作成するだけで色が明るくなりませんが、完全に変更します。

このゆっくりとした手動のワークフローは、完了するのに数時間かかります。値を微調整し、プレビューを確認し、設計する代わりにツールと戦うために再度調整します。あなたの注意は、色が人々をどのように感じさせるかに焦点を合わせるべきであるときに技術的な詳細に吸い込まれます。

多くのデザイナーは、プロセスが非常に不格好だと感じるため、色の実験を避けることになります。安全な選択に固執するか、他のサイトからパレットをコピーします。色の創造性を探求するのに役立つツールは、実際にそれを制限します。

静的RGB値の問題

RGBの値は、常にあなたが期待する方法を振る舞うとは限りません。緑は同じ設定で青よりもはるかに明るく見えますが、システムはそれらを等しく扱います。 RGB（128、128、128）は完璧なミディアムグレーですが、見た目は画面、照明、または使用する色プロファイルによって異なる場合があります。

あなたのブランドの色の軽いバージョンが欲しいですか？ RGBの値を上げてみることができます。また、期待したものを手に入れることがあります。それ以外の場合、あなたは洗い流されて奇妙に見えるものを手に入れます。事前に伝える方法はありません。

RGB値を備えたブランドブルーカラーは、 +50 +50で等しく増加し、洗浄された色合いになります。これは、各RGBチャネルに同じ量を追加すると、予測可能またはバランスの取れた色の色合いが常に生じるとは限らないことを示しています。

RGBの色も異なるプログラム間でシフトします。これは、カラープロファイルの違い、エンジンのレンダリング、およびブラウザがそれらの値をどのように解釈するかが原因で発生します。 Photoshopで完璧なシェードを選んで、HEXコードをWebサイトにコピーすると、まだわずかに異なるように見えます。ブランドコードがブラウザやデザインツール間でわずかに異なるように見える場合、ブランドガイドラインは実施が難しくなります。

あなたがそれを明るくしたり暗くしようとすると、それぞれの色が独自の方法で変化します。 RGBは色を均等に調整しないため、一部の色相はより速くフェードしたり、予期しない方法でシフトしたりします。軽さが増加するにつれて、一部の色相は他の色よりも速く飽和します。あなたの赤が活気に満ちたままで、あなたの青は灰色になります。あなたの紫は泥だらけになり、オレンジ色はきれいなままです。

カラーワークは、意図的なデザインではなく、試行錯誤に変わります。

色相、飽和、軽さ（HSL）システムとは何ですか？

色合い、飽和、および軽さ（HSL）は、脳が実際に色について考える方法に合う3つの部分に色を破壊します。色相は、360オプションのホイールからベース色を選択します。飽和は、その色がどのように活気に満ちたり灰色に見えるかを制御します。明るさは、それが暗く、明るい、あるいはその間のどこかであるかどうかを決定します。

「濃い緑が欲しい」と思うとき、あなたはすでにHSLの用語について考えています。あなたは緑（色相）、おそらくかなり豊かな（飽和）、そして暗い側（明るさ）が欲しいことを知っています。

3つのコンポーネントがどのように連携するか

色相は、可視光スペクトルからカットされたカラーホイールのように機能します。端は赤にマゼンタに接続し、あらゆる可能な色の滑らかなループを作成します。完璧なオレンジが欲しいですか？赤（0度）から始めて、約30度に黄色に向かって移動します。

飽和度は、割合として色の純度を測定します。ゼロパーセントはすべての色を削除し、灰色を残します。可能な限り最も鮮やかなバージョンを提供します。飽和をネオンサインとミュートされた水彩画の違いと考えてください。

Wikipediaのグラフィックに触発されたHSL Colorsが同じトピックについてインスピレーションを得た

軽さは、0％（純粋な黒）から50％（ニュートラル）から100％（純白）の範囲です。最も使いやすい色は20％から80％の軽さです。これは、色を明るくまたは暗くすることについて自然に考える方法と一致します。

ページビルダーが通常HSLを避ける理由

ほとんどのページビルダーは、これらのシステムがよりうまく機能するためではなく、実際的な理由で六角コードとRGBに固執しています。ビルダーの開発者は、本当の技術的なハードルに直面しています。ユーザーは、Photoshopやその他のデザインツールのヘックスコードをすでに知っています。カラーシステム間の変換には、追加の処理が必要です。

HSLをサポートするということは、HSLカラーピッカーが完全に釘付けされていない限り、新しいインターフェイスを構築し、なじみのない概念についてユーザーを教育することを意味します。この保守的なアプローチは、たとえそれが創造的な可能性を制限していても、ビジネスの観点から理にかなっています。

Divi 5の新しいHSLコントロールで完璧な色のバリエーションを作成する

HSLは理論的には素晴らしいように聞こえますが、理論はウェブサイトを構築していません。このアプローチをサポートするツールが必要です。ほとんどのページビルダーは、HEXコードとRGBの推測に戻ってきます。 Divi 5は、色での作業方法に関するすべてを変更します。しかし、最初：

Diviとは何ですか？

Diviは、他のWordPressページビルダーとは異なる動作をするページビルダーです。深刻なタイポグラフィコントロールと混合された視覚設計ツールを取得します。ライブエディターは、即座に変更を表示します。フォントのサイズを調整し、線の間隔を微調整し、ページの更新をすぐそこに見てください。

必要な場所に200以上のモジュールをドロップできます。テキストブロック、見出し、特別なコンテンツピースはすべて、うまく一緒に再生されます。

Diviを特別なものにしているのは、実際のビジネス向けに構築された2000+既製のレイアウトです。基本的なスターターテンプレートではなく、実際のデザインについて話しています。あなたのレストランに何かが必要ですか？そのためのレイアウトがあります。写真スタジオを運営していますか？私たちはあなたをカバーしています。コンサルタントとハイテクスタートアップも独自のデザインを手に入れます。

各レイアウトはあなたの業界を知っています。色、間隔、コンテンツの流れはすべて、顧客がどのように考えて閲覧するかについては意味があります。

完全なサイト制御を取得します

テーマビルダーは、サイトのテキストスタイリングのすべての部分を手に入れます。ブランドの言語を話すカスタムヘッダーを構築します。長い記事を読みやすくするブログページを設計します。 404エラーページは、サイトの残りの部分と同じフォントとスタイルを保持できます。

Divi AIは、人工知能をワークフローに直接もたらします。あなたがそれらを書いたように聞こえる見出しを生成します。ブランドの音声に正確に一致する製品コピーを作成します。

それはあなたのビジネスを理解するページセクション全体を構築します。

必要なときにコードスニペットを書き込みます。

Divi AIは、ビルダーの中でも画像を使用して動作します。どの画像で修正する必要があるか、そしてそれがそれらの変更をどのようにするかを説明してください。

オンデマンドで完全に新しい写真を生成することもできます。

Diviクイックサイトで空白ページの問題をスキップします

Diviクイックサイトは、開始前に多くのプロジェクトを停止する空白ページの問題を修正します。プロのスターターサイトには、タイポグラフィが既にセットアップされています。私たちのデザインチームは、これらのテンプレートを他の場所には見ないユニークな画像とアートワークで構築しています。

Divi AIを使用したDiviクイックサイトは、ビジネスの説明に基づいてカスタムレイアウトを構築することもできます。コンサルティングプラクティスやレストランについて教えてください。業界向けの適切なコピーで関連するページを作成します。

これは、単なるワイヤーフレームを超えています。あなたはあなたのビジネスにとって理にかなっている本当の見出し、ボディコピー、画像を取得します。ブランドのフォントと色を前もって設定するか、AIを選択させることができます。

その後、すべてが完全に編集可能なままであるため、タイポグラフィを洗練してビジョンに合わせて調べることができます。

Divi 5の新しいものは何ですか？

Divi 5は、ページビルダーの次のバージョンであり、現在アルファテストで、新しいWebサイトプロジェクトの準備が整っています。私たちは、毎日の仕事をスピードアップし、建物のサイトをより楽しくする実用的な改善に焦点を当てました。

私たちが他のすべてを再建している間、現在のDiviの最高のパーツは置かれたままでした。新鮮なインターフェイスデザインは、フードの下でのパフォーマンスの向上を満たしています。最新のコーディングプラクティスは、システム全体に現在動力を供給しています。
ページは以前よりも速く読み込まれます。コントロールは、クリックするとより速く応答します。タイポグラフィは、追加のマニュアル作業なしに、サイト全体で一貫しています。

ここにいくつかのハイライトがあります：

• 完全なフレームワークの再構築は、古いショートコードシステムをダンプします。すべてが最新のブロックベースのアーキテクチャで実行され、ブラウザははるかに優れています。
• Divi 5のFlexBoxシステムは、カスタムコードなしでアライメント、間隔、ラッピングを簡単に管理し、最新のレスポンシブレイアウトを構築するための直接制御を提供します。
• HSLカラーシステムは、デザイナーの考え方に合ったカラーコントロールをもたらします。 16進コードで推測する代わりに、色相、飽和、軽さを調整します。
• 7つのカスタムブレークポイントは、古い3サイズの制限を置き換えます。あなたのタイポグラフィは、訪問者が使用するすべてのデバイスで完璧に見えます。
• CSS機能内蔵は、Visual Editorで動作します。コードなしで自然にスケーリングするレスポンシブテキストを作成します。
• グローバルデザイン変数は、フォント、色、間隔を1つの場所に保存します。メインの見出しフォントを一度変更します。サイト全体のすべてのH1が自動的に更新されます。
• プリセットベースの設計システムには、個々のモジュールの要素プリセットと、完全なタイポグラフィスタイルのオプショングループプリセットが含まれています。物事を一貫性に保つには、さまざまなモジュールでこれらを使用します。
• 新しいVisual Builderインターフェイスには、ドッキング可能なパネル、タブ付きウィンドウ、キーボードショートカット、パン粉が付いたより良いレイヤービューがあります。ナビゲーションははるかに簡単になります。
• ネストされた行は、複雑なレイアウトのために他の行内に行を置きます。特別なセクションタイプなしで高度なレイアウト配置を構築します。
• モジュールグループは、異なる要素を単一のユニットに組み合わせます。これにより、複雑なテキストレイアウトの管理が容易になり、カスタムモジュールを構築することもできます。
• マルチパネルワークスペースは、最適な場所ならどこでもパネルを移動します。他のデザインのものを調整しながら、タイポグラフィコントロールを開いてください。
• 属性管理コピー、ペースト、リセットのタイポグラフィスタイルは、要素間でタイポグラフィスタイルをリセットします。すべてをコピーする代わりに、特定の属性を選択して転送します。
• Light/Dark Interfaceモードは、長い設計セッション中に眼のひずみを軽減します。
• Canvasスケーリングは、エディターを離れることなく、さまざまな画面サイズでタイポグラフィがどのように見えるかを示しています。

すべてのDIVI 5機能リリースを発見してください

Divi 5でHSLカラーを作成する方法

前述のように、Divi 5はカラーピッカーをゼロから再構築します。新しいインターフェイスは、脳が色について考えているように機能するHSLコントロールのヘックスコードをドロップします。 3つのスライダーが作業を処理します。

• 色相は0〜360度を受け入れ、負の値を包み込みます（たとえば、-60は300になります）。カラーホイールは両端で接続します。ゼロ、360、およびネガティブ360はすべて同じ赤を与えます。補完的な色が必要ですか？出発点から色相を180度に設定します。
• 飽和度は0％から100％になり、色が鮮明に見える方法を制御します。ゼロパーセントはすべての色の強度を取り除き、灰色を残します。 100％が完全な色を与えます。
• 軽さは同じ範囲で動作します。ゼロは黒を作り、100％が白を作り出し、50％はあなたが選んだものの純粋な形を示しています。

コントロールは、ドラッグ中にライブアップデートします。ボタンを適用したり、遅延を更新したりすると、ワークフローが中断されません。

1.グローバルな色から相対色を構築します

相対的な色を使用すると、個々のHSLコンポーネントを微調整することにより、既存のグローバルな色に基づいて新しい色を作成できます。新しい色を追加して、設計変数マネージャーから始めます。

カラーピッカーを使用して、既存のプライマリグローバルカラーと一致するように、ベースカラー（これがブランドカラーになる可能性があります）を設定します。

一次色のシフトを使用して補完的な色を作成して、二次色をセットアップしましょう。軽さが25％に設定されたプライマリカラーを使用してください。

色相や彩度を回って、二次色として新しい色を作成することもできます。

色見本は、一目で重要な情報を示します。何かがデザイン変数を使用しているかどうかを知ることができ、HSLフィルターがベースカラーを変更する方法を確認できます。この視覚的なフィードバックは、あなたの色の関係で何が起こっているのかを理解するのに役立ちます。

同様に、主な色をベースとして使用して、見出しのテキストの色とボディテキストの色の色を作成します。

もちろん、ここでより装飾的な色を作成することができますが、ヘックス、RGB、または名前の名前を手動で入力できます。

2。多層設計変数の関係を管理します

設計変数は、複雑なカラーシステムの上に積み重ねることができます。プライマリに基づいて、焦げたコケなどの追加の装飾的な色を作成できます。次に、焦げたモスの不透明度を減らして影の色を作ります。

これらのネストされた関係は、Divi 5が複雑な色の階層をどのように処理するかを示しています。一次色を調整すると、焦げたモスの色が最初に更新され、影の色をトリガーして更新します。チェーン全体が接続されたままです。

このアプローチは、カラー管理をランダム推測から予測可能なシステムに変えます。あなたのウェブサイトのカラーパレットは、すべての要素にわたって手動で調整することなく調和しています。

3. HSLの色をサイトに適用します

任意のテキストモジュールを押して、カラーピッカーを開きます。保存された変数は、インジケータで表示されます。 [セカンダリカラー]をクリックすると、セクションの背景が記入されます。同じ色がボタン、背景、境界で動作します。

タイポグラフィは、1つの色合いに固執するが、軽さを変えると機能します。見出しは、-25％の軽さで一次色を使用できます。ボディテキストは-15％で少し軽くなります。リンクは-45％です。すべてが関係していますが、明確なままです。

背景には、ブランドの色がトーンダウンされる必要があります。軽さを95％まで押します。飽和度を15％に落とします。今、あなたはコンテンツと戦わないブランドの背景を持っています。ボタンは完全な飽和で動作します。ホバー状態は、軽さをノッチ下に微調整します。同じ色、異なる強度。

ライトテキストには暗い背景が必要です。明るさの数はあなたに何が機能するかを教えてくれます。 50％の軽さのテキストは、背景が軽さの-30％未満のペアです。

明るい背景に暗いテキストがあるセクションは、値を逆にします。同じ色合い、同じ飽和。軽さを交換すると、完了です。そしてもちろん、これらの色はすべて、適用された後でもリンクを維持しています。 1つの変数を変更すると、すべてが適応します。それとして簡単！

4. HSLの色を再利用可能なプリセットとして保存します

モジュールを作成してカラーデザイン変数を適用したら、これらの色を再利用可能なスタイルにプリセットします。 Divi 5は、一緒に機能する2つのプリセットタイプを提供します。

オプショングループプリセットは、すべてのモジュールにわたって特定の設計側面を制御します。見出しのテキストカラーデザイン変数で見出しをスタイリングします。焦げた苔と50％の不透明度を使用して、列に影を追加します。任意のモジュールのオプショングループモジュールアイコンの上にホバリングし、適切にラベルを付け、保存します。

同じことは、背景、間隔、アニメーション、テキストでも機能します。数値設計変数を介して境界半径を追加し、この数値変数を参照するプリセットを設定します。各オプショングループは独自の設計領域を処理し、クロスアップライドできます。つまり、列の境界半径をアクションを呼びかけることに適用できます。

適用するには、適切なオプションに移動し、プリセットを選択します。

要素プリセットは完全なモジュールスタイルを保存します。 80％の軽さで二次色のボタンモジュールをスタイルします。モジュール設定の右上にあるプリセットセレクターをクリックします。 「ブランドカラーボタン」と呼ばれる新しいプリセットを作成します。これにより、HSLの色を含むすべてのボタンの設定が保存されます。

ここで、新しいボタンを追加するときは、このプリセットを適用すると、スタイル全体が継承されます。作業をカットするには、作成したカスタムプリセット（オプショングループまたは要素）を使用して、その横にある星のアイコンをクリックします。そのプリセットは、その要素またはオプショングループのすべての新しいインスタンスのデフォルトになります。

あなたのHSL関係はプリセット内でそのまま残ります。色を更新すると、すべてのモジュールとその色の更新も使用してプリセットされます。明るいセクション、暗いセクション、特別なブランドの瞬間のプリセットライブラリを構築します。 HSL値は、プリセットごとに移動し、プロジェクト全体でカラーシステムを一貫させます。

Divi 5を使用してWebサイト用のカラーシステムを構築します

かつては数日かかりました。ヘックスコードをいじり、プログラム間で値をコピーし、まともなものが見えるように祈ります。

HSLは、再び色を楽しくします。あなたはあなたが愛する色合いを見て、それを再現する方法を正確に知っています。色は色を選択し、飽和が鮮やかであることを制御し、明るさを明るくしたり暗くしたりします。今、ブランドの更新には数時間ではなく数分かかります。

これは実際の設計コントロールです。 Divi 5は今日それを実現します。