デザインねこ

現役グラフィックデザイナーがお届けするデザインの時短ネタや参考ネタ、HOW TOなどのお役立ち情報から、ハンドメイド、インテリアや暮らし、ネコとの生活など様々なジャンルの記事を2人と1匹でお届けする(デザインよりの)雑記ブログ。

色選びに困ったあなたに!オススメ配色の参考サービス5選

こんにちは、今日もよろしくお願いします、デザインねこです。(@toranekodesign)

実はなにげにファッションコーディネート色彩能力検定2級、カラーコーディネーター検定2級を持っています。まあ、そんなにえばれる資格ではないのですが。。。今回はそんな色についてのお話です。

先日会社の仕事で製品の色の候補をパターン出しする機会がありまして、とりあえずたくさん用意して欲しいとのことだったので、なんか便利なサイトないかな〜と探していたところ使い勝手のよいサイトを見つけました。わりと周りのデザイナーも知らない、または使ってないという人が多かったんですがいざ使ってみるとたいへん便利だったので今回はご紹介させていただきます。今回は5選という形で紹介しますが、特に使い買っての良いAdobe Color CCCoolorsはまた個別の記事でより深く掘り下げて取り上げたいと思っています。では、オススメの配色の参考サービス5選スタートです!

Adobe Color CC

adobe_color_cc01
illustratoeなど、ほかのソフトでも使えるAdobeの配色サービス

まずは大本命、AdobeのAdobe Color CCをご紹介します。こちらはillustratorなどのデザインソフトでお馴染みのAdobeさんから出ている配色パターン作成サービスで、iOSでのアプリ版も出ています。adobeIDがあると後にご紹介する「テーマ」の保存ができますが、無くても使用することが可能です。 まずは、基本的な機能として、


1.カラーホイールから配色パターンを作る

adobe_color_cc02

カラーホイールの中から基準色を選んでその類似色や補色を選んだり、「モノクロマティック」「トライアド」「補色」などの配色パターンを使った色味を割り出すことができます。


2.写真から配色パターンを作る

03

「画像から作成」を使うと画像から配色パターンを割り出します。また抽出ポインターで抽出する画像の場所色を選ぶことができ、色を調べることも可能です。さらに左にあるカラーテーマを選ぶとテーマに合った配色パターンがピックアップされます。こちらのアプリで作成した配色(テーマ)は作成して公開することができ、そのテーマをillustratorなどの他のAdobeのソフトで呼び出して使うことも可能です。iOS版のアプリもブラウザ版と同様に使用でき、そこで作成したテーマは同期されブラウザ版でも呼び出すことができます。出かけ先で綺麗なものがあれば写真を撮っておいて後から色を抽出、なんてこともできます。配色パターンに悩むことが多い方はこのサービスで配色パターンの引き出しを増やすこともできるのではないかと思います。

Coolors

generate_-_coolors_co

ランダムにいい感じの色を生成してくれる配色が苦手な人にもオススメな配色サービス。

このCoolrsはランダムでカラーパレットを作ってくれる配色ツールです。スペースキーを押すごとにカラーがランダムで変更されていきます。この5つのカラーで気に入ったものはロックする事ができ、再度スペースキーを押すとロックした以外の色がロックした色に合わせてランダムに変更されます。 またこのパレットは各色のカラーコードに直接入力をすることで変更することも可能です。また「Alternative shades」で明度を変更でき、「Adjust」で色相・再度・明度を目盛りをいじって変更、「Drag」でパレットのなかの色の位置を変更することが可能です。作成したパレットはURLに反映されるので、このURLを教えることでパレッドを共有することができます。このほかにもパレットに対応したコピックを表示したり、PDF、PNG、SVGのデータでエクスポートしたりと出力形式にもかなり幅があることも魅力です。また、こういった配色サイトではだいたい用意されている写真から読み込むという昨日も実装されています。

Color dot

colordot2

シンプルで直感に選べる洗練されたインターフェースの配色サービス

シンプルで直感的に色を作れるサービスです。開くと全面が一色のみのインターフェースが開かれるので画面の中でカーソルを置いた場所に合わせて色味が変更されていきます。左右のカーソル移動で色相を変更、上下のカーソル移動で明度を、マウスでスクロールすることで再度を変更することが可能です。希望の色味ができたらクリックすると画面の左にその色がキープされます。 キープされた色はカラーコードが表示されますが、設定ボタンを押してrgbやhslの数値を確認したり、数値を変更して色を変更することができます。また右側のカラースペースではまたカーソルの位置によって色味が変更されるので2色目、3色目・・・と選んで配色を選んでいく事が可能です。ほとんど説明がないのですが、たいへん直感的に使用することができ、シンプルながら洗練されたインターフェイスのサービスです。それとなくいじっていい感じの配色を作ってるだけで配色のトレーニングになるんじゃないかと思います。 使用した事はないのですがi Phoneアプリもあります。

WEB COLOR DATA

colours

サイトのカラー構成比を割り出せる、カラー分析サービス

WEB COLOR DATAはウェブサイトのカラーの構成比を割り出すサービスです。使い勝手はとても簡単で、上に表示されているURLにhtmlを入力すればサイトのカラー構成比がでてきます。カラーホイール上でどの位置の色味なのか、また同様の色味のウェブサイトを探したりといったことも可能です。アップロードしたサイトはNewly Addedにデータが残ってしまうのでアップロードしたくないサイトや制作中のデータなどはアップしない方がいいかと思います。

NIPPON COLORS

nippon_colors

日本の伝統色250色をスタイリッシュに表現するカラーサイト

日本の伝統色のCMYKの4色、RGBのの構成比を表示できるサイト。動きがスタイリッシュで見ていて飽きないですね。和紙のようなテクスチャが引かれておりクリックして変更される色味がとても綺麗です。しかし、日本の伝統色の名前ってとてもキレイな響きのものが多いですね。色の勉強にもオススメなサイトです。

まとめ

さて、今回は「配色の参考サービス5選」をご紹介しました。配色ってデザインを始めた頃はやってみるとけっこう難しいです。色彩検定やカラーコーディネートの勉強などで理論的なものはわかっていてもいざ組み合わせてみると違うものです。たくさんの配色を試して自分のなかに蓄積していくことが大事かと思いますので、ぜひこういったサービスを使って配色に慣れたいものです。今回紹介したAdobe Color CCCoolorsはまた別の機会により詳しくご紹介いたします、それではまた。