配色に悩んだときに役立つカラーパレット15選

 
デザインでの配色は重要な要素です。2色(メインカラー・サブカラー)や、同系色の配色であれば悩むことも少ないと思いますが、3色以上の配色やアクセントカラーの選定など、アイデアが浮かばないこともあるでしょう。
今回は、配色に悩んだ時のアイデア出しに役に立つ、カラーパレットツール・サービスを紹介します。様々なカラーパレットがありますので、自分に合ったツールがあったら活用してみてください。



おすすめのカラーパレット



1

Adobe Color CC

Adobeが提供しているカラーツール。Creative Cloudユーザーであれば無料で利用することができます。自分での配色パターン作成、画像から配色を抽出のほか、探索ではCreative Cloudユーザーの人気順で配色が一覧できます。気に入った配色があれば、ASE(Adobe Swatch Exchange)ファイルのダウンロードすることができます。また、PhotoshopなどAdobe製品内でカラーパレットを同期することも可能です。

2

HUE/360

brightness(明度)を選択し、メインカラーを決定すると、それに合うカラーが表示されます。カラーコードのコピーも簡単にできるシンプルなカラーパレット。

3

Coolors.co

ユーザーが作成したカラーパレットを共有することがでるWebサービス。iOSアプリやChrome機能拡張、Photoshop・Illustratorのプラグイン(有料)などもある多機能なサービスです。

4

BrandColors

企業・サービスのブランドカラーをコレクションしたサイト。Microsoft・Googleをはじめ、数多くのブランドカラーを閲覧できるので企業・サービスの配色を参考にしたい場合はこちらがオススメです。

5

Color Hunt

4色の配色パターンを提案してくれるカラーパレット。「Trendy」「Popular」「Random」から一覧を閲覧することができ、お気に入りの配色を登録することもできます。

6

colourcode

ブラウザ上でマウスを動かし配色を決定していくスタイルのカラーパレット。カラーコードはHEX・RGB・HSL・HSV・CMY・CMYKで表示され、イメージ(PNG)のほかにsass・less・styl・cssファイルでのダウンロードも可能です。

7

Palettable

Palettableが提案するカラーを「好き」か「嫌い」で選択し、配色を決定していくカラーパレット。最大5色まで配色することができ、配色したカラーはPNG形式でダウンロードすることができます。

8

0to255

選択したカラーをグラデーション(濃淡)で表示してくれるカラーパレット。同系色の配色を考えてる方に便利なカラーツールです。ボタンのロールオーバー色を濃淡で表現したい場合にも役立ちそうです。

9

Material Palette

マテリアルデザインカラーから2色を選択すると、そのカラーに合う配色を自動的に提案してくれるカラーパレット。気に入った配色はCSS・SASS・LESS・SVG・XML・PNGにてダウンロードすることができます。

10

Material Design Colors

マテリアルデザインカラーのカラーコードを簡単にコピーできるカラーパレット。マテリアルデザインのほかにHTML・フラット・ソーシャルなどのカラーパレットもあります。

11

LOL Colors

4色で構成された配色パターンをコレクションしたカラーパレット。人気順に表示され、カラーコードもクリックでコピーすることができます。

12

Color Lisa

世界の名画の配色からカラーパレットを作成しコレクションしたサイト。カラーパレットの元となっている絵画へのリンクも貼られており、配色を勉強する際に役立つサイトです。

13

Random Material Palette Generator

ランダムにマテリアルデザインのカラーパレットを提案してくれるジェネレーター。テキスト・カード・ロゴといったケースを確認しながら配色がランダムに表示されます。PDF・PNG・HTMLにてダウンロードすることができます。

14

NIPPON COLORS

日本の伝統色をコレクションしたWebサービス。色名をクリックするとRGB・CMYKが表示されます。和風テイストのデザインを制作する際は参考にしたいサイトです。

15

配色の見本帳

キーカラーを選択すると配色や分析など、カラーに関する様々な情報が表示されます。カラーに関して深く追求したい方にはこちらがオススメです。

デザイン制作の際に業種や、サービス内容により配色に悩むことも多いと思いますが、こういったツール・サービスを活用することでアイデアが生まれるかもしれませんので、興味のある方は活用してみましょう。 以上、配色に悩んだときに便利なカラーパレットツール・サービスの紹介でした。

CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ

design.webclips.jp/css-gradient/




  • ロゴを様々な角度からテストできるツール「Logo Lab」
  • CSSをショートハンドに書き換えてくれる「SHRTHND」
  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
RELATED POSTS
  • 1970〜80年代のレトロな東京地下鉄のマナー向上ポスター
  • AIがロゴを作成してくれるWebサービス「Brandmark」
  • 有名な企業・サービスのロゴをダウンロードできる「Instant Logo Search」
  • 有名ミュージシャンを絵文字化したギャラリー「Music Emojis」
  • デザインの最新トレンドをチェックできるサービス「Panda」
  • アプリアイコンをデザインするときに参考にしたいサイトまとめ
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」