ちびめがねアンテナではバナーやアイキャッチ画像を作る時、記事の中で紹介している企業やサービスの「ブランドカラー」になるべく近い色を使うようにしています。
例えばこちらの記事では、アイキャッチ画像の背景色にアパレル企業「BEAMS」のブランドカラーを使用しています。
BEAMSのことを知っている方がこのアイキャッチ画像の色を見ただけで「BEAMSの事が書いてあるんだな」と思ってくれるのが理想です。
僕が企業のブランドカラーやロゴ等で使われている色（カラーコード）を抽出する時に使っているのが「iromiru（イロミル）」というサービスです。
iromiru (イロミル) – 画像からカラーコード抽出便利サービス
- 画像URLをコピーする
- 画像を読み込む
- カラーコードを抽出する
わずか３STEPで簡単に画像に使われているカラーコードを抽出することができます。
企業のブランドカラーやロゴで使われている色のカラーコードが知りたい時に便利なWEBサービス「iromiru（イロミル）」をご紹介いたします。
クリックできる目次
iromiru（イロミル）の使い方／カラーコードを抽出する方法
iromiru（イロミル）の使い方を紹介します。
こちらの「Google」のロゴで使われている色のカラーコードを抽出してみましょう。
STEP1 画像URLをコピーする
iromiru（イロミル）でカラーコードを抽出するためには「画像のURL」が必要です。
カラーコードを知りたい画像の上で「右クリック」して「画像アドレスをコピー」を選択します。
これで「画像のURL」をコピーできました。
STEP2 画像を読み込む
iromiru（イロミル）にアクセスして先ほどコピーした画像URLを貼り付けます。
赤で囲まれている部分です。
画像URLを貼り付けたら「読み込み」をクリックします。
STEP3 カラーコードを抽出する
読み込みをクリックすると、画像で使用されている色が分析されます。
それぞれの色をクリックするとカラーコードが抽出されます。
抽出されたカラーコードはコピーして使いましょう。
僕はアイキャッチ画像を作る時にCanvaを使っているので「背景色」にコピーしたカラーコードを貼り付けて使っています。
たった３STEPで簡単にGoogleのロゴで使用されているカラーコードを抽出することができました。
iromiru (イロミル) – 画像からカラーコード抽出便利サービス
iromiru（イロミル）のカラーコード抽出精度は高いのか
実際に抽出したGoogleのロゴで使われているカラーコードで検証してみます。
iromiru（イロミル）で抽出したカラーコードは次のとおりです。
- 青：4285f4
- 赤：ea4335
- 黄：fbbc05
- 緑：fbbc05
Googleのロゴで実際に使われているカラーコードはこちらのページで公表されています。
- 青：4285f4
- 赤：db4437
- 黄：f4b400
- 緑：0f9d58
青のカラーコードは一致していましたが、赤・黄色・緑ははずれていました。
完璧に同じ色を使いたい！って思うのであればiromiru（イロミル）は使えませんが、同じような雰囲気であれば十分作り上げることができるのではないでしょうか？
iromiru (イロミル) – 画像からカラーコード抽出便利サービス
まとめ：企業のブランドカラーコードを抽出するならiromiru（イロミル）が便利
企業のブランドカラーやロゴの色が知りたい時に便利なWEBサービス「iromiru（イロミル）」をご紹介いたしました。
画像URLをコピーしてカラーコードを抽出する方法を解説しましたが、保存されている画像をドラック＆ドロップしても使えます。
画像URLがコピーできない時には一旦PCに画像を保存すれば良いですね。
自分のサイトに合わせてこんな使い方もできますよ。
バナーやアイキャッチ画像に拘りたい人はカラーコード抽出サービスiromiru（イロミル）を是非使ってみてくださいね！
iromiru (イロミル) – 画像からカラーコード抽出便利サービス
