ノンデザイナー向け！ブログの配色を決める時に使える配色サイトまとめ

ブログの配色を決めるときに参考になったサイトを備忘録。
僕と同じようにノンデザイナーの方でもできるだけ使いやすいサイトを紹介しようと思うので良ければ参考にしてみてください。

簡単な配色の基本

最初にサラッと配色の基本について少しお話を。

基本的には上ような割合でベースカラー、メインカラー、アクセントカラーの3色で配色するとバランスの良い見栄えになるとされています。
ですので、ノンデザイナーの方は3色だけつかって配色するのがおすすめです。
3色以上はバランスよく配色しないと見づらいですし、そもそもプロのデザイナーの方でも難しいので真似しないのが無難です。

3色だけ使った配色でわかりやすいのが上の画像のサイトです。
ベースカラーが白、メインカラーは赤、アクセントカラーが青となっていて各カラーがバランスの良い割合で配色されているのがわかると思います。
同じ色でも重要でない所は少し薄くした色を使うなどコントラストをつけるとより見栄えがよくなるので、好きな配色のサイトやブログを参考にする際は気にしてみましょう。

初心者でもわかる！WEBデザインで色を選ぶ基本のポイント – 株式会社日本デザイン

WEBデザインではイメージの訴求に重要な役割を果たす色。その配色における基本的なポイントと、各色が持つイメージを知ることで、効果的に色を使いユーザーにアピールできるWEBサイトが作れます。

japan-design.jp

おすすめ配色サイト

 COOL COLORS

配色パターン見本40選：ベストな色の組み合わせ確認ツール

コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。

saruwakakun.com

配色の見本が40パターン紹介されているサイトです。
万人受けする配色や個性的な配色まで色々紹介されています。
右の配色プレビューから選んだパターンが実際にサイトで使うとどんな感じになるのか分かるのでノンデザイナーの方でもイメージが付きやすくなっています。

Happy Hues

Happy Hues - Curated colors in context.

See color palette inspiration on a real example website. As you click on different palettes every color on this site updates to give you context of how that col...

www.happyhues.co

見出し、本文、背景、リンクなどの色が一通り揃った状態で紹介しているサイトです。
配色パターンは少ないですが、ブログを一通り配色する際に参考になると思います。

Color Hunt

リンク:：https://colorhunt.co/

メイン、サブ、アクセントカラーを含めた4色の配色パターンを紹介しているサイトです。
紹介されている配色パターンが多いので、見ているだけでも飽きません

colorsupplyyy

リンク：https://colorsupplyyy.com/app

中央の色相環から好きな色を選んで相性の良い組み合わせを教えてくれるサイトです。
色相環や「次へ」クリックするといろいろなパターンが表示されます。

左上の「Hexマッチ」から好きな色のカラーコードを入力して、その色と相性の良い色や似た色の組み合わせを教えてくれたりもします。

0to255

リンク：https://www.0to255.com/

色の濃さを細かく比較できるシンプルなサイトです。

右上の入力欄に色の濃さを比較したいカラーコードを入力して使います。使いたい色をクリックするとカラーコードがコピーされるので便利です。

以上になります。
また参考になるサイトがあったら追記していきます。