ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析
<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最も平和で、安定していて、寛大で、寛容な色です。それは柔らかさ、静けさ、満足感、優雅さ、歓迎の色です。また、Web ページで最も広く使用されている色の 1 つでもあります。
緑は人間と密接な関係があり、永遠の繁栄を表す自然の色です。生命と希望を表し、若々しい活力に満ちています。緑は平和と安全、発展と活力、快適さと静けさ、リラックスと休息を象徴し、目の疲れを和らげる効果があります。
それ自体が自然や健康に関係する感じがするので、自然や健康に関するサイトでよく使われます。緑色は、企業の広報サイトや教育サイトなどでもよく使用されます。
緑色は私たちの気分を特に明るくしてくれます。黄緑色は、新鮮さ、落ち着き、快適さ、平和、柔らかさ、春、若さ、向上といった心理的な感情を表します。
以下では、緑系の異なる属性を持つ隣接色の色の組み合わせ、同じ色の高純度色と低純度色、対照的な色などに基づいて、さまざまな例の分析を行います。
緑色のウェブページの例: http://www.bacardimojito.com

グリーン分析
上の図の原色と二次色の HSB モード値から、2 つの色は明るさのみ異なり、表示される色相と彩度は同じであることがわかります。純粋な緑は 120 度です。RGB 値の観点から見ると、これらの 2 つの色はさまざまな程度に他の色と混合されているため、純粋な緑からわずかに外れています。緑自体の特性により、ウェブページ全体が安定して快適に見えます。
二次色は明るさだけを下げ、ページに階層感と空間感を与えます。
白いブロックは緑の特徴を最大限に引き出し、視覚的なリズムを高めます。
仕上げのカラーは「仕上げのタッチ」の素晴らしいタッチを完璧に反映しており、非常に魅力的です。ページ全体が突然鮮やかで爽やかになり、ページテーマの表現力を高めます。
結論は
原色と二次色は同じ緑色システムに属し、異なる明るさの変化を通じて徐々に穏やかに変化し、ページの色の重なりをより明確に反映します。数値分析を使用して判断しないと、経験に頼って、2 つの色は明るさだけでなく純度も異なる可能性があると誤解する人もいます。このとき、数値モデルを適切に使用すれば、簡単に正しい結論に至ります。
ページ全体の色は非常に少なく、最大の領域はエメラルドグリーン、2番目の領域は白、3番目の領域はダークグリーンですが、効果は強く目を引くものであり、製品のテーマを十分に表示するという目的を達成しています。
濃い緑色は、人々に豊かさ、健康、成熟、安定、生命、開放感といった心理的な感覚を与えます。
前のページ1 2 次のページ 全文を読む

<<:  dockerでpdflatex環境を設定する方法

>>:  MySQL 権限制御の詳細な説明

推薦する

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

mysql 8.0.19 winx64.zip インストール チュートリアル

この記事は参考までにmysql 8.0.19 winx64.zipのインストールチュートリアルを記録...

ウェブページの読み込み進捗状況バーの詳細な説明(推奨)

(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプル コード

序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

Vueのスロットの詳細な説明

Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...