空に向かって走る

ときどき英会話、ときどきTOEIC、ときどき便利なこと。思いついたことを書きためます。

画像やサイトのカラーコードを取得!もう配色に悩まない

ブログを書く上で、配色を上手く使うのは非常に大切ですよね。

素敵な色使いの画像やサイトを見て、真似したいけどカラーコードが選べない。

自分でオシャレな配色を考えるのは難しい…。
そんな方にオススメなのが、

イメージカラーピッカーVer2

 指定した写真や画像から瞬時にカラーコードを取得することができます!

ウェブサービスで利用できるので、PCの容量を圧迫しないのも嬉しいです。
さらにスマホ上からも利用できるので、非常に便利です。
では、実際の使い方でご説明します。

使い方

今回はGoogleのカラーコードを取得してみます。
用意した写真はこちら。

f:id:upasan:20160411231002j:plain

誰もがお馴染みGoogle®のロゴです。
綺麗な色ですよね、どんなカラーコードなのでしょうか。いざ!

f:id:upasan:20160411231402j:plain

「ファイルを選択して下さい」からカラーコードを取得したい写真や画像を選びます。

iPhoneの場合、フォトライブラリからか、写真を撮るかを選択できます。

・・・すると、このような感じに!

 画像に含まれる色の割合が多い順に並び、カラーコードが表示されます。
それぞれの色をクリックするとコードをコピーすることができます。
f:id:upasan:20160411231918j:plain
今回の画像では思った以上に余計な色が抽出されてしまいました。
解像度の問題もあるのかな?
けれども色の割合が多い順なので問題無し!

f:id:upasan:20160411232202j:plain

 さらに、先ほどアップロードした画像にマウスのカーソルを乗せると、その場所のコードを取得することも可能です。
上の写真では背景のカラーコードを取得しています。
 以上のことから、今回用いたGoogle®のロゴと同じような配色を使いたい場合は、上のカラーコードで再現することが可能なことが分かりました。

 

Colours

f:id:upasan:20160412212212j:plain

Colours

 こちらはサイトに使用されている色を抽出することができます!

画像と比べて、サイトに使われている色が多いので少し複雑な結果になります。

有名サイトの配色を見るだけでも参考になりますね。

使い方は、1番上の「GET COLOURS」ヘ調べたいサイトのURLを入力するだけです。

 試しにこのブログの色を調べてみました!

f:id:upasan:20160412212547j:plain

カラーコードが分かるだけでなく、分布までも分かります。

思っていたより青色が多く使われていました。

f:id:upasan:20160412212805j:plain

配色が上手な方であればこれらの情報をもとに、コーディネートが捗りそうです。

 まとめ

イメージカラーピッカーVer2やColoursを上手に使えば、イメージ通りの配色が可能になります。
「無印良品」の色や、「ツイッター」の色など気になる色で試してみるだけでも楽しいですよ。
私個人としてはマスキングテープ「mt」の色使いが大好きなので、いつかそんなカラフルなサイトにしてみたいです。

www.masking-tape.jp

以上、カラーコードの調べ方でした!!