配色を考えて、ウェブサイトのデザインにどのように適用しますか？

議論すべき具体的なものがあるので、この配色があるとしましょう。

ソース

補色、単色などに基づいてコヒーレントな配色を選択する方法については多くの記事がありますが、色のセットを取得したら、どの色がヘッダーであり、どの色がリンクであり、どの背景であるかをどのように決定しますかとテキスト。暗い場所にライトを点灯するか、暗い場所にライトスキームを使用するかを決めたとしても、画面に残りの色を配置すると、サイトが見苦しくなります。

どの色がどこに行くかを決めるのに役立つ経験則や一般的なガイドラインはありますか？

「正しい答えはありません」などの意見に多くの人が意見を寄せていますが、私はこれに同意しません...少なくとも1つの正しい答えがあります。おそらく数人で、間違った答えもたくさんあるはずです。優れた設計とは、利用可能なリソースと時間に基づいて可能な限り最高のソリューションに到達することです。そして、確かにそのようなソリューションはいくつかの選択肢を上回るでしょう。ディスカッションの目的でカラーパレットを提供していただいたので、それを行い、提供されたカラーパレットに基づいて質問に答えます。（あなたがこれで作業しているレイアウトを見たことがないので、まだかなり広いでしょうが、あなたが従うべきいくつかのプロセスがあります。）

したがって、Webプロジェクトで配色を作成するときに最初に選択するのが好きな色は、本文の背景とメインテキストの色です。通常、これらの役割を満たすために最も対照的な2色を選択することをお勧めします。例のパレットも例外ではないため、この場合の色は＃DEE1DDと＃28363Dです。ここで、テキストに使用するものと背景に使用するものを決定する必要があり、ほとんどの場合、背景に明るい色を使用し、テキストに暗い色を使用しようとします。暗い色の明るい色より暗い色の方が明るい色よりも読みやすいことを示すかなりの研究がありますので、暗い外観の理由がない限り、これは一般的にデフォルトです（ヘビーメタルのウェブサイトをしているように）バンドか何か...私はそれがここではそうではないと仮定するつもりです）。そう、

次に、次に重要な項目であると思うもの、つまりハイパーリンクに進みます。読みにくいように背景と十分に対照的であるが、目立つようにテキストと十分に対照的である色が必要です。この例では、明るい緑のほとんどが明るい背景では判読できないため、最も明白な答えは＃2F575Dです。

次に、色付けする必要のあるヘッダーについて言及しましたが、ここでも背景との対比が必要です。ミニマリズムのために、私はすでに本文で使用した色を再利用しようとしますが、この場合、テキストの色はおそらく暗すぎて大量のスペースを埋めることができないため、＃2F575Dを選択する傾向があります上記のすべての理由は、ヘッダーのテキストまたはリンクを埋めるために背景のボディカラー＃DEE1DDを使用することです。

最後に、ホバーステートなどの重要でないデザイン要素を最後に説明します。いくつかの異なるグリーンを選択する必要があります。繰り返しますが、これはおそらく、バックグラウンドと十分に対比する必要があります。

そして...出来上がり！これで、（基本的な）4色スキームができました。このプロセスが私に役立つだけでなくあなたにも役立つことを願っています:)！

リンクしたWebサイトは、これらの色の使用方法を示しています。

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

私は通常、デザインに自分の色をはねかけます-それらがわずかに間違っていることを知っていても-少なくとも2つの単色または少なくとも1つの色を持っています。次に、アイデアをレイアウトしたら、原色（最も使用頻度の高い色）を取り、カラーホイールに追加します。そのようにして、他の色を置き換えます。または、元の色のほとんどを持つ画像を見つけようとします。

画像を撮り、それらの色に基づいて作品をデザインするという記事を読んだことがありますが、それはできません。少なくとも1色を念頭に置いて独自のデザインを作成し、色理論の手法を使用します

それが役に立てば幸い

何を取り入れるべきかについての公式はありません。それは背景などであるべきであり、それがデザインが芸術である理由です。

通常は、たとえば、どのフォントの色がどの背景でよりよく見えるかを、私が持っている色のセットで何度も試します。

使用される色を対比するという経験則がありますが、ほとんどの人は、これが背景が暗い色の明るいフォントなどの常識であると言うでしょう。その後、アラートボックスやナビゲーションなどのサブコンポーネントの色をどのように決定するかが発生する場合があります。

私が見るように、あなたはウェブサイトのためのあなたの裸の構造を用意する必要があります、そしてその後、あなたはあなたのメインコンテンツ、それをどのように提示したいかを決定する必要があります。サブコンポーネントの柔らかい色かもしれませんが、すぐに注意する必要はありません。

それが良いかどうかはどうやってわかりますか？簡単です。「これはいいね」と言うとすぐに、それが良いときです。他の人から第二の意見を得るのは常に助けになります。

全体として、色の組み合わせを試してみてください。1つだけに固執しないでください。最後に達成した構図に驚くかもしれません。

@Colorの組み合わせ：Webサイトで提供される組み合わせは、最初から十分に適しています。

最初の妻と大きなキャンバスパネルとアクリル絵の具のチューブを手に入れたときのことを思い出します。キャンバスを床に置き、あちこちに色をランダムに吹き付けました。乾かしてから暖炉にかけました。時間が経つにつれて、何人かのゲストがそれがどれほど素晴らしいかをコメントし、それが高価な芸術品だと思った...つまり、それがどのように描かれたかを伝えるまで。それはすべて見る人の目にあります。

その話に関連して、私は多くの視聴者にとって見苦しい、互換性のない色の組み合わせがあることに同意しなければならない。ただし、それらの多くはありません。私はあなたがそれを正しくすることについて強調しすぎるべきではないと思う。ウェブサイトに含まれているものは、多くの色の悪い選択を補うことができます。コンテンツは常にデザインよりも優先されます。