この記事は2分で読めます

おすすめの配色参考サイト6選

  • 投稿日
  • 更新日

あとで読む

おすすめの配色参考サイト6選

デザインを作っている時、配色に悩むことはありませんか?「メインでこの色を使いたいけど、どんな色が合うか分からない・・・」「作ったデザインの配色がなんかしっくりこない・・・」「そもそも何も配色が決まらない・・・」今回はそんな時に役に立つ、無料で使用できる配色サイトをご紹介します!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Adobe color

お馴染みのAdobe Colorです。

カラーハーモニールールを選択して、ホイールを動かすとメインカラーを基準に5色の配色を提案してくれます。

また、画像からカラーパレットやグラデーションを抽出することもできる上に、アクセシビリティにも対応しているなど機能面が充実しています。

Adobeアプリケーションと連携できる点も便利です!

coolors

https://coolors.co/52489c-4062bb-59c3c3-ebebeb-f45b69

こちらのサイトはスペースキーを押すと5色の配色がランダムで生成されます。+ボタン×ボタンで配色数を変更することができます。錠前のアイコンをクリックすると変えたくない色をロックして、その色に合った配色を生成してくれます。操作がシンプルなので、使いやすくて便利です。私は配色のアイデアが全く思い浮かばない時や息抜きついでに参考になりそうな配色を見たりしていました。

HUE360

https://hue360.herokuapp.com/

「Brightness」で明度を選択し、色相環の中から色を1つ選択するとその色に合う配色だけが表示されます。「Circle Controller」で色相環の設定を変更できます。Shiftキーを押しながら色を選択すると選択された色が背景色として表示されます。私は、メインカラーは決まっているけど他の配色に悩むということが多かったので、このサイトには結構お世話になりました・・・

Color Supply

https://colorsupplyyy.com/app/

色相環と配色法に基づいて、配色を提供してくれます。アイコンの配色例、パターン、グラデーションをプレビューしてくれるので、アイデア作りの参考になります。

Khroma

http://khroma.co/generator/

自分の好きな色を50色選択するとAIが好きな傾向を判断して、自動で配色を生成してくれるサイトです。少し時間がかかりますが、かなりの多くの配色パターンを出してくれるので、勉強になります。似たような色を選択しすぎると結果が偏るので注意です!

NIPPON COLORS

https://nipponcolors.com/

和風のデザインをする時に役に立つのがこのサイト。選んだ色が背景としてプレビューされます。濃い色を選ぶとカラーパレットが少し見づらくなりますが、カラーコードをコピーできるので、使い勝手が良いです。色の和名も勉強になりますし、サイト自体も動きがあって、見ていて楽しいです。

まとめ

おすすめの配色サイトを紹介しましたがいかがだったでしょうか。

今回紹介したものは全て無料で利用できるサイトとなっておりますので、皆さん利用しやすいと思います。

ぜひ、今後の制作に役立ててください!

あわせて読みたい
Webデザインに役立つ配色ツールを紹介!Web配色の基礎知識も解説 Webデザインにおける配色の基本ルールを押さえることで、グンとデザイン力が上がります。Webデザインを始めたばかりの方に向けて、Web配色の基本からおすすめのデザインツールまでご紹介します。

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須