HOME > 制作 > Webサービス > 配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色など

配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色など

Webサービス

2018/08/03

こんにちは。
今回は配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色などです。

Webデザインやグラフィックデザインをしていると配色で悩むことはよくありますよね。
配色を変えるだけで、印象もがらりと変わるので、慎重に選びたいですね。
そこで、今回は配色パターンの参考になるサイトやジェネレーターのおすすめをまとめました。

※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

配色パターンを生成してくれるサイト！

ここからはいよいよ、実際に配色パターンの参考になるサイトやジェネレーターを見ていきましょう。

hello-color

hello-color

http://jxnblk.com/hello-color/

コントラストのある配色を提案してくれるサイトです。

「hello-color」の使い方はこちら

コントラストのある配色を提案してくれるサイト「hello-color」！

🕒️2016/08/21

こんにちは。今回はコントラストのある配色を提案してくれるサイト「hello-color」！です。コントラストのある色の組み合わせをランダムに表示してくれるジェネレーターを紹介します。コントラストのある配色を提案してくれるサイト「hello-color」！hello-colorhttp://jxnblk.com/hello-color/ 「hello-color」の使い方使い方は簡単で、画面をクリックする度にコントラストが3以上ある配色を提案してくれますよ。デザインを学ぶすべての人に贈るカラーと配色の基本BOOK いつも使わないような配色が表示されるのでお...

designmagazine.jp

Khroma

khroma

http://khroma.co/

色を選択するとAIがカラーパレットを作成してくれるサイトです。

「Khroma」の使い方はこちら

色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」

🕒️2017/10/02

こんにちは。今回は色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」です。50色選ぶと人工知能が解析し、カラーパレットを生成してくれるWebサービスを紹介します。色を選択するとAIがカラーパレットを作成してくれるサイト「Khroma」！Khromahttp://khroma.co/ Khromaの使い方使い方は簡単で、好きな色を50色選んで、右上の「Start Training」のボタンをクリックします。ちなみに50色以上選んでも大丈夫ですよ。実際に作成するとこんな感じで、様々なテキストカラーと背景色の組み合わせを提案してくれ...

designmagazine.jp

Color Lisa

color-lisa2

芸術家の名画から配色を集めたサイトです。

「Color Lisa」の使い方はこちら

http://www.colorlisa.com/

芸術家の名画から配色を集めたサイト「Color Lisa」！

🕒️2016/05/18

こんにちは。今回は芸術家の名画から配色を集めたサイト「Color Lisa」！です。ゴッホやモネなどの作品を元にカラーパレットを作成しているサイトを紹介します。芸術家の名画から配色を集めたサイト「Color Lisa」！Color Lisahttp://www.colorlisa.com/ 「Color Lisa」の使い方まずは画家を選択します。今回はゴッホを選んでみました。ゴッホの「星月夜」から作ったカラーパレットはこんな感じです。また、作品名をクリックすると、元になっている絵画を見る事ができますよ。巨匠に学ぶ配色の基本―名画はなぜ...

designmagazine.jp

Color Supply

color-supply

http://colorsupplyyy.com/app/

色相環からカラーパレットを作成できるサイトです。

「Color Supply」の使い方はこちら

色相環からカラーパレットを作成できるサイト「Color Supply」

🕒️2017/02/28

こんにちは。今回は色相環からカラーパレットを作成できるサイト「Color Supply」です。色相環からカラーパレットを作成でき、作例も表示してくれるWebサービスを紹介します。色相環からカラーパレットを作成できるサイト「Color Supply」Color Supplyhttp://colorsupplyyy.com/app/ 「Color Supply」の使い方使い方はまず好きな色を色相環から選び、配色方法を選択します。配色方法はComplementary（補色）、Analogous（類似色）、Triad（正三角形の配色）、Split-Complement（分裂補色）、Square（四角の配色）の5種類あります...

designmagazine.jp

Hexwalk

hexwalk

https://hexwalk.now.sh/

10秒毎に新しい配色を提案してくれるサイトです。

「Hexwalk」の使い方はこちら

10秒毎に新しい配色を提案してくれるサイト「Hexwalk」！

🕒️2016/08/30

こんにちは。今回は10秒毎に新しい配色を提案してくれるサイト「Hexwalk」！です。10秒毎に新しい配色を表示してくれるWebサービスを紹介します。10秒毎に新しい配色を提案してくれるサイト「Hexwalk」！Hexwalkhttps://hexwalk.now.sh/ 「Hexwalk」の使い方アクセスすると10秒毎に新しい配色を表示してくれます。表示される配色は5色だったり、8色だったりまちまちですよ。それぞれの色をクリックすると上記の画像のような画面になり、右上の「Copy」のボタンをクリックするとカラーコードをコピーできます。すぐに役立つ!...

designmagazine.jp

ColorKuler

colorkuler

http://colorkuler.com/

Instagramのアカウントからカラーパレットを作成してくれるサイトです。

「ColorKuler」の使い方はこちら

Instagramのアカウントからカラーパレットを作成してくれるサイト「ColorKuler」

🕒️2017/08/13

こんにちは。今回はInstagramのアカウントからカラーパレットを作成してくれるサイト「ColorKuler」です。Instagramのアカウントからよく使う色を抽出して、カラーパレットを作ってくれるWebサービスを紹介します。Instagramのアカウントからカラーパレットを作成してくれるサイト「ColorKuler」！ColorKulerhttp://colorkuler.com/ ColorKulerの使い方使い方は簡単で、調べたいユーザーのIDを入力し、横の矢印のボタンをクリックするだけです。上記のユーザー（私）のアカウントだと暗めの写真が多いので、そのような写真をよく...

designmagazine.jp

Color Thief

color-thief

http://lokeshdhakar.com/projects/color-thief/

イメージからカラーパレットを取得できるサイトです。

「Color Thief」の使い方はこちら

イメージからカラーパレットを取得できるサイト「Color Thief」！

🕒️2016/11/26

こんにちは。今回はイメージからカラーパレットを取得できるサイト「Color Thief」！です。アップロードした画像からカラーパレットを取得できるWebサービスを紹介します。イメージからカラーパレットを取得できるサイト「Color Thief」！Color Thiefhttp://lokeshdhakar.com/projects/color-thief/ 「Color Thief」の使い方http://lokeshdhakar.com/projects/color-thief/にアクセスし、ページ下部のTry it yourselfのDrag an image hereの箇所に画像をドラッグ＆ドロップするとカラーパレットを表示することができますよ。&nbsp...

designmagazine.jp

ColorMe

colorme

https://colorme.io/

指定した色をベースにもう一色作れるサイトです。

「ColorMe」の使い方はこちら

指定した色をベースにもう一色作れるサイト「ColorMe」

🕒️2017/04/13

こんにちは。今回は指定した色をベースにもう一色作れるサイト「ColorMe」です。指定した色を基準にもう一色作れるWebサービスを紹介します。指定した色をベースにもう一色作れるサイト「ColorMe」ColorMehttps://colorme.io/ 「ColorMe」の使い方使い方は簡単で、まず左にベースとなるカラーコードを入力します。左の色はこの指定した色になりますよ。続いて右の色を作っていきます。下のバーを変更すると右の色が変わってきますよ。redを少し減らすとこんな感じになりました。デザイナーになる。伝えるレイアウト・...

designmagazine.jp

Web Colour Data

web-colour-data

http://webcolourdata.com/

指定したサイトの色を取得できるサイトです。

「Web Colour Data」の使い方はこちら

指定したサイトの色を取得できるサイト「Web Colour Data」！

🕒️2016/07/21

こんにちは。今回は指定したサイトの色を取得できるサイト「Web Colour Data」！です。指定したWebサイトのカラーを抽出してくれるWebサービスを紹介します。また、Popular Sitesでは有名サイトの解析結果も表示されているので、参考になりますね。指定したサイトの色を取得できるサイト「Web Colour Data」！Web Colour Datahttp://webcolourdata.com/ 「Web Colour Data」の使い方色を取得したいサイトのURLを入力し、「GET COLOURS」のボタンをクリックします。しばらくすると、解析が完了し、結果が表示されますよ。Bre...

designmagazine.jp

colourcode

colourcode2

http://www.colourco.de/

マウスを動かして直感的にカラースキームを作れるサイトです。

「colourcode」の使い方はこちら

マウスを動かして直感的にカラースキームを作れるサイト「colourcode」！

🕒️2016/08/15

こんにちは。今回はマウスを動かして直感的にカラースキームを作れるサイト「colourcode」！です。マウスポインタの位置によってリアルタイムで表示される色が変化し、直感的に色を選ぶ事ができるWebサービスを紹介します。マウスを動かして直感的にカラースキームを作れるサイト「colourcode」！colourcodehttp://www.colourco.de/ 「colourcode」の使い方マウスを動かすと表示される色が変わります。上下で明度、左右で色相、スクロールで彩度を調節する事ができますよ。気に入った色があったら画面をクリックして保存します。...

designmagazine.jp

Colormind

colormind

http://colormind.io/

人工知能でカラーパレットを生成してくれるサイトです。

「Colormind」の使い方はこちら

人工知能でカラーパレットを生成してくれるサイト「Colormind」

🕒️2017/04/17

こんにちは。今回は人工知能でカラーパレットを生成してくれるサイト「Colormind」です。人工知能で色の組み合わせを作成してくれるWebサービスを紹介します。人工知能でカラーパレットを生成してくれるサイト「Colormind」Colormindhttp://colormind.io/ 「Colormind」の使い方使い方は簡単で、左の「Generate」のボタンをクリックすると5色の配色を生成してくれます。気に入った色があった場合、鍵のアイコンをクリックするとロックすることができますよ。また、色の部分をクリックし、カラーコードを入力して指定することも可...

designmagazine.jp

THREEBÙ

threebu

http://www.threebu.it/random-material-palette/

クリックする度に3色の配色パターンをランダムに表示してくれるサイトです。

「THREEBÙ」の使い方はこちら

クリックする度に3色の配色パターンをランダムに表示してくれるサイト「THREEBÙ」

🕒️2017/08/01

こんにちは。今回はクリックする度に3色の配色パターンをランダムに表示してくれるサイト「THREEBÙ」です。3色のカラーパレットを提案してくれるWebサービスを紹介します。テキストベースやカード型、ロゴなどの複数のテンプレートで確認することができますよ。クリックする度に3色の配色パターンをランダムに表示してくれるサイト「THREEBÙ」！THREEBÙhttp://www.threebu.it/random-material-palette/ THREEBÙの使い方使い方は簡単で、画面をクリックする度に3色の配色パターンをランダムに表示して...

designmagazine.jp

Random Color Palettes

random-color-palettes

https://randomcolorpalettes.com

5色のカラーパレットをランダムに生成してくれるサイトです。

「Random Color Palettes」の使い方はこちら

5色のカラーパレットをランダムに生成してくれるサイト「Random Color Palettes」！

🕒️2016/10/27

こんにちは。今回は5色のカラーパレットをランダムに生成してくれるサイト「Random Color Palettes」！です。5色のカラーパレットをスペースキーを押すたびにランダムに表示してくれるWebサービスを紹介します。5色のカラーパレットをランダムに生成してくれるサイト「Random Color Palettes」！Random Color Paletteshttps://randomcolorpalettes.com 「Random Color Palettes」の使い方使い方は簡単で、スペースキーを押すたびに5色のカラーパレットをランダムに生成してくれます。また、作成されたカラーパレットにURLも一緒に...

designmagazine.jp

Material Palette

materialpalette

http://www.materialpalette.com/

二色選ぶと相性のいい配色を選んでくれるサイトです。

「Material Palette」の使い方はこちら

二色選ぶと相性のいい配色を選んでくれるサイト「Material Palette」！

🕒️2014/12/24

こんにちは。今回は二色選ぶと相性のいい配色を選んでくれるサイト「Material Palette」！です。Webデザインや他のデザイン等でもそうですが、レイアウトが同じでも配色が違うと受ける印象が全然違いますね。それ故に配色で悩まれると思います。そんな時に便利なサイトを紹介します。CSS、SASS、LESS、SVG、XML、PNGの形式でダウンロード可能です。二色選ぶと残りの色を選んでくれるサイト「Material Palette」！Material Palettehttp://www.materialpalette.com/ 「Material Palette」の使い方クリックすると色を選ぶ事ができま...

designmagazine.jp

LOL Colors

lol-colors

http://www.lolcolors.com/

4色の色の組み合わせを集めたサイトです。

「LOL Colors」の使い方はこちら

4色の色の組み合わせを集めたサイト「LOL Colors」！

🕒️2016/03/03

こんにちは。今回は4色の色の組み合わせを集めたサイト「LOL Colors」！です。デザインする時などに役に立ちそうな4色の配色例をまとめたサイトを紹介します。4色の色の組み合わせを集めたサイト「LOL Colors」！LOL Colorshttp://www.lolcolors.com/ 「LOL Colors」の使い方使い方はとてもシンプルです。気に入った配色の色をマウスオーバーするとカラーコードを見る事ができます。ハートマークで「いいね」する事ができ、左の「Popular」をクリックすると配色の人気順に並び変える事ができますよ。すぐに役立つ! 配...

designmagazine.jp

random a11y

random-a11y

https://randoma11y.com/

アクセシビリティーに配慮したカラーパレットをランダムに表示してくれるサイトです。

「random a11y」の使い方はこちら

アクセシビリティーに配慮したカラーパレットをランダムに表示してくれるサイト「random a11y」！

🕒️2017/01/04

こんにちは。今回はアクセシビリティーに配慮したカラーパレットをランダムに表示してくれるサイト「random a11y」！です。アクセシビリティーに配慮したカラーパレットをランダムに生成してくれるWebサービスを紹介します。アクセシビリティーに配慮したカラーパレットをランダムに表示してくれるサイト「random a11y」！random a11yhttps://randoma11y.com/ 「random a11y」の使い方文字色と背景色のコントラストが適切な配色をリロードや「NEXT」のボタンをクリックする度に表示してくれます。また、CSSコードも一緒に生成して...

designmagazine.jp

COLORION

colorion

http://www.colorion.co/

タグや検索の機能が充実したカラーパレットを集めたサイトです。

「COLORION」の使い方はこちら

タグや検索の機能が充実したカラーパレットを集めたサイト「COLORION」！

🕒️2016/05/10

こんにちは。今回はタグや検索の機能が充実したカラーパレットを集めたサイト「COLORION」！です。タグや色を指定して検索したり、人気順に並び変える事ができる5色の色の組み合わせを集めたサイトを紹介します。タグや検索の機能が充実したカラーパレットを集めたサイト「COLORION」！COLORIONhttp://www.colorion.co/ 「COLORION」の使い方上部のメニューの「PALETTES」をクリックして「MATERIAL DESIGN」を選択すると、マテリアルデザイン用の色にする事ができます。上部のメニューの「POPULAR」をクリックすると人気順...

designmagazine.jp

Swiss Style Color Picker

swiss-style-color-picker

https://fabianburghardt.de/swisscolors/

スイススタイルの色や配色を取得できるサイトです。

「Swiss Style Color Picker」の使い方はこちら

スイススタイルの色や配色を取得できるサイト「Swiss Style Color Picker」！

🕒️2015/11/27

こんにちは。今回はスイススタイルの色や配色を取得できるサイト「Swiss Style Color Picker」！です。スイススタイルとはスイス発祥で1950年代に流行ったグラフィックデザインのスタイルです。そんなスイススタイルの色や配色を取得できるサイトを紹介します。スイススタイルの色や配色を取得できるサイト「Swiss Style Color Picker」！Swiss Style Color Pickerhttps://fabianburghardt.de/swisscolors/ 「Swiss Style Color Picker」の使い方使い方は簡単で、取得したい色の箇所をマウスオーバーするとカラーコードが表示され...

designmagazine.jp

配色アイデア手帖めくって見つける新しいデザインの本[完全保存版]

どのサイトやジェネレーターも無料なので、うまく活用したいですね。
以上で配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色などでした。

綺麗なグラデーションを作成できるサイトをまとめた記事はこちら

綺麗なグラデーションを作成できるサイト8選

🕒️2017/09/23

こんにちは。今回は綺麗なグラデーションを作成できるサイト8選です。デザインやWeb制作をしていると綺麗なグラデーションを作成したい時ってありますよね。そこで、今回は綺麗なグラデーションを作成できるサイトを紹介します。綺麗なグラデーションを作成できるサイト！WebGradientshttps://webgradients.com/180種類のおしゃれなグラデーションがまとめられたサイトです。それぞれのグラデーションのpng画像をダウンロードでき、CSSをコピーすることもできます。PhotoshopやSketch用のグラデーションも配布されていますよ。「WebGra...

designmagazine.jp

広告

最新の記事

あなたにおすすめの記事