2022年の50の最高のウェブサイトの配色

特定のウェブサイトの配色がすべての注目を集めているように見えることはありますか?ウェブデザインの他のすべての側面と同様に、他よりもトレンドになる傾向がある配色があります。明るい色、はっきりとしたパレット、そしていくつかの不一致のスキームでさえ、トレンドになっている色の要素です。

最高のウェブサイトの配色のいくつかを見てみましょう(順不同)。それぞれについて、デザインの重要な要素を構成するカラーコードも共有しているので、これらの配色を自分でも簡単に試すことができます。

あなたが気付くかもしれない配色の最大の傾向の1つは、特に支配的な色としての濃紺と紺の使用、そしてアクセントのための金と明るい赤またはピンクの色合いの色合いです。このダーク/ライトのコンボは、数年前の多くのミニマルなデザインの黒と赤をよりモダンなタッチで進化させたものです。

次のプロジェクトを刺激するために、正しく行われた色の選択のいくつかの素晴らしい例を次に示します。

1.本物のブリーフ

パステルカラーパレットは、バランスと調和を生み出す柔らかく魅力的な色合いで復活しています。ここでは、ベージュとブルーが楽しいですが、デザインの周りで目を動かすのに役立ついくつかの明るいアクセントカラーがあります。柔らかいパレットではコントラストの問題が発生する可能性があることに注意してください。背景色と前景色に十分なバリエーションがあることを確認してください。

2.トランスフォームフェスティバル

この配色が示すように、明るく、ほとんど派手なネオンは、かなりの影響を与える可能性があります。ライムグリーンはニュートラルカラーと見なされる人もいますが、明るい紫と大胆なスラブのタイポグラフィと組み合わせると、それ以外の色になります。この色と美的悲鳴についてのすべては「私を見てください!」

3. Bankyfy

明るいブルーの黄金色は、読みやすく理解しやすい明るい光の感触のため、需要の高い配色です。(この配色は、別の、しかし同じように興味深いパレットに対しても反転させることができます。)ここでの良い点は、青が黄色の魅力的なトーンで信頼感を植え付けるのに役立つことです。

4.シーグルド・レヴェレンツ

Sigurd Lewerentzのデザインは、繊細で興味深いものです。これは、基本的な黒と白の要素を、画面上でアクティブ化されていない要素の背景色とオーバーレイの両方として機能するグレーブルーと一緒にプルします。このモダンな配色は、最近の2つのカラートレンド、つまり黒と白のパレットと、落ち着いたまたはパステルカラーのテーマを組み合わせたものです。

5. GolfSpace

黒と白(およびグレー)の要素を備えた別の美しい配色は、強調とモダンなタッチのためにライムグリーンのアクセントとそれらを組み合わせています。明るい緑の濃い灰色の背景は、すぐに組み合わせることができるものではありませんが、実際に動作しているのを見ると、これらの色は素晴らしいペアになります。(これは、2021年のPantone Colors of the Yearであった黄色と灰色のオプションの新しいひねりです。)

6.スタジオシンパティコ

Studio Simpaticoは、ネイビーとレッドを次のレベルに引き上げ、アクセントカラーを追加して、印象的な幅広いパレットを実現します。各色には目的があり、多くのオプションを備えたパレットの鍵となります。同様の彩度により、すべてがメッシュになります。それぞれのアクセントカラーは、鈍すぎたり明るすぎたりすることなく、中間調の範囲にある同様の感触を持っています。

7.私はコミュニティの重さを量ります

I Weigh Communityのこのウェブサイトの配色を説明するには、明るく鮮やかな方法が最適かもしれません。3色の配色は、各色合いの色合いを使用して6つの優れたオプションに爆発します。結果は、色であなたを圧倒することなく、単に驚くべきものです。これは、より多くのデザインが色の豊富なモダンな外観のために利用できるテクニックです。

8. Persoo

Persooは、最初に見ないと試さないような色の組み合わせを使用しています。独特のカラートリオはややフェミニンな雰囲気で、同時に一種の光を感じます。金融およびeコマースベースのツールは、多くの場合、青の色調に基づく安全なカラーパレットに固執するため、色の選択はWebサイトにとって混乱を招きます。

9.醜い飲み物

モノブルーのスキームは時代遅れになることはありません。Ugly Drinksのこのダークオンライトブルーの組み合わせは、ブルーも楽しいことを示しています。シンプルな色の背景は楽しく、デザインの残りの部分を読みやすく理解しやすくします。それはまた、多くのウェブサイトのデザインの中で白や写真の背景やヒーローのヘッダーが急増しているのとは異なる独特の外観です。

10. Taproot Foundation

Taproot Foundationは、最高の、最もカラフルなWebサイトの配色の1つを使用しています。黄色、青、ケリーグリーンの組み合わせは、非営利団体を支援するグループのさまざまな側面を説明するために連携して機能します。多くの場合、ウェブサイトの配色ではありませんが、背景が白の明るい色が主に流行のオプションです。

11.オメガイースト

オメガイーストは一見白黒以上のカラーパレットを持っているようには見えませんが、このウェブサイトのデザインはカラートレンドの大きなアイデアです。配色は、背景やカラフルなユーザーインターフェイス要素ではなく、メイン画像(この場合はビデオ)に基づいています。デザイナーがブランドストーリーを伝えるためにフルスクリーン画像を使用しているため、この色の傾向はより一般的になっています。

12.ファームフード

Farm Foodは、シンプルでナチュラルなパレットを使用し、白いミニマルスタイルの背景と明るいオリーブグリーンを使用して注目を集めています。さらに、パレットには、要素に明るいオリーブと暗いオリーブを使用した単調な機能があります。(ボタンのホバー状態でこの色の変化を確認するのが最も簡単です。)これは最初に来る色のペアではないかもしれませんが、印象的です。

13.ジェブセンのキャリア

Jebsen Careersは、落ち着いた青と緑を使用して、より彩度の高い色で素晴らしいカラーオーバーレイとデザイン要素を作成します。この組み合わせは、白い背景でうまく機能し、同じ色のバリエーションで作業することで何ができるかを示しています。テキスト要素とロゴに使用されるネイビーは、全体的な色の使用をさらに強化します。

14.ICクリエイティブ

IC Creativeは、暗い色のオーバーレイ(真の黒ではない黒)を使用し、明るいアクセントカラーと十分な白を使用して、魅力的なシーンを作成します。ほぼすべての色相のカラーオーバーレイは、Webサイトの色の主要な傾向であり、ここにあるような豊富な黒のオプションは、他のコンテンツに画面上に十分なスペースを与えるための優れた方法です。特大の見出しと明るいアクセントと行動の呼びかけに注意してください。

15.マングローブホテル

明るいカラーパレットは、数年前からWebサイトのデザインを実質的に支配してきましたが、一部のプロジェクトでは、よりミュートされたパレットにシフトバックしています。マングローブホテルの肉厚なトーンは暖かく、内容をよく引き立てます。(これと同じ色は、一部のTwitterマーケティングコミュニケーションにも表示されています。)

16.眠り

Slumberは、Pantoneの今年の色であるClassic Blueを活用し、アプリ内の画像と背景とロゴの暗い色調を利用しています。ゴールドとグリーンのペアリングはとてもトレンディでエレガントで、夜と睡眠のテーマに沿っています。

17.アトランタブリューイング

アトランタブリューイングはまた、他のアクセントカラーをたっぷり使ったドミナントレッドを使用しています。パレットはウェブサイトのデザインの一部であるだけでなく、製品のパッケージにも拡張されていることに注意してください。彼らはベースとして原色と豊かな白黒の背景を持つかなり広いパレットを持っています。

18.サニーストリートカフェ

サニーストリートカフェは明るく、デザインのイメージと言語に完全に一致するカラーパレットを備えています。緑と黄色が一緒になっているのは珍しい組み合わせですが、それはフレンドリーで、この朝食とランチのスポットのデザインにぴったりです。色のテーマも食べ物のイメージをうまく引き出します。

19.区別

Distinctionは、アクセントカラーのレインボーを備えたカラーパレットに同じオールブラックベースを使用しています。幅広いカラーパレットが必要な場合は、これがトレンドを効果的に使用する方法です。

20.ピットーリディシネマ

ミニマリズムは、Pittori di Cinemaで証明されているように、フルカラーにすることもできます。黒を使用した明るい黄色のスキームは、一般的なハイカラーミニマリズムオプションです。このスタイルのカラーパレットが明るいほど、トレンドが強くなっているように見えます。

21.私たち(ハート)UX

私たち(ハート)UXは、淡いブルーの背景(素敵な選択)とメインのアート要素にピンクがかった赤の色合いのシンプルなカラーパレットを使用しています。ファンキーなジオスタイルでこれらの色をまとめることは、トレンディでモダン、そして見るのがとても楽しいです。

22.誇りと引き裂き

Proud&Tornは、同じジュエルトーンのコンセプトを使用し、少し落ち着いた色の組み合わせを採用しています。より繊細なカラーパレットは、無色の画像がたくさんあるWebサイトの視覚的な興味を引くのに役立ちます。

23.バオブラ

バオブラは、モノトーンの配色で楽しいグラデーションを備えています。このスタイルのカラーパレットは、新しいブランドや製品のアイデンティティ、または大胆な色合いで大きなインパクトを与えたい場合に最適です。

24.女性と女の子の緊急センター

女性らしすぎないカラーパレットを選び、大胆な色でメッセージをより強くしました。色の選択は、コントラストが高く、目にや読みやすさの点で簡単です。明るいアクセントの選択はトレンディであり、その要素を強調します。

25. Jean-BaptisteKaloyaポートフォリオ

Jean-Baptiste Kaloyaは、おそらくWebサイトのデザインで最も人気のある色を、さまざまな青の度合いを持つ独自の単調なパレットに変えます。明るいブルーのソフトなグラデーションにも注意してください。

26.イゴール

Igorは、2019年におそらく最も人気のあるウェブサイトのカラーパレットである黒、白、黄色を紹介しています。このカラーパレットは、さまざまな色で見られますが、広く人気があります。この組み合わせは、おそらく最も魅力的なものの1つです。

27.カウボーイバイク

カウボーイバイクは、すぐに注目を集める黒と明るいカラーパレットを使用しています。ほとんどのサイトはテキストにのみ黒を使用していますが、このデザインは実際にそれを明るい単調なパレットに組み込んでいます。

28.ガブリエル・ドラン

Gabrielle Dolanのウェブサイトは、グレー-ホワイト-ブライトカラーパレットのトレンドを使用しています。ほとんどのデザインで明らかに色が不足しているため、明るい色が画面から飛び出しているように見えます。それはちょうどいい焦点領域とコントラストの量を作成します、それがこれがトレンドの配色オプションである理由です。

29.ピクセルパントリー

Pixel Pantryは、パープルとティールという独特のカラーペアを使用してこのトレンドをアピールしています。パレットを作成するためのこれらの2つの色の組み合わせは、ほとんど非現実的です。このスキームのバリエーションは、ほとんどどこを向いても見つけることができます。

30.11の植物

Eleven Plantsは、調和がとれていて見やすい、すべてニュートラルな配色を使用しています。グリーンは内容によく合い、色の組み合わせはシンプルで魅力的です。

31. Qvartz

Qvartzは、他の多くのプロジェクトを模倣する方法で、今年の最も予想外のトレンドカラーの1つを使用しています。ピンクのテキスト、ピンクのカラーブロック、大胆で柔らかな色のマッシュアップを備えたこのパレットは、ややフェミニンですが、それほど多くはありません。

32.RTXによるSheerlink

Sheelink By RTXは、モダンなグラデーションと大胆なカラーリングを使用して、製品に注目を集めています。色は深みがあり不機嫌で、栗色の紫は独特の規則性と神秘感を持っています。

33.プエルトメイト

プエルトメイトは、圧倒されることなく大胆なトレンドカラーを使用しています。センターパネルはネイビーなので、外側の明るい色は少し顔に感じません。(これらの色相をデザインのさまざまな場所に反転させることを想像してみてください。)

34. LoicSciampagnaポートフォリオ

Loic Sc​​iampagnaのポートフォリオは、青と黄色の最良の組み合わせの1つを使用しています。対照的な色合いはシンプルでエレガントで、明るく明るいブルーのシンプルなタッチと魅力的です。

35.キャナタル

Canatalは、このデザインでトリプルブルーのブランドカラーをうまく使用しています。退屈せずに単調なカラーパレットを使う方法の一例です。

36.FFWDデジタル

FFWD Digitalは、ブライトをスタイリッシュかつクラシックに使用しています。紙の上では、暗い背景と明るい背景でこの3色の色を使用するのは厄介に思えるかもしれませんが、ここではシームレスで美しいです。

37. Tappezzeria Novecento

Tappezzeria Novecentoは、ほとんどの人が敬遠する配色を使用しています–そしてそれは機能します。オレンジと黒の明るい組み合わせはシンプルで魅力的です。すべてが読みやすいように、色はちょうど十分に対照的です。ブランドカラーも画像に写っているのもいい感じです。

38.テブ

Tevは、ライムの背景とデュオトーンのカラーオーバーレイで退屈ではありません。それは大胆で、緑はあなたにお金を考えさせます–まさにサイトがするように設計されていることです。

39.ニッチ&カルト

Niche&Cultは、よりフェミニンな雰囲気の美容ブランドに柔らかな色合いを使用しています。やわらかいピンクは肌の色を連想させ、メイク用の空白のキャンバスを連想させ、明るい紫はサイトの雰囲気にマッチします。

40. Sysdoc

Sysdocは、赤、青、緑の基本パレットに新しいスピンを作成し、赤と緑のオプションを明るく、彩度を下げます。パレットは強くて柔らかく、他のほとんどすべての要素のセットと一致します。

41.ベネチアノコーヒーロースター

Veneziano Coffee Roastersは、グレーブルーとゴールドの組み合わせが繊細で上品な、より落ち着いた色調に戻ります。色はウェブサイトの画像とよく調和し、ちょうどいい感じを作り出します。

42.より良いエネルギー

Better Energyは、対応する画像から取得した自然に関連する明るい色を使用して、話すのがあまり面白くないかもしれない何かの物語を伝える楽しいパレットを作成します。

43.ブラストギャラクシー

80年代のパレットを見ずに、クールなカラートレンドのまとめを理解することはできませんでした。1980年代からのすべてがトレンドになっているようで、ブラストギャラクシーに使用される色が含まれています。これは、青、紫、ピンクとネオンの輝きの一般的な組み合わせです。

44.カイルデッカーポートフォリオ

カイルデッカーのポートフォリオは、とてもシンプルなために輝く配色の別のWebサイトです。ニュートラルと1つのトゥルーカラーの組み合わせを使用して、ユーザーの目を集中させます。

45.アウィンク

Awink Websolutionsは、さまざまな青の色相を持つ単調なカラースケジュールも使用します。(単調なオプションに関しては、ブルースが人気のあるオプションです。)これは、より深く、より暗いアクセントのおかげで少し異なります。さらに、暗い画面と明るい画面の領域はほとんど目の錯覚を引き起こし、ここには実際よりも多くの色があると思わせます。

46.アーチボルド地ビール醸造所

Archibald Microbreweryは虹色を使用していますが、パレットは驚くほど美しいです。色はすべて同じような彩度で、テーマを視覚的に追うことで、非常にシームレスにまとめられます。

47.インデジー

Indegyは、たくさんの写真と高い色に対して明るい緑を使用しています。シンプルな色は、主にグレーと白と組み合わせて、デザインにモダンなタッチを追加し、コンテンツをユーザーに案内するのに役立ちます。(他の場所では、明るいの微妙なポップにティールとオレンジのアクセントもあります。)

48.ナップザック

ナップザックは、グラデーションのある明るい赤の配色を使用して、使いにくい色に興味を持たせています。これは、明るいパレットと競合する高エネルギーのビジュアルがあまりないために機能します。

49.デミソル

デミソルはあまりにも多くの色とあまりにも多くの大きな要素を使用しています、そしてそれはとにかく素晴らしいです。色で遊ぶことは実験である場合があります。それをテストして、それが機能するかどうかを確認してください。

50.ドロップボックス

Dropboxには、機能しないはずの配色がもう1つありますが、機能します。深い栗色とベイビーブルーのコントラストは、分割画面全体で大きな目の動きを確立します。色は、反対の色のテキスト要素と同じように機能します。繰り返しになりますが、カラーオプションを試して、それらがどのように機能するかを確認する必要がある場合があることを証明しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です