エメラルドフォグ:森の霧のように消えていくダークグリーンのフローグラデーション
エメラルドフォグは、静かで暗いスタイルです。「フロー」の種類が、ほぼ黒のベースの上にエメラルド、淡いミント、深いフォレストグリーンを運び、「柔らかさ」の 70 が、木々の間に漂う霧のように見えるまでそれらをぼかします。「ビネット」の 40 が端を閉じ込め、何も動かないので、ダークなダッシュボード、金融、サステナビリティのページに、まぶしさのない奥行きをもたらします。
自分好みに仕上げる
霧を晴らして色を増やす
「強度」は既定の 60 です。80 に上げるとミントのハイライトが前に出てきます。40 に下げると、ほぼモノクロームのグリーンブラックになり、グラフや表の邪魔をしません。
四隅を開く
レイアウトでナビゲーションやロゴを四隅に置く場合、「ビネット」の 40 ではそれらが埋もれてしまいます。「ビネット」を 15 まで下げると、その部分が黒に沈まずにグリーンをいくらか保ちます。
よくある質問
ダークモードのインターフェースに適したグラデーション背景の条件は何ですか?
全体の明るさが低いこと、色が 1 つの系統であること、テキストの背後に鋭い形がないことです。エメラルドフォグは、ほぼ黒のベースの上でグリーンにとどまり、「柔らかさ」は 70、「グレイン」はわずか 14 なので、明るいテキストがフレーム全体でコントラストを保ちます。実際の画面に適用する前に、「プロダクト」プレビューで確認してください。
使い方
出発点を選ぶ
ソフトメッシュ、日食の光芒、リソハーフトーンなど 28 のスタイルのいずれかから始めるか、グラデーションの種類と 24 のパレットのいずれかを選びます。
グラデーションを調整する
スケール、ゆがみ、渦巻き、柔らかさを調整し、グレイン、ガラスパネルやガラスタイル、ドット、グリッド、線のオーバーレイ、ブレンドした 2 枚目のレイヤー、ハーフトーンやピクセルソートなどの加工を追加します。アニメーションをオンにして、速度を個別に設定することもできます。
プレビューして使う
ランディングページ、カード、モバイル、新規登録のレイアウトでグラデーションを確認します。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。