Illustration Magic

*自由な生き方の魔法をあなたへ*

配色に困ったときに見るサイト17選

f:id:yuki1732:20170616180541p:plain

イラストを描くときやWEBやグラッフィックデザインなど様々なデザインをするときに重要な要素の1つである配色。

 

プロのデザイナーですら配色で悩んでしまうほどかなり大切なポイントであり、難しい問題でもあります。

 

 

そんなときに役に立つのがインターネットサイト。今ではいろいろなサイトで様々なカラーコードなどをわかりやすくまとめてくれているオンラインサービスが存在します。

 

そこで今回は、配色を決めるときに役立つオンラインサイトを紹介します!

 

 

 

 

 

カラーコード

 

HTMLカラーコード

 

f:id:yuki1732:20170616155024p:plain

HTMLカラーチャート(左図)では、基本色のHTMLコードを入手することができます。色のマスをクリックするとHTMLのカラーコードが入手できます。

 

カラーピッカー(右図)は縦のスライドを動かしてカラーを選択し、左のマスをクリックして好きなカラーキャストのHTML カラーコードを入手します。

 

 

原色大辞典

f:id:yuki1732:20170616155350p:plain

 

色の名前とカラーコードが一目でわかるサイトです。原色・和色・洋色・webカラー・パステルカラー・ビビッドカラー・モノトーン・メトロカラーなどいろに関する情報が豊富に揃っています。

 

 

シーン別配色見本32パターン

f:id:yuki1732:20170616160452p:plain

 

株式会社スタイルリンクのブログより、シーン別の配色見本。ポップで楽しいイメージ、品のある知的なイメージなど32パターンの色の組み合わせを提案しています。配色の基礎についてもわかりやすい解説があります。

 

  

配色パターン81サンプル

f:id:yuki1732:20170616160702p:plain

 

シンプル、ダークといった印象別に配色パターンを掲載しているサイト。81種類もの豊富な配色が揃っていてコードも見ることができます。他にも色の組み合わせチェックツールや、色の基本情報などを掲載しています。

 

 

 

色の組み合わせ

 

配色の見本帳

f:id:yuki1732:20170616161408p:plain

 

ベースカラーを選ぶと、色の成分情報とカラーパターンを検索できるサイトです。配色技法に則った色の組み合わせを提案してくれます。

 

 

coolors

f:id:yuki1732:20170616173229p:plain

 

スペースキーを押すだけでランダムにカラーパレットが生成されるツール。表示された色の色相や彩度、明度などを変更したりメインとなる色を固定し、他の色をランダムに表示させて組み合わせを試すといった使い方ができます。

 

 

AdobecolorCC

f:id:yuki1732:20170616174335p:plain

 

指定したカラールールに基づいて、カラーホイールを用いた操作で色の組み合わせを試せるツールです。

iPhoneiPadAndroid向けのアプリもあります。これはカメラが検知した映像から色を抽出しカラーテーマを作成する機能、保存したカラーテーマを共有する機能があります。

 

 

HUE/360

f:id:yuki1732:20170616161502p:plain

 

色相、彩度、明度で色の組み合わせが試せるサービス。一つ色を選ぶと相性の良い色を提案してくれます。

選択された色が下部に表示され、いくつかの色を比較することもできます。デザイナーでない人でも、色の三要素についての理解を深めることに役立ちます。

 

 

Color Hunt

f:id:yuki1732:20170616161722p:plain

 

様々なカラーパレットが毎日登録・更新されている海外のサイトです。カラーパレットを選ぶとプレビューが表示されて色のイメージを確認できます。

 

 

material palrtte

f:id:yuki1732:20170616172042p:plain

 

用意された色の中から2色を選ぶとプレビューが表示されるサイト。

 

選んだ色の情報が画面右下のYourPaletteという欄に記憶され、色をクリックするとカラーコードがコピーされた状態になったり、まとめてダウンロードすることができます。

 

 

 

色を探す

 

Web Color Date

f:id:yuki1732:20170616172155p:plain

 

サイトのURLを入力すると、そのサイトに使われている色が表示されるサイトです。色の一覧の他、色相の分布図やカラーホイール、似た色を使った他サイトも表示してくれます。

  

 

Color of Books

f:id:yuki1732:20170616172855p:plain

 

ファッション誌やスポーツ紙などの書籍を検索し、配色を確認できるサイト。例えばファッション誌なら、男性・女性、10代向けや一般OL向け、雑誌名など、イメージに合ったものを検索できます。

 

 

画像カラーピッカー

f:id:yuki1732:20170616173007p:plain

 

画像の好きな部分を指定して、カラーコードを抽出できるウェブサービスです。スマホでの操作にも対応しています。

画像をサーバーにアップロードせずにローカル環境だけで処理するので、プライバシー面でも安心して使えます。

 

バージョン2もでています↓
イメージカラーピッカーVer2

 

 

その他困ったときに

 

shade

f:id:yuki1732:20170616173339p:plain

 

グラデーションを作ることができるツールです。カラーコードを入力してベースカラーを決めて、色やグラデーションの各種値を調整して作成します。作成した色のCSSプロパティが表示されるのが便利です。

 

 

NIPPON COLORS

f:id:yuki1732:20170616173629p:plain

 

日本の伝統色を調べることができるサイト。桑染、撫子など日本古来からの色の名前をクリックするとサイト全体に色が表示されます。


RGB、CMYKの各カラーモード、カラーコードがわかります。Webデザインだけでなく、伝統色の名前の勉強にもなります。

 

 

design shack

f:id:yuki1732:20170616173829p:plain

 

海外のギャラリーサイト。色を選ぶとその色を使ったサイトデザインやロゴなどを表示してくれます。webデザインをするときの参考資料になるでしょう。

 

 

Flat UI Colors

f:id:yuki1732:20170616184213p:plain

 

流行のフラットデザインに使える色を選べるツール。色をクリックするとカラーコードがコピーされた状態になるので、そのままペーストできます。用意されている色は20種類です。

 

 

 

おわりに

f:id:yuki1732:20170616181212j:plain

 

カラー配色に役立つサイトを17種類を簡単に紹介しました。いかがでしたか?

 

「配色に時間がかかりそう」「アイディアが思い浮かばない」そう感じたら、目的に応じたサイトやツールをうまく活用して、より良いデザインを目指してみてください。

 

 

ゆうき