Divi Webサイトにカラーパレットを適用する方法（20例！）

今日のDiviチュートリアルでは、Diviで構築する次のWebサイトで使用できるいくつかの素晴らしいカラーパレットを共有します。 Webサイトに適切な色を使用することは、Webサイトが全体的にどのように見えるかを決定する主要な要素の1つです。

いくつかの素晴らしいカラーパレットをあなたと共有することに加えて、私たちはあなたのウェブサイトにこれらのカラーパレットを追加する確実な方法もあなたに示すつもりです。 疑わしい場合は、いつでもこれらの基本的な手順に従って、美しい結果を作成することができます。

一般的なヒント

1.暗い色または明るい色のWebサイトを決定します

使用するカラーパレットには、間違いなく明るい色と暗い色があります。 書かれた内容が失われないように、カラーパレットではコントラストが必須です。

さて、それはあなたがあなたのウェブサイトにカラーパレットを適用したいときにあなたがあなた自身に尋ねなければならない最初の質問にすぐに私たちを導きます。 暗い色のウェブサイトを作成しますか、それとも明るい色のウェブサイトを作成しますか？ 選択したからといって、それらを組み合わせることができないわけではありませんが、選択することで、カラーパレットをより簡単に選択できます。

2.色の選択

理論的には、カラーパレットに必要な色の数を自分で決定できます。 カラーパレットを適用または決定する標準的な方法はありません。 ただし、Diviで色のバランスをうまくとるために、5色を使用することをお勧めします。

5色のカラーパレットをWebサイトに適用できるように、さまざまなカラーパレットを紹介するときに、同じレイアウトに一貫して適用する1種類の方法を選択しました。 しかし、それに飛び込む前に、私たちの方法に従いたい場合は、カラーパレットに必要なさまざまなタイプの色を見てみましょう。

2つの背景色

選択した背景色が互いに一致していることを確認してください。 これらの背景色を互いに近くで使用し、美しい結果を得ることができます。 彼らは特定の調和を持っている必要があります。

1フォントカラー

次に選択する必要があるのは、フォントの色です。 論理的には、フォントの色は選択した背景色によって異なります。 明るい色の背景色を選択した場合は、フォントの色が暗い色であることを確認してください。その逆も同様です。

1ハイパーリンクとCTAカラー

選択したハイパーリンクの色は、Webサイトに命を吹き込む色の1つです。 この色は、Webサイトに含めるアクションの呼び出しに使用するため、パレット内の他の色よりも目立つようにしてください。

最後の仕上げのための1色

大事なことを言い忘れましたが、あなたはあなたのウェブサイトに色をもたらす別のすぐに使える色を選ぶことができます。 この色はハイパーリンクの色ほど重要ではありませんが、Webサイトのカラーバランスを完成させるのに役立ちます。

3.十分なコントラストがあることを確認します

前に述べたように; カラーパレットのいくつかの色の間にコントラストを提供することが不可欠です。 Webサイトにカラーパレットを使用している場合、このコントラストは主に、共有する書かれたコンテンツを読みやすくするのに役立ちます。 なぜなら; コンテンツが読みにくい場合。 結局のところ、それの目的は何ですか？

4.適切な色の使用バランスを見つける

カラーパレットで特定の色を使用する頻度を決定するには、さまざまな方法があります。 ウェブサイトで使用している色に圧倒されたくない場合は、適切なカラーバランスを作成する必要があります。

ほとんどの場合、カラーパレットでより中間色を使用し、他の色を使用して提供するコンテンツを強調するようにしてください。

ウォークスルー：Webサイトにカラーパレットを追加する

この投稿の次のパートでは、Webサイトにカラーパレットを適用する方法について説明します。 Webサイトのレイアウトに色を追加するときに実行するさまざまな手順を処理します。 このウォークスルーの後、カラーパレットを共有する部分に移動します。 色を共有しただけでなく、Diviレイアウトでそれらを使用して、ウォークスルーを実践しました。

それ以上の期限はありませんが、プロセスのさまざまなステップを見てみましょう。

1.色を追加する方法を決定します

カラーパレットは次の2つの方法で追加できます。

• セクションごとにすべての色を追加する
• 色ごとにウェブサイトの色を完成させる

これらの2つの方法を互いに組み合わせる可能性がありますが、最初にWebサイトを色ごとに完成させることをお勧めします。 そうすれば、異なるカラーコードを連続してコピーして貼り付ける必要がなくなります。 各色を1回コピーしてから、別の色に移動します。

2.背景色を追加します

色を挿入する方法を決定したら、背景色から始めることができます。 背景色から始めるのが良い考えである理由の1つは、結果がすぐに表示されるためです。 あなたはあなたのウェブサイトで使用している色の基礎を設定しています。

明るい色のWebサイトを作成することを選択した場合。 2番目のセクションの背景に最も明るい色を追加することから始め、3番目のセクションで2番目に明るい色を続けます。

3.テキストの色を追加します

Webサイトの背景色を追加したら、Webサイトへのテキストの色の追加を開始できます。 あなたのウェブサイトに書かれたすべてのコンテンツはこの色である必要があります（ハイパーリンクと行動の呼びかけを除く）。

4.ハイパーリンクとCTAカラーをWebサイトに追加します

次に進むと、Webサイトのハイパーリンクと行動を促すフレーズを目立たせることができます。 彼らは人々の注意を引き、彼らにリンクや行動への呼びかけが何であるかを好奇心をそそらせます。

あなたのウェブサイト上のすべてのクリック可能なものがこの色を含んでいることを確認してください。 この一貫性を維持することにより、訪問者は、クリックしてサイトに滞在し続けることができる場所を簡単に認識できます。

5.ファイナルタッチカラーを追加します

あなたがする必要がある最後のことはウェブサイトに最後の仕上げの色を追加することです。 作成した例とカラーパレットでは、このファイナルタッチカラーを3つの場所で使用しています。宣伝文の円の色、人物モジュールのヘッダーテキスト、およびプライマリメニューバーです。

ファイナルタッチの色は、Webサイトで使用するメインの色ではありませんが、Webサイトに必要だった余分な色を使用することができます。 結局のところ、あなたはあなたのウェブサイトが単調であるか、迷惑なほど深刻に見えることを望まないでしょう。

カラーパレット

Webサイトにカラーパレットを適用するために必要な手順を分析したので、次はいくつかのすばらしいカラーパレットの調査を開始します。 作成したレイアウト例の結果を示すだけでなく、その結果に到達するために使用したカラーコードも共有します。

1.数日間のタイル

私たちが選択した最初のカラーパレットには、ほとんどがより柔らかい（そしてわずかにパステルカラーの）種類の色が含まれています。 明るいWebサイトを選択したため、カラーパレットの明るい色がWebサイトの大部分を占めています。 ただし、カラーパレットの暗い色は、Webサイトに必要なカラーバランスが含まれていることを確認してください。

この例で使用されている色は次のとおりです（左から右）。

• ＃EBE8E2
• ＃768A95
• ＃B98077
• ＃007193
• ＃E2D7D7

2.砂漠

リストの次のカラーパレットはDesertと呼ばれます。 このカラーパレットのカラーバランスは、暗い色のWebサイトにわずかに傾いています。 この例で支配的な色は青色です。 しかし、必要なコントラストが確実に存在するようにする非常に明るいテキストカラーも1つあります。

このパレットで使用される色は次のとおりです（左から右へ）。

• ＃507782
• ＃7C8E93
• ＃D89C79
• ＃443F3C
• ＃FFE8D8

3.お祭り

次のカラーパレットは、よく見かけるものではありません。 色が同じカラーパレットに表示されることはあまりありませんが、非常に興味深いものです。 あなたのウェブサイトをユニークに見せたいなら、このパレットは行く方法です。

このパレットで使用されている色は（左から右）です。

• ＃E6EBD1
• ＃A59E4C
• ＃544C4D
• ＃AF3D4B
• ＃CED3BC

4.ピンキープロミス

行の次のカラーパレットは、暗い色のWebサイトを作成する場合に最適なオプションです。 黒の色合いとピンクの色合いが良い組み合わせであることが知られています。 彼らはあまりにも女性らしく見えることなく、ウェブサイトに遊び心のある余分なタッチを与えます。 黒の色合いは、Webサイトのルックアンドフィールに必要な深さが含まれていることを確認します。

このパレットで使用される色は（左から右へ）：

• ＃33383A
• ＃ECC9C8
• ＃E2566D
• ＃4F575A
• ＃D3D8DA

5.サントリーニ

この次のパレットでは、青が他の色を支配していることがはっきりとわかります。 このカラーパレットを使用すると、すぐに明るくポジティブなタイプの感覚を得ることができます。 青は、人々がWebサイトを構築するときに好む色の1つとして知られています。 プロ意識を反映したスタンダードカラーです。 ただし、このカラーパレットで使用されている青の色合いも遊び心のある側面を示しています。

この例で使用したカラーパレットは（左から右）です。

• ＃1198EA
• ＃0A5785
• ＃A85A4D
• ＃F1F5FA
• ＃C5DFF8

6.パープルプレジャー

このカラーパレットの支配的な色は明らかに紫です。 気のめいるような色として認識されることがよくありますが、このカラーパレットとWebサイトでの使用方法は異なります。 明るい色と組み合わせると、紫色は素晴らしい結果をもたらすことができます。

このカラーパレットで使用される色は次のとおりです。

• ＃D7D7ED
• ＃52517B
• ＃737172
• #FCFCFC
• ＃F0F1A

7.微妙

次に共有したいカラーパレットは非常にニュートラルで、フェスティバルのカラーパレットと同じスタイルです。 それほど頻繁には見られませんが、とてもきれいに見えます。

この例で使用されている色は（左から右）です。

• ＃DAE2D5
• ＃4B7263
• ＃A8A461
• ＃494949
• #CCCCCC

8.企業

次に共有したいカラーパレットは、あらゆる種類のビジネスWebサイトに最適です。 使用されている色は、特定の積極性と若々しさを反映しています。 明るい背景色により、黄色とターコイズ色がWebサイトに付加価値をもたらします。

このパレットで使用されている色は（左から右）です。

• ＃181242
• ＃4ABDAC
• #DBDBDB
• ＃F7B733
• #FCFCFC

9.ローズ

バラ色が好きではない人はいますか？ この次のカラーパレットはあなたのウェブサイトに女性的な要素をもたらします。 明るい色がウェブサイトを支配していますが、暗い色にも力を与えるようにしています。

このパレットで使用される色は（左から右）です。

• ＃152038
• ＃DDA199
• ＃FF614C
• ＃F5F5F5
• ＃E2E2E2

10.チョコレート

次にスポットライトを当てたいカラーパレットはチョコレートです。 このカラーパレットの良いところは、背景色とテキストの色が同じ色のカテゴリ内にあることです。 これにより、他の2つの色がこれらの色と区別され、注目を集める余地が生まれます。

このパレットで使用される色は（左から右）です。

• ＃FFF4E8
• ＃FFE2C4
• ＃822317
• ＃935B3B
• ＃346E70

11.洗練された

この次の色の組み合わせは、一見すると予想外のことです。 紫と黄緑はそれほど頻繁に一緒に使用されることはありませんが、結果からわかるように。 それらは非常によく一致します。 これらの2つの色に焦点を合わせ続けるために、背景色とテキストの色はかなりニュートラルです。

このパレットで使用されている色は（左から右）です。

• ＃88D317
• ＃4F2649
• #FCFCFC
• #EFEFEF
• ＃080816

12.オリビア

オリビアは、あまり説明する必要のないカラーパレットです。 オリーブと黄色のタイプの色は非常にうまく組み合わされています。 明るい色をよりニュートラルに保つことで、これらの色がショーを盗むことができます。

このパレットで使用されている色は（左から右）です。

• ＃778E3B
• ＃FFD902
• ＃132819
• #EFEFEF
• #FCFCFC

13.ゴールデンゲート

ソフトベージュ色はあなたのウェブサイトが一種の独占性を反映することを可能にします。 カラーパレットはかなり落ち着いた色に見えますが、このカラーパレットの紫のターコイズ色は、ウェブサイトに必要な暖かさをもたらすことができます。

このカラーパレットで使用される色は（左から右）です。

• ＃373737
• ＃F3F4E8
• ＃ADA075
• ＃EDE4C9
• ＃A685BC

14.キャプテン

このパレットは、おそらくリストの中で最もプロフェッショナルに見えるパレットです。 このパレットの2つの濃い青色がその主な理由です。 しかし、赤い色は、氷を壊し、ウェブサイトにいくらかの多様性を加えるのに素晴らしい仕事をします。

この投稿で使用されている色は（左から右）です：

• ＃3B578E
• ＃DB2323
• ＃D7DEED
• ＃F7F9FF
• ＃201C44

15.環境

次に共有したいカラーパレットは環境です。 この名前は、緑がこのカラーパレットを支配していることを示しています。 これらの柔らかい緑色は、このパレットで提供される柔らかなターコイズ色と完全に一致します。

このパレットの色は（左から右へ）：

• ＃C2D3DO
• ＃56776A
• ＃42B7A7
• ＃EDEFF4
• ＃26423E

16.ソフトリッチ

この次のパレットでは、ベージュと赤の適切な組み合わせが何であるかを明確に確認できます。 それらはあらゆるタイプのウェブサイトに成熟感を与えます。 別の目立つ緑色を追加することにより、Webサイトのルックアンドフィールにも若々しさが加わります。

このパレットの色は（左から右）です：

• ＃984B43
• ＃233237
• ＃B7A97C
• ＃F9F0D4
• ＃527C40

17.魅惑的

行の次のパレットは、別の暗い色のWebサイトです。 支配的な色は濃い紫と灰色です。 しかし、明るい色はウェブサイトにいくらかの暖かさをもたらすことができます。

このパレットの色は（左から右へ）：

• ＃D0B6D6
• ＃3CC203D
• ＃898989
• ＃F2F2F2
• ＃F9AEBD

18.ミント

ミントのカラーパレットはあなたのウェブサイトに新鮮さの感覚をもたらします。 一見非常に落ち着きがありますが、オレンジと紫の色は、ウェブサイトに新鮮で生まれ変わった感覚を与えることができます。

このパレットで使用される色は（左から右へ）：

• ＃31190A
• ＃B4BCA7
• ＃F99A53
• ＃54468E
• ＃E3EDE5

19.ソフトイエロー

このユニークなカラーパレットには、主に暖かい色が含まれています。 背景色は濃い色と淡い色の両方がありますが、全体的に明るい色のウェブサイトに寄りかかっています。

このパレットの色は（左から右）です：

• ＃DDCF30
• ＃437468
• ＃F1FFD1
• ＃4A4C49
• ＃FCFAD9

20.ミステリー

行の最後のカラーパレットは、Webサイトに使用できるもう1つの暗い色のパレットです。 このパレットで使用されている背景色は落ち着いていて、パレット内の他の明るい色が出てくるようになっています。

このパレットの色は次のとおりです。

• ＃131517
• ＃13828A
• ＃35363A
• ＃EEF5F7
• ＃AF8300

最終的な考え

この投稿では、選択したカラーパレットをWebサイトに適用する方法に関するヒントをいくつか紹介しました。 それに加えて、あなたがあなたのウェブサイトに優雅さをもたらすのを助けることができる20の美しいカラーパレットもあなたに示しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

そして、あなたがそこにいる間に、私たちに知らせてください。 これらのカラーパレットのどれがあなたのお気に入りですか？

EDGOR_21 /shutterstock.comによる注目の画像