【配色の参考】おすすめサイト5選

みなさんはWeb制作をするときに、配色に迷ってしまったことはありませんか？

今回は、駆け出しのWebデザイナーさんや学習中の方に向けて、配色の参考になるおすすめサイトを5つご紹介します。この記事を読めば、配色に悩む時間がぐっと減らせるのではないでしょうか。

ぜひ最後までお付き合いください。

配色の参考になるサイト

1. Adobe Color

まず、1つ目の参考サイトはAdobe Colorです。

Adobe Colorでは、左端で類似色やモノクロマティック、トライアドなどのカラールールを設定することができます。これによって、カラーホイールで簡単に色相環を意識した配色を作成することが可能です。

また、探索というタブからは、下図の様に他のユーザーが作成した配色を閲覧できます。そして、写真やイラスト作品などから抽出した配色も参考にすることができます。さらにこちらの探索では、キーワードで検索することでそのワードに合った配色を表示してくれます。

トレンドのタブからは、Behance(adobeのSNS)とAdobe Stockから業界などのテーマごとのトレンドの配色も閲覧可能。

2. Color Hunt

次に紹介する配色参考サイトは、Color Huntです。

こちらのサイトは、4色の配色が閲覧できるサイトです。左のPastelやVintageなどのカラーテーマから検索ができます。そのため、より直感的に目的のイメージを探すことに適しています。

3. web gradients

次に紹介するのは、グラデーションの参考サイトのweb gradientsです。

こちらのサイトでは、グラデーション配色を閲覧することができます。

2022年のトレンドでもグラデーションは入っていると思うので、この様な美しいグラデーションを作りたいときに大変便利です。

また、カラーコードだけでなく、CSSもコピーすることができるのでコーディングの際にも時短になります。

4. HUE/360

次に紹介するのは、HUE/360です。

HUE/360でも、色相環を意識した配色を作成することができます。

1色目を選択すると、その色に合う色だけが表示される様になります。そのtらめ、簡単にバランスの良い配色が作れてしまいます。

また、表示する色相・彩度の段階も設定できるため、大胆繊細な配色も可能です。

5. palettemaker

最後にご紹介するのは、palettemakerです。

palettemakerでは、2~5色の配色をテンプレートに当てはめながら確認することができます！

さらに、テンプレートもWebやロゴ、タイポグラフィなど用意されているので目的に合った色を探しやすいことが特徴。

具体的にイメージしやすいので、イメージボード作りにも使用することができます。

まとめ

いかがでしょうか。

配色に自信がない方、時間がかかってしまう方は、この様なサイトからアイデアを得てみませんか。

また、配色に多く触れることは、自分でも美しいパターンを作る練習にも繋がります。

皆様のWeb制作に役立てていただけたら幸いです。