配色を決める際に役に立つサイト49

スポンサーリンク
webtoo1 - 配色を決める際に役に立つサイト49

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

今回はデザイン・イラストのカラー選びで
役に立つWebサイトを49つほどまとめました。

まだまだ、サイトは沢山あるので
随時、記事追加を予定しています。

配色ツールを利用していこう。

デザインだと特にWebやポスターの配色
イラストならキャラのメインカラーなど

デザインやイラストに長けている人でも
配色は制作の過程においても、
悩む要素が多い部分だと思います。

配色1つでそのデザインやイラストの
イメージや印象が全く違うものに。

ですが、今回紹介する配色サイトで
そんな悩みは減るでしょう。

また、色彩理論に基づいた配色は
人の行動を変えることもできます。

とても便利なものばかりなんで
自分にあったものを見つけて
是非、制作に役立て見てください。

関連記事

books 1825557  34 100x100 - 配色を決める際に役に立つサイト49

スポンサーリンク

カラーツールの一覧

探しているカラーが簡単に見つかったり
色の組み合わせの見本になったりする
Webサイト(ツール)一覧になります。

数が多いので説明で気になったものを
チェックするといいと思います。

※ 紹介順は、日本語、英語(アルファベット)
 数字の順番に並べています。

① 色見本と配色サイト

数々あるカテゴリから色見本を探せる
辞書みたいなサイト。

Web上のフルカラー表現できる
なんと1600万色の色を見れるサイトです。

メニューにあメイン色からその色に関する
「画像」「Webサイト」「関連色」を
見れるところも優れています。

色見本と配色サイト

② ウェブ配色ツール Ver3.0

サンプルページをプレビューしながら
好きなようにページ全体の配色を
変更できる配色ジェネレーター。

右上のカラーピカーを動かすことで
サイト全体配色を自動に決定できます。

ロゴから文字、背景細かい所まで変更可能。

ウェブ配色ツール Ver3.0

1色を選ぶだけでそこそこの配色をしてくれるツールです。高機能ではありませんが、おかしな配色になりにくいように色を自動調整します。

③ 配色パターン見本40選

カテゴリー別に、アプリデザイン作りに
役に立つ配色パレットが見れるサイト。

「万人受けする配色」
「親近感を感じさせる配色」
「個性的な配色」

「クール系の配色パターン」
「元気・アクティブ系の配色パターン」
「かわいい系の配色パターン」

カテゴリーがこのように分かれていて
実際に使用した時のイメージが
湧きやすくなっているサイトです。

配色パターン見本40選

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

④ 和の色 – 色の名前と色見本

日本の和の色をまとめたサイトの1つ。

和の色 – 色の名前と色見本

色の名前とweb色見本。日本の伝統色の名前と色見本

⑤ Adobe Color CC

Adobeの配色ツール。

アップル製品(iPhone・iPadなど)で
撮った写真素材からカラーパレット作成、
Adobeサービスと連結して使えるツール。

Adobe Color CC

Create color schemes with the color wheel or browse thousands of color combinations from the Color community.

⑥ ambiance

ワンクリックで美しい配色を
ランダムで表示してくれるサイト。

ambiance

⑦ BADA55.io

数字とアルファベットで表せる
英単語カラーをまとめたサイト。

サイト名「Bada55」は
Badassを表していています。

BADA55.io

Looking for a BADA55 hex color word for your css code? Come here now! Yeah!

⑧ BrandColors

海外の有名企業やブランドなどで
使われているブランデイングカラーを
アルファベットの順に並べたサイト。

カラーをコピーやダウンロードも可能。

BrandColors

The biggest collection of official brand color codes around. Includes hex colors codes for 500+ brands including Facebook, Twitter, Instagram, and many more.

⑨ Browse Palettes

世界のユーザーが作った配色パレットを
見ることができるWebサイト。

Browse Palettes

⑩ Canva Colors

デザインやイラストに使いたい
配色100種以上揃えてある
Webカラー見本帳になるサイト。

各色の詳細な意味を調べたり
補色・類似色、モノトーンなどの
配色パレットもまとめて見れます。

Canvas Colors

Generate the perfect color palette and learn about color meanings with Canva's collection of colors and free color tools.

⑪ Cohensive Colors

ボタンのクリックだけで統一感ある
配色を表示してくれるツール。

色数を増やしたり減らしたり
特定色でオーバーレイをかけたりできます。

Cohensive Colors

A tool for creating more cohesive color schemes. Pick a bunch of random colors that you like and add a touch of magic.

⑫ Colorable

配色のコントラストを
確認できる便利なツール。

文字の微妙な色合いのチェックに
役に立つツールです。

Colorable

Color contrast tester

⑬ Color.Hailpixel.com

開いたページ上でマウスを動かすだけで
画面の色が変化して色を選べるツール。

カラーコードをクリックするたびに
色が保存されていき、右に新たな色を
どんどん追加できていけるので便利。

Color.Hailpixel.com

Simple color picker everyone

⑭ ColorHexa

好きなカラーを検索にかけると
そのカラー情報・説明を表示するサイト。

RGB・CMYK・HSLなどの
数値も出してくれるので便利です。

ColorHexa

Color hex encyclopedia providing information about any color.

⑮ Color Hunt

一般ユーザーが配色パレットを
自由に投稿できるサイト。

人気順で選ぶこともできるので
理論でなく一般の人がどんな配色を
好んでいるのかなどもわかるかも。

Color Hunt

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes

⑯ COLORION

配色カラーパレットを約3000種類以上
収録した膨大なデータベースサイト。

もちろん、カラーをコピー、保存
情報も見れて機能もしっかりしています。

COLORION

Curated Color Palettes with Search and Tags Support

⑰ Color Library

印刷で使用される「CMYK」では
表せないスポットカラーを選び
色を確認可能なデータベースサイト。

Color Library

Color Library – Convert color images in multi-channel for printing devices

⑱ Color Lisa

世界の有名画家・アーティストの作品を基に
配色パレットがまとめられた珍しいサイト。

ピカソ、ダリ、ダビンチなど
学校の美術で習うアーティスト作品も多数。

Color Lisa

Color Lisa is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed de

⑲ Colormind

ワンクリックで人工知能を利用し
配色パレットをランダムに表示するサイト。

「Generate」をクリックすることで
「Nature Photography」「 Architecture」
「Maplestory」「Watercolor paintings」に
写真や建築、絵をモチーフに配色を生成する。

Colormind

Generate color combinations in one click. Colormind creates cohesive color schemes using a deep neural net.

⑳ Color of Book

雑誌(日本発売)で使用されている
配色を表示してくれるWebサイト。

Color of Book

㉑ ColoRotate

立体(3D)三角錐を利用し、
カラーパレットを作成するツーツ。

ColoRotate

㉒ Color Palette Generator

画像(写真)をアップロードすると
それに使用されている色のカラーパレットと
その色を使うイメージを出してくれるサイト。

Color Palette Generator

Easily generate awesome color palettes from an image.

㉓ Colors – Material-UI

Googleデザインガイドの
「マテリアルデザイン」の配色を
一覧で見ることができるサイト。

メインカラーとアクセントカラーが
一度に表示できるところもポイントです。

Colors – Material-UI

React Components that Implement Google's Material Design.

㉔ Color Supply

カラーチャートを回して
好きな配色を探せるサイト。

アイコンイラストやグラデーションでも
色をすぐに確認できるのが良いです。

Color Supply

Use the color wheel to select a style you like. Then pick a hex code.

スポンサーリンク

㉕ colourcode

カラーコード・スキームを
ワンクリックで決めれるツール。

画面にマウスをおき動かすと
自動的に色が変化していくので

好み色が出てきた際にクリックすると
色を確定することができます。

右にあるプラスボタンで色を
次々に追加していくことも可能。

colourcode

colourco.de is an online designer tool, which allows you to easily and intuitively combine colours.

㉖ colr.org

画像・写真から色を抽出して
使われている色を表示してくれるサイト。

「Random flickr image」で
ランダムに写真を選択できて、
「Load your own」で自分の写真を
アップロードもできます。

写真にマウスを合わせると
それに含まれるカラーコードが見れます。

colr.org

㉗ coolHue

デザイナーにより1つずつキュレートされた
グラフィックカラーがまとめてあるサイト。

CSSコード、PNGファイルの
ダウンロードも可能です。

coolHue

Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.

㉘ Coolors

スペースキーを押すごとに
5種類の色のカラーパレットを
自動的に表示してくれるサイト。

一色ずつ色の調整も可能です。

Coolors

coolors

㉙ FLAT UI COLORS 2

フラットデザインのために
カラーパレットを一覧にしたサイト。

各色をクリックすることにより
Web制作に役立つHEX、RGB、RGBAを
コピーすることができます。

FLAT UI COLORS 2

㉚ Grabient

美しいグラデーションカラーをを
好みでカスタムや作成できる配色ツール。

そのまま使いたくなる綺麗な
グラデーションカラー25種類があり
調整・変更を加えてダウンロードできます。

ボタン1つで作成したCSSコードも
コピーできるという優れたサイトです。

Grabient

Beautiful and simple UI for generating web gradients.

㉛ Hello Color

クリックして出る2色を決めることで
類似色・補色を表示してくれるサイト。

スペースキーを押すと類似色・補色
一覧を見れるシンプルな配色サイトです。

Hello Color

㉜ hexu al

多彩なワードで色の説明をして
言葉や気分で配色を探せるサイト。

hexu al

㉝ Hues

世界的企業などのブランドロゴの
カラーをまとめた配色のサイト。

Hues

㉞ HUE/360

1つのキーカラーと調和するカラーを
選んでくれるカラーツール。

メインとして使いたい色を
円形にある色からクリックすると、

選べる色の数が減り相性のいい色だけ
残っていくという便利なものです。

選んだ色は下に表示されて
「Print User Color」をクリックすれば、
カラーコードを見ることができます。

HUE/360

㉟ Japanese Traditional Colors – 2xUP

日本の伝統色の名前とカラーコードが
リストになっている色見本サイト。

日本伝統的なデザインやイラスト
制作の際にきっと役立つ色見本です。

Japanese Traditional Colors – 2xUP

日本の伝統色465色見本を CSS などで使える RGB 数値 (カラーコード) と合わせてリスト

㊱ LOLCOLORS

Webデザインの参考用に現役デザイナーが
集めた綺麗な配色パレットの一覧サイト。

涙のような配色パレットが可愛いです。

LOLCOLORS

㊲ Material Mixer

Googleのマテリアルデザインの配色を基に
自動で類似色の配色を示してくれるツール。

Material Mixer

Material mixer tool, allows you to mix match primary and secondary color of material design color palette.

㊳ MulticolorEngine

好みの色から複数の画像(写真)を
探すことができるサイト。

色の割合を指定することで
それにあった画像を一覧表示してくれます。

MulticolorEngine

TinEye is a reverse image search engine. Search by image: Give it an image and it will tell you where the image appears on the web.

㊴NIPPON COLORS

日本の伝統色を扱う代表的なサイト。

日本の伝統色の
「名称」「CMYK /RGB」を確認可能。

さらに右にある「MUNSELL」を
「ON」にすると3Dになるという
遊び心あるカッコいサイトです。

※ ただ「Safari」「Chrome」しか
見れないので注意が必要。

NIPPON COLORS

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

㊵ Palettable

配色を好きか嫌いかで判断して
自分の直感で配色を探せるサイト。

数多くのデザイナーの配色の知識を
取り入れた配色ツールになります。

Palettable

㊶ Palette Creator for Google Chrome

Google Chromeの拡張機能の1つ
ページに表示している画像やイメージの
配色パレットを作ってくれるツール。

Palette Creator for Google Chrome

Creates a color palette from any image. Just right-click on the image and select the “Palette Creator” option.

㊷ Paletton.com

カラースキームを自動で
選んでくれるWebサイト。

ベースのカラーを選択すると、
補色になるものを表示してくれます。

また「EXAMPLE」をクリックすると
カラーコードを合わせたサンプルの
サイトが見れイメージがしやすいです。

Paletton.com

㊸ Palettr

検索キーワードに合わせ画像 (写真) から
配色カラーパレットを表示するサイト。

Palettr

Palettr is web tool for designers that generate fresh, new color palettes inspired by a theme or a place.

㊹ PHOTOCOPA

アップロードした画像(写真)を
自動で分析して使われている色を
配色カラーパレットに表示するツール。

イメージのデザインやイラストがあるとき
その配色で使われている色がわかるので
とても便利なサイトです。

PHOTOCOPA

PHOTOCOPA helps you find color inspiration in photographs. Sampled colors and 6 great palette suggestions help you make a great photo inspired color palette.

㊺ Pictaculous

画像(写真)をアップロードすると
それに使用されている色を抽出して
カラーパレットに表示してくれるサイト。

Pictaculous

Generate a color palette from PNG, JPG or GIF image/photo. Receive color suggestions, download Photoshop swatches (.ACO)

㊻ Random Material Palette

ページをクリックするだけで
マテリアル(素材)から自動で
カラーパレットを選んでくれるツール。

ワンクリックする度に下に
配色を保存していってくれます。

Random Material Palette

Your material palette just with a click! #RandomMaterialPalette

㊼ Sphere : Color Theory Visualizer

このサイトも1つ色を選択すると
簡単にカラーリングを表示できるサイト。

パターンも沢山選択できて
「Harmony」「Vision」「Quantize」を
変更して様々なカラーリングができます。

Sphere : Color Theory Visualizer

Harmonize colors. Create color schemes. Find HEX codes. Simulate color-blindness. Export into Illustrator, Photoshop and ColRD.com

㊽ WebGradients

Grabientと同じく
美しいグラデーションカラーを揃えた
配色コレクションツール。

グラデーションカラーは180種類あり
調整・変更を加えてダウンロードできる他

2500×2500pxのPNGファイルダウンロード
カラーをクリックするとウィンド全体に表示
そういった機能などあります。

WebGradients

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

㊾ 0 to 255

好きな1つの色を選択することで
コントラスト・色合いを調節した
グラデーションを表示してくれるサイト。

Webデザインのhoverを決める際に、
リンクカラー選択に便利かも。

0 to 255

配色を決める・探す際の参考

49つの色見本になる
Webサイトはどうでしたか?

色にはそれぞれ相性が良い・悪い
色の組み合わせがありますね。

感覚や好みでも色を決めるのも
悪いことではないですが、

色を決めた理由や根拠などがあると
意味やコンセプトの説明や説得に役立ち

デザインやイラスト(作品)としても
さらに、魅力的なものができてきます。

制作の際の色選びのとき
これらのサイトを思い出してください。

スポンサーリンク

シェアする