ウェブページのカラーマッチングスキルについての簡単な説明(フロントエンド開発者必読)

ウェブページのカラーマッチングスキルについての簡単な説明(フロントエンド開発者必読)
一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチして、自然で快適な外観にする必要があります。Web ページ作成の初心者は、ページの背景にいくつかの美しい画像を使用することに慣れているかもしれません。ただし、大規模な商用 Web サイトを閲覧すると、Web ページをエレガントで寛大で温かみのある外観にするために、白、青、黄色などがより多く使用されていることがわかります。さらに重要なのは、閲覧者が Web ページを開く速度が大幅に向上することです。

一般的に、Web ページの背景色は柔らかく、シンプルで、明るい色にし、暗い色のテキストと組み合わせると、自然で快適な印象を与えることができます。印象的な視覚効果を得るには、タイトルに暗い色を使用します。以下は、Web ページを作成するとき、および他の人の Web ページを閲覧するときに、Web ページの背景色とテキスト色のマッチングに関して私が蓄積した経験です。これらの色は、テキストの背景色またはタイトルの背景色として使用できます。異なるフォントと組み合わせると、間違いなく良い効果が得られます。Web ページを作成するときに、皆さんに役立つことを願っています。

BgcolorΚ″#F1FAFA″——テキストに適した背景色、エレガント
BgcolorΚ″#E8FFE8″———タイトルの背景色として使用するのが良いでしょう
BgcolorΚ″#E8E8FF″———テキストの背景色として使用し、テキストの色は黒と一致させることをお勧めします。
BgcolorΚ″#8080C0″——黄色と白のテキストを合わせるのが良いでしょう
BgcolorΚ″#E8D098″——できればライトブルーまたはブルーのテキスト
BgcolorΚ″#EFEFDA″ ———ライトブルーや赤のテキストと合わせると良いでしょう
BgcolorΚ″#F2F1D7″——黒の文字でエレガントに、赤で目を引く
BgcolorΚ″#336699″——白いテキストの方が見栄えが良い
BgcolorΚ″#6699CC″——白いテキストの方が見栄えがよく、タイトルとしても使用できます
BgcolorΚ″#66CCCC″——白いテキストの方が見栄えがよく、タイトルとしても使用できます
BgcolorΚ″#B45B3E″——白いテキストの方が見栄えがよく、タイトルとしても使用できます
BgcolorΚ″#479AC7″——白いテキストの方が見栄えがよく、タイトルとしても使用できます
BgcolorΚ″#00B271″——白いテキストの方が見栄えがよく、タイトルとして使用できます
BgcolorΚ″#FBFBEA″———黒のテキストの方が見栄えがよく、通常は本文テキストとして使用されます
BgcolorΚ″#D5F3F4″——黒のテキストの方が見栄えがよく、通常はメインテキストとして使用されます
BgcolorΚ″#D7FFF0″——黒のテキストの方が見栄えがよく、通常はメインテキストとして使用されます
BgcolorΚ″#F0DAD2″——黒のテキストの方が見栄えがよく、通常はメインテキストとして使用されます
BgcolorΚ″#DDF3FF″——黒のテキストの方が見栄えがよく、通常は本文テキストとして使用されます

明るい緑色の背景に黒い文字、または白い背景に青い文字はどちらも目を引くものですが、前者は背景を強調し、後者は文字を強調します。赤い背景に白いテキスト、暗い背景に黄色のテキストは非常に効果的です。
この記事は単なる出発点にすぎません。想像力を駆使して、より革新的で目を引く色を組み合わせて、Web ページをより魅力的にすることができます。

今日、インターネットは私たちの生活にますます近づき、インターネットサーフィンは徐々に私たちの生活に欠かせないものになってきています。インターネットの世界は多彩で、優れた美しいウェブページが数多く登場しています。大量のオンライン情報は、テキスト、画像、Flash アニメーションなどを通じて表示されます。その中でも、テキストは Web ページで最も重要なデザイン要素です。 Webデザイン初心者にとって、Webデザインにおけるテキストレイアウトデザインを理解し、習得することは特に重要です。以下に著者の個人的な意見を述べたいと思います。
テキストの書式設定

フォントサイズ、フォント、行間隔

フォント サイズは、ポイントやピクセルなど、さまざまな方法で計算できます。ピクセル技術に基づいて印刷する場合、単位をポイントに変換する必要があるため、単位としてポイントを使用することをお勧めします。
ウェブページの本文を表示するのに最適なフォントサイズは約 12 ポンドです。現在、多くの総合的なウェブサイトでは、1 ページに多くのコンテンツを配置する必要があるため、通常 9 ポンドのフォントサイズを使用しています。見出しや強調が必要なその他の領域には大きいフォントを使用し、フッターや補助情報には小さいフォントを使用できます。フォントサイズを小さくすると、誠実さと洗練さを感じやすくなりますが、読みやすさは劣ることに注意してください。
Web デザイナーはフォントを使用することで、デザインで伝えたい感情をより完全に表現できます。フォントの選択は感情的かつ直感的な行為です。ただし、どのフォントを選択する場合でも、Web ページの全体的なコンセプトと閲覧者のニーズに基づいて選択する必要があります。たとえば、太字のフォントは力強くてパワフルで、男性的な特徴があり、機械、建築業界などのコンテンツに適しています。一方、細字のフォントは優雅で繊細で、女性的な特徴があり、衣料品、化粧品、食品などの業界のコンテンツに適しています。同じページ上で、フォントの種類が少ないと、レイアウトはエレガントで安定し、フォントの種類が多いと、レイアウトは生き生きとしてカラフルになります。この比例関係をページ内容に基づいてどのように把握するかが鍵となります。

プラットフォームの独立性を高める観点から、テキスト コンテンツには既定のフォントを使用するのが最適です。ブラウザはページ コンテンツを表示するためにローカル マシン上のフォント ライブラリを使用するためです。 Web デザイナーとしては、ほとんどの閲覧者のマシンには 3 種類のフォントとそれに対応する特殊フォントしかインストールされていないことを考慮する必要があります。ただし、指定したフォントが閲覧者のマシン上に見つからない場合があり、Web デザインに大きな制限が生じます。この問題の解決策は、特別なフォントを使用する必要がある場合は、テキストを画像にしてページに挿入することです。

行間隔の変化もテキストの読みやすさに大きな影響を与える可能性があります。一般的に、本文ではフォントサイズに近い行間隔設定の方が適しています。通常の行間隔の比率は 10:12 です。つまり、フォント サイズが 10 ポイントの場合、行間隔は 12 ポイントになります。これは主に、適切な行間隔によって、見る人の目を誘導するための明確な水平方向の空白帯が形成されますが、行間隔が広すぎると、テキスト行の連続性が失われるという考慮事項によるものです。

読みやすさへの影響に加え、行間隔自体も非常に表現力豊かなデザイン言語です。レイアウトの装飾効果を高めるために、行間隔を意識的に広げたり狭めたりして、独特の美的関心を反映させることができます。たとえば、行間を広くすると、リラックスした快適な雰囲気を表現でき、娯楽性や叙情性に富んだ内容に適しています。さらに、慎重な配置により、広い行間隔と狭い行間隔を共存させることで、空間の階層性とレイアウトの柔軟性を高め、独特の創意工夫を発揮します。

行間隔は line-height プロパティを使用して設定できます。デフォルトの行の高さのポイントまたはパーセンテージを使用することをお勧めします。たとえば、{line-height: 20pt}、{line-height: 150%} などです。

テキストの全体的なレイアウト

ページの本体は、多数の単語が一緒に配置されたグループです。ページ全体のレイアウトにおいて、このグループ形状の役割を十分に活用する必要があります。芸術的な観点から見ると、フォントはそれ自体が芸術形式であり、人の性格や感情に大きな影響を与えると言えます。 Web デザインでは、フォントの扱いは、色、タイポグラフィ、グラフィックなどの他のデザイン要素の扱いと同じくらい重要です。ある意味では、すべてのデザイン要素はグラフィックとして理解できます。

1.テキストのグラフィック化

フォントには 2 つの機能があります。1 つは文字の意味とセマンティクスを実現することであり、もう 1 つは美的効果です。いわゆるテキストのグラフィックスは、象徴的なテキストをグラフィック要素として表現しながら、その本来の機能を強化し、美的効果を強調します。 Web デザイナーとして、従来の方法でフォントを設定することも、芸術的な方法でフォントをデザインすることもできます。いずれにせよ、すべてはデザイン目標をより良く達成する方法を中心に展開される必要があります。
テキストをグラフィックや画像に変換し、深いデザインのアイデアをより創造的な形で表現することで、Web ページの単調さや退屈さを克服し、人々の心に触れることができます。

2.テキストのオーバーレイ

テキストと画像、またはテキストとテキストを重ね合わせると、空間感、跳躍感、透明感、ノイズ感、物語感が生まれ、ページ上でアクティブで目を引く要素になります。重ね合わせのテクニックはテキストの読みやすさに影響しますが、ページ上に独特の視覚効果を生み出すことができます。読みやすさを追求するのではなく、あえて「ノイズ」を追求するこの表現方法は、芸術的な潮流を体現している。そのため、従来のレイアウト設計で広く使用されているだけでなく、Web デザインでも広く採用されています。

3.タイトルとテキスト

タイトルとテキストを配置するときは、まずテキストを 2 列、3 列、または 4 列に配置することを検討してから、タイトルを配置します。メインテキストは、ページ上のスペースと柔軟性を確保するために列に分割され、フルカラムページの退屈さとタイトル挿入の単調さを回避します。タイトルは段落全体または記事全体のタイトルですが、必ずしも段落の先頭に配置されるわけではありません。中央揃え、水平、垂直、横置きが可能で、単語のグループに直接挿入して、斬新なレイアウトで古いルールを破ることもできます。

4.テキスト配置の4つの基本的な形式

ページの本体は、多数の単語が一緒に配置されたグループです。ページ全体のレイアウトにおいて、このグループ形状の役割を十分に活用する必要があります。
両端が均一: テキストの左から右までの長さが均一で、文字グループが正方形の表面を形成し、正確で厳密かつ美しく見えます。
中央揃え:文字間隔が均等な場合、ページの中心を軸にして文字を配置します。このレイアウトにより、文字がより目立つようになり、対称的な形式美が生まれます。
左揃えまたは右揃え: 左揃えまたは右揃えにすると、行の始まりまたは終わりが自然に明確な垂直線を形成し、グラフィックと合わせやすくなります。このアレンジは、ゆるやかでありながらタイト、仮想でありながら現実、跳躍的でありながら流れるような、リズムと韻律の形式的な美しさを生み出しています。左揃えは人々の読書習慣に合っており、自然に見えます。右揃えは読書習慣に合っていないためあまり使用されませんが、斬新に見えます。
画像の周囲に配置: 画像の端の周りにテキストを配置します。背景地図をテキストに挿入すると、調和がとれ、自然な感じになります。

テキストの強調

1.行頭の強調<br />テキストの最初の単語または文字を拡大して装飾し、段落の先頭に埋め込むことを、従来のメディアレイアウトデザインでは「ドロップ」と呼びます。この技術の発明は中世ヨーロッパの写本写本作家にまで遡ります。 注目を集めたり、装飾したり、レイアウトを活性化したりできるため、Web ページのテキストレイアウトに使用されます。ドロップ量は、テキストの行全体の上限と下限の範囲に及ぶ必要があります。どの程度拡大するかは、Web ページの環境によって異なります。
2.引用の強調<br />Web ページのテキストをフォーマットするときに、要約テキスト、つまり引用に遭遇することがよくあります。引用は段落、章、またはテキスト全体の主なアイデアを要約したものなので、強調するためにレイアウト内で特別なページ位置とスペースを与える必要があります。引用文の配置には、本文の左や右、上、下、中央などに埋め込むなどさまざまな方法があり、フォントやフォントサイズを変えることで本文と区別することもできます。
3.個々の単語の強調<br />個々の単語をページの焦点として使用する場合、単語がページ全体の中で目立ち、目を引くように、太字、枠線、下線、指示記号の追加、フォントの斜体化などの手段で単語の視覚効果を意識的に強化することができます。さらに、特定のテキストの色を変更することで、テキストのその部分を強調することもできます。これらの方法はすべて、実際にコントラストの法則を利用しています。

テキストの色

Web デザインでは、デザイナーはテキスト、テキスト リンク、訪問済みリンク、現在アクティブなリンクにさまざまな色を選択できます。たとえば、FrontPage エディタを使用する場合、デフォルトの設定は次のようになります。通常のフォントの色は黒、デフォルトのリンクの色は青で、マウスをクリックすると紫に変わります。異なる色のテキストを使用すると、強調したい部分がより目を引くようになりますが、テキストの色は少量のみ使用する必要があることに注意してください。すべてを強調したい場合、実際には何も強調していません。さらに、特別なデザイン目的がない限り、ページ上で色を使いすぎると、閲覧者がページ コンテンツを読み取るのに影響します。

色の使用は、テキスト全体の特定の部分を強調するだけでなく、コピー全体の感情表現にも影響を与えます。これには色の感情的な象徴性が関係しますが、スペースの制限があるため、ここでは詳しくは説明しません。

注目すべきもう 1 つの点は、テキストの色のコントラストです。これには、明るさのコントラスト、純度のコントラスト、寒色と暖色のコントラストが含まれます。これらはテキストの読みやすさに影響するだけでなく、さらに重要なことに、色の使用を通じて、望ましいデザイン効果、デザインの感情、デザインのアイデアを実現できます。

1. 色処理

色は人間の視覚にとって最も敏感なものです。ホームページのカラー処理が適切であれば、半分の労力で 2 倍の結果を達成することができ、さらに魅力的になります。色彩の適用の一般的な原則は「全体の調和、局所的なコントラスト」です。つまり、ホームページの全体的な色彩効果は調和がとれていて、局所的かつ小さな領域にのみ強い色彩コントラストを持たせることができます。色を使用する場合は、ホームページのコンテンツのニーズに応じて異なるメインカラーを使用できます。色には象徴的な意味があるため、たとえば、薄緑、エメラルドグリーン、黄金色、灰茶色はそれぞれ春、夏、秋、冬を象徴します。第二に、軍隊や警察にはオリーブグリーン、医療やヘルスケアには白など、職業の象徴的な色があります。色には、冷たい感じや暖かい感じ、前進や後退の効果など、明らかな心理的感情もあります。また、色にも国民性があり、環境、文化、伝統などの影響を受けて、民族によって色の好みは大きく異なります。これらの色彩特性を最大限に活用することで、ホームページに深い芸術的意味合いを与え、ホームページの文化的趣向を高めることができます。よく使用される配色を以下に示します。

1. 暖色系。つまり、赤、オレンジ、黄色、黄土色などの組み合わせです。この色調を使用すると、ホームページに暖かく、優しく、熱狂的な雰囲気を与えることができます。

2. クールな色。つまり、シアン、緑、紫などの色の組み合わせです。この色調を使用すると、ホームページは穏やかでクール、そしてエレガントな雰囲気を演出できます。

3. 対照的な色調。つまり、全く反対の色を同じ空間に配置することです。たとえば、赤と緑、黄色と紫、オレンジと青などです。この色の組み合わせは強い視覚効果を生み出し、人々に明るく鮮やかで楽しい気分を与えます。もちろん、対照的な色を適切に使用しないと、逆の効果が生じ、安っぽく、ぎらぎらした、望ましくない効果が生じます。これには、「大調和、小対照」という重要な原則を把握する必要があります。つまり、全体的な色調は統一され調和している必要がありますが、局所的には小さな強い対照があってもかまいません。

最後に、ホームページの背景色の深さと明るさも考慮する必要があります。ここでは、写真用語を借りて「ハイキー」と「ローキー」と呼びます。明るい背景はハイキーと呼ばれ、暗い背景はローキーと呼ばれます。背景色が暗い場合は、テキストの色を明るくして、暗い背景で明るいコンテンツ (テキストまたは画像) を引き立てます。逆に、背景色が明るい場合は、テキストの色を暗くして、明るい背景で暗いコンテンツ (テキストまたは画像) を引き立てます。この色合いの変化は、色彩科学では「明度変化」と呼ばれます。ホームページの中には背景が黒なのに、文字も暗い色で書かれているものがあります。色の明るさが近いため、読むときに目が疲れてしまい、読書効果に影響を及ぼします。もちろん、色の明るさはあまり変えてはいけません。そうしないと、画面上の明るさのコントラストが強くなりすぎて、読者の目が耐えられなくなってしまいます。

ウェブページのカラーマッチング

ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユーザーにとって色合わせは頭の痛い問題です。 Web ページの背景、テキスト、アイコン、境界線、ハイパーリンクなどにどのような色を使用すればよいでしょうか。また、意図した意味合いを最もよく表現するには、どのような色を組み合わせるべきでしょうか。 Ajie はここで彼の経験のいくつかを共有し、それが皆さんのインスピレーションとなることを願っております。

まず、色に関する基本的な知識を学びましょう。

1. 色は光の屈折によって生じます。

2. 赤、黄、青は三原色であり、この三色に他の色を混ぜることができます。ウェブページのHTML言語における色表現は、この3色の数値で表されます。例えば、赤は(255,0,0)色で、16進数で表すと(FF0000)、白は(FFFFFF)となります。よく見かける「bgColor=#FFFFFF」は背景色が白であることを意味します。

3. 色は、無色と色の 2 つのカテゴリに分けられます。無色とは、黒、白、グレーのシステムカラーを指します。色とは、無色を除くすべての色を指します。

4. どの色にも、彩度と透明度という特性があります。特性の変化によって異なる色相が生成されるため、少なくとも数百万の色が生成できます。

Web ページを作成するときは、カラーを使用する方が良いですか、それともカラーを使用しない方が良いですか?専門の研究機関が行った調査によると、色の記憶効果は白黒の3.5倍だそうです。つまり、一般的に、カラーページは完全な白黒ページよりも魅力的です。

私たちの通常のやり方は、メインコンテンツのテキストには無色(黒)を使用し、境界線、背景、画像には色を使用することです。こうすることで、ページ全体が単調にならず、メインコンテンツが目まぐるしくなりません。

●色合わせなし

黒と白は最も基本的でシンプルな組み合わせです。黒い背景に白い文字、または黒い背景に白い文字は、どちらも非常に明瞭で際立っています。 グレーはどんな色とも合わせられる万能な色であり、相反する 2 つの色を調和的に変化させるのにも役立ちます。本当に適切な色が見つからない場合は、グレーを試してみてください。効果は間違いなく悪くないでしょう。

●色の組み合わせ

色は常に変化しており、色の組み合わせが私たちの研究の焦点となっています。色についてはまだもう少し学ぶ必要があります。

1. カラーホイール。 「赤→黄→緑→青→赤」と順番に色を変えていくことで、カラーリングが得られます。色相環の両端は暖色と寒色、中央は中間色です。 (下図参照)

赤、オレンジ、オレンジイエロー、黄色、黄緑、緑、シアン、青緑、青、青紫、紫、紫赤、赤

|____________| |____| |_________| |_________| | | | |

暖色系ニュートラルカラー寒色系ニュートラルカラー

2. 色彩の心理的感覚。色によって見る人に与える心理的感情も異なります。

赤は刺激的な色です。刺激効果により、人々は衝動的、怒りっぽい、熱狂的、活発な気分になることがあります。

緑---寒色と暖色の間の色で、調和、静けさ、健康、安心感を伝えます。 ゴールドとライトホワイトを組み合わせると、エレガントで快適な雰囲気を演出できます。

オレンジは、明るく、陽気で、暖かく、居心地がよく、ファッショナブルな効果を持つ、刺激的な色でもあります。

黄色---幸福、希望、知恵、明るい性格を表し、最も明るい色です。

青は最もクールで、最も新鮮で、最もプロフェッショナルな色です。白と混ぜると、柔らかくエレガントでロマンチックな雰囲気を醸し出します(空の色のように:)

白---白さ、明るさ、純粋さ、清潔感を感じます。

黒---深み、神秘、静寂、悲しみ、憂鬱といった印象を与えます。

灰色---節度、平凡さ、優しさ、謙虚さ、中立性、優雅さを表します。

各色の彩度や透明度を少し変えるだけで、違った印象になります。緑を例にとると、黄緑は若々しく活発な視覚的イメージを持ち、青緑は静かで深みのある印象を与えます。

●Webページのカラーマッチングの原則

1. 色の鮮やかさ。 Web ページの色は明るく目を引くものでなければなりません。

2. 色の独自性。人々に強い印象を与える特徴的な色を持ちましょう。 (デザイン思考第2回WebサイトCIの標準色に関する項を参照)

3. 色の適合性。つまり、表現するコンテンツの雰囲気に合った色を選ぶ必要があります。たとえば、ピンクは女性サイトの柔軟性を反映するために使用されます。

4. 色の連想的な性質。色によって連想されるイメージは異なります。青は空を、黒は夜を、赤は楽しいイベントなどを連想させます。選択する色は、Web ページのコンテンツに関連したものにする必要があります。

●Webページの色をマスターするプロセス

ウェブページ制作の経験を積むにつれて、色使いはモノクロ→カラフル→標準色→モノクロという傾向になってきました。当初は、技術と知識が不足していたため、単色のシンプルなウェブページしか作成できませんでした。ある程度の基礎と材料が揃った後、人々は美しいウェブページを作ろうと望み、集めた最高の写真と最も満足のいく色をページに積み重ねました。しかし、長い時間が経つと、色が乱雑で個性とスタイルがないことに気づきました。3回目のウェブサイトの再配置では、自分に合った色を選択し、立ち上げたサイトはより成功することが多くなりました。最終的なデザインコンセプトとテクノロジーがピークに達したとき、彼らはシンプルさに戻り、単色または無色を使用してシンプルで精巧なサイトを設計しました。

○Webカラーマッチングスキル

この記事のこの時点で、心配しているネットユーザーの中には、「どんな色の組み合わせが似合うの? いくつかカラースキームをお勧めしてもらえますか?」と尋ねる人もいるかもしれません。心配しないでください。すぐにカラーマスターになるためのヒントをいくつかご紹介します :)

1. 1色だけ使用します。ここでは、まず色を選択し、次に透明度または彩度を調整して(簡単に言えば、色を明るくしたり暗くしたりして)、Web ページで使用する新しい色を作成することを意味します。このようなページは色が統一されていて、階層感があります。

2. 2色を使用します。まず色を選択し、次にその対照的な色を選択します (Photoshop では Ctrl + Shift + I を押します)。これが私のホームページの青と黄色の色を決定した方法です。ページ全体がカラフルですが、過度にカラフルではありません。

3. 配色を使用します。簡単に言えば、ライトブルー、ライトイエロー、ライトグリーン、またはカーキ、アースグレー、アースブルーなど、感情を反映する色を使用することです。色の決め方は人それぞれですが、私はPhotoshopで前景色のボックスをクリックし、表示されるカラーピッカーウィンドウで「カスタム」を選択し、「カラーライブラリ」で選択します:)

4. 黒と1色を使用します。たとえば、黒い枠線の付いた明るい赤のフォントは、非常に「飛び飛び」に見えます。

Web ページのカラー マッチングでは、次のことはタブーです。

1. すべての色を使用するのではなく、3 色までに制限します。

2. 背景と前のテキストのコントラストは、メインのテキストコンテンツを強調するために、できるだけ大きくする必要があります(背景に複雑なパターンを使用しないでください)。

カラーマッチング

1. 赤は温かみのある色彩感覚と、強い外向的な性格を持ち、人々に非常に刺激を与える色です。赤は人の注意を引きやすく、興奮、動揺、神経質、衝動的な感情を引き起こす可能性があり、視覚疲労を引き起こしやすい色でもあります。

a) 赤に少量の黄色を加えると、赤はより熱くなり、興奮し、落ち着きがなくなります。

b) 赤に少量の青を加えると、赤の熱さが抑えられ、より上品で柔らかい色になります。

c) 赤に少量の黒を加えると、落ち着いた、重厚でシンプルな色になります。

d) 赤に少量の白を加えると、赤の性格はより穏やかになり、控えめで内気で繊細な傾向があります。

2. 黄色の性格は冷たく、傲慢で、敏感で、拡張性と落ち着きのなさという視覚的な印象を与えます。黄色はあらゆる色の中で最も繊細な色です。純粋な黄色に他の色を少し混ぜるだけで、色相や色の特徴は大きく変わります。

a) 黄色に少量の青を加えると、鮮やかな緑色に変わります。傲慢な性格も消えて、穏やかでしっとりとした感じになります。

b) 黄色に少量の赤を加えると、はっきりとしたオレンジ感が生まれ、その性格は冷たくて傲慢なものから、落ち着いた熱意と温かさに変わります。

c) 黄色に少量の黒を加えると、色の知覚と色特性に最大の変化が生じ、はっきりとしたオリーブグリーンを伴う複雑な色の印象が生まれます。色も性格も大人っぽくおとなしくなっていきます。

d) 黄色に少量の白を加えると色が柔らかくなり、冷たさや傲慢さが薄れて、より繊細で親しみやすい色になります。

3. 青色は冷たく、性格は単純で内向的であり、人の心を落ち着かせるのに役立つ色です。青のシンプルさと内向的な性格は、活動的な性格と強い拡張力を持つ色に深く広く平和な空間を提供し、活動的な色を引き立てる友好的で謙虚な友人になります。青は薄められた後でも強い個性を保っているような色でもあります。青に赤、黄、黒、オレンジ、白などの色を少量加えても、青の性質に大きな影響はありません

a) オレンジに黄色が多く含まれる場合、その特徴は甘く、明るく、香りがよい傾向があります。

b) オレンジ色に少量の白を混ぜると、オレンジ色が不安で弱々しい印象を与えることがあります。

4. 緑は黄色と青の 2 つの要素を含む色です。緑では、黄色の膨張と青の収縮がバランスをとっており、黄色の暖かさと青の冷たさが相殺されています。これにより、緑のキャラクターは最も平和で安定したものになります。柔らかく、穏やかで、平和で美しい色です。

a) 緑に黄色が多い場合、その性格は活発で、友好的で、子供っぽい傾向があります。

b) 緑に少量の黒を加えると、より荘厳で洗練された、成熟した印象になります。

c) 緑に少量の白を加えると、清潔感があり、爽やかで、新鮮な印象を与えます。

5. 紫の明度はすべての色の顔料の中で最も低いです。紫の明度が低いと、人々に鈍く神秘的な印象を与えます。

a) 紫色の赤の成分が高い場合、圧迫感や脅威を感じさせます。

b) 紫に少量の黒を加えると、色がくすんで悲しく、怖い感じになります。

c) 紫に白を加えると、紫のくすんだ特徴が消え、上品で繊細、女性的な魅力に満ちた色になります。

6. 白色は明るく、その特徴は単純、純粋、そして幸福です。白は神聖であり、侵すことのできない色です。白に他の色が加わると、その純粋さが損なわれ、その特徴は微妙なものになります。

a) 白に少量の赤を混ぜると、新鮮で魅力的な淡いピンク色になります。

b) 少量の黄色を白に混ぜるとクリーミーな黄色になり、香り高く油っぽい印象を与えます。

c) 白に少量の青を混ぜると、涼しげで清潔な印象を与えます。

d) ホワイトにオレンジを少し混ぜてドライな雰囲気に仕上げました。

e) 白に少量の緑を混ぜると、優しく柔らかい印象を与えます。

f) 白に少量の紫を混ぜると、かすかな香りを連想させることがあります。

私が皆さんにお伝えしたいのは、Web ページのカラー マッチング テクニックについて簡単に説明した上記の記事 (フロントエンド開発者必読) だけです。この記事が皆さんの参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/androidshouce/archive/2016/07/25/5702280.html

<<:  MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

>>:  HTML でよく使われるメタ百科事典 (推奨)

推薦する

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...

入力タイプ=テキスト値=str を使用するための不完全なソリューション

今日、非常に奇妙な問題に遭遇しました。次のコードを見てください。 SimpleDateFormat ...

MySQL 5.7 のキーワードと予約語の詳細な説明

序文MySQL と Oracle のキーワードはまったく同じではありません。Oracle データベー...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

CSS スタイルが機能しない (史上最も完全な解決策の概要)

ページを作成するときに、記述した CSS スタイルが有効にならないことがあります。この現象にはさまざ...

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...

CSS ポインターイベント属性の使用に関する詳細な説明

フロントエンド開発では、ユーザーと直接やり取りするため、ユーザーが操作がスムーズで快適だと感じ、ネイ...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

Excel ファイルを MySQL データベースにインポートする方法

この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...

SQL グループ化により重複を削除し、他のフィールドで並べ替える

必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...