Date: 2020/06/29

【カラーパターンで迷ったときに!】配色パターン参考サイトまとめ

何種類も色展開がある広告物やパッケージが並んでいるのを見ると
なんだかワクワクするデザイナー、中内です。
出かけるたびに、ようもないのに立ち寄ってしまうカラーコンタクトのお店・・・。
単純にパッケージが自分の年齢向けに作られていることと、
パッケージの色展開がたくさんあることが相まって、
ワクワクが抑えきれずついつい立ち寄ってしまいます。
今回はそんな色展開についてのブログです。

さて、デザイナーのみなさん。ベースの色は決まっているけどアクセントカラーを何色にするか悩む・・・
制作物の色違いのパターンをいくつか作りたいけど配色に悩む・・・こんなことってありませんか?
今回はそんなときに役立つ配色パターンの参考サイトをご紹介します。

ColorDrop

m_color02

ColorDrop

こちらは4色のカラーパレットを集めたサイトです。
ページ右上の検索欄に色の名前(英語)を入力して、色を絞って検索することができます。
メニュー内の『Scan Image』では、画像からカラーパレットを作成することも可能です。

m_color03

一覧表示されているカラーパレットのひとつをクリックすると、
サイドバーにパレットの各色のカラーコードが表示されます。
表示されているカラーコードはワンクリックでコピーすることができます。

また、Color Dropでは、気に入ったカラーパレットをお気に入り登録しておくことが可能で、
各カラーパレットの下部分に表示されているハートマークをクリックすることで
お気に入りに追加することができます!

Adobe color

m_color04

Adobe color

こちらは5色のカラーパレットを集めたサイトです。
画面上中央の『検索』『トレンド』から、Adobeユーザーが投稿した
様々なカラーパレットを閲覧するこできます。
各パレットの詳細ページでは、ワンクリックでカラーコードをコピーする事が可能です。

Adobe colorでは、気に入ったカラーパターンを
ブラウザ上でCCライブラリに登録することができるのがとても便利です。
また、画面上中央の『作成』では、
画像をベースにカラーパレットやグラデーションを作成することができます。
自分で作成したカラーパレットやグラデーションも
ブラウザ上でCCライブラリに登録することができます。

m_color05 m_color06

 

Pigment

m_color07

Pigment

こちらは2色のカラーパレットを集めたサイトです。
シンプルな機能とデザインで、とても使いやすいサイトとなっています。(あと動きがすごく可愛い)
サイドバーに表示されているパレットマークをクリックすると、
ベースの色を絞って検索することが可能で、
一覧・詳細ページ共にトーンを調整しながらパレットを確認することもできます。

m_color08

どのページでもワンクリックでカラーコードをコピーすることが可能です。
また、画面右上の虫眼鏡マークをクリックすると、
Unsplashの画像をベースに、カラーパレットを検索することもできます。

m_color09

中内

この記事を書いた人

「体力・集中力・うわばみ」が揃った脅威の若手。絵・アニメ・演劇、グラフィックに関する事が好きで専門学校に進学。講師の谷川から真面目ぶりを買われてスカウトされ、インターンを経験後、入社を決める。子供の頃から続けていた陸上と水泳により培われた体力は仕事でも生かされ、鬼の集中力は全社員の知るところ。お酒の強さも全社員の知るところ。今後はデザインの幅を増やし、作業スピードアップが目標。シルバニアファミリーの後頭部フェチ。