カラーコードが分からないときに役立つ便利ツールの使い方を解説

たくさんの色見本帳

自分が持っている画像のカラーコードや配色比率を知りたいときに役に立つWebツールを紹介します。

ちなみに、「 カラーピッカー 」とGoogleで検索すると、検索結果の一番上にカラーピッカーが出てきます。

HEX、RGB、CMYK、HSV、HSLと豊富なカラーコードの情報を調べることができます。

イロミル

イロミルは、画像や画像URLからカラーコードを抽出してくれる便利なサービスです。

画像を読み込むと、画面下にカラーバンドが表示されます。

クリックされて抽出された情報は、カラーコード情報としてカラーサンプルが表示されます。

使用する画像とブログサイトの色調を合わせたときなどに使用すると便利なツールです。

イロミル

カラーピッカー

ライン上のカラーバンドから色を選択すると、HEX、RGB、HSBカラーの値を抽出することができます。

カラーピッカー

イメージカラーピッカー

イメージカラーピッカーは、画像をアップロードすると画像で使用されている色の一覧が表示されます。

すぐに色情報がメモできるようにテキストでカラーコードが表示されるので便利なツールです。

イメージカラーピッカー

画像から色を抽出、判定(カラーコード) | 無料で色を調べるオンラインサイト

このWebサイトも、画像をアップロードして画像の気になる色の部分をクリックすると、画面の下部にカラーコード情報を抽出してくれます。

画像から色を抽出、判定(カラーコード) | 無料で色を調べるオンラインサイト

画像から色を取得するツール : PEKO STEP

画像をアップロードして画像にカーソルを当てると、カラーコード情報が取得できます。

また、クリックをすることで気になったカラーコードを色の取得情報をとっておくこともできます。

画像から色を取得するツール : PEKO STEP

画像カラーピッカー

画像をアップロードするか画像のURLを入力するとHEX、RGB、HSVのカラーコードを取得することをできます。

画像カラーピッカー

Color Picker – HTML Color Codes

気になる色を選択すると、カラーコード情報と合わせてWebセーフカラーを考慮したカラーチャートも表示してくれます。

Color Picker – HTML Color Codes

どういう色に見えているのかチェックする

ここまで、「 カラーピッカー 」について、カラーコードの抽出ツールを紹介してきましたが、実際に配色をしてデザインを完成させる前に、選んだ色がどのように見えているのか、推奨される色の使い方に準じているかなどのチェックもできると安心です。

主には、Webアクセシビリティに関するモノですが、チェック方法について3つほど簡単に紹介しておきます。

色覚異常があった場合にどうみえるのか検証するツール|Spectrum

クロームWebブラウザの拡張機能ですが、利用すると、すぐに色覚異常(CVD)の場合に、どのような彩色で見えるのかを検証出来るスゴく便利なツールです。

Spectrum

背景などのコントラスト比を検証できるWebサービス

デザインをするとき、例えば、背景とボタンの色でコントラスト比が低いと、視認しにくい見えにくいボタンになってしまうなど、利用者にとって不便な配色デザインになっていることがあります。

これらの確認をするために、背景となる色とボタンなどのオブジェクト要素で利用されている色のコントラスト比が、Webアクセシビリティとして推奨される状態になっているか確認することが出来ます。

WebAIM

ページ全体の評価を細かく確認出来るツール|Lighthouse for Google Chrome

これも、クロームWebブラウザの拡張機能番での紹介になりますが、導入しておけばクリックだけで、色の事なども含めた視認性など、様々なページ評価が確認出来るのでスゴく便利です。

Lighthouse for Google Chrome

まとめ|多くのカラーコード取得ツール

カラーコードの取得ツールには無料で使える多くのWebツールがあります。

どれも便利なWebツールですが、自分に合うWebツールを見つけてお気に入り登録をしておきましょう。

最後まで読んでいただきありがとうございました。

ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業に対して出資や資金調達などのサポートを中心に事業を行っていました。

現在は、主に自社のブログサイトを中心としたWebメディア運営、Webアプリの開発、LINEスタンプやLINE絵文字等の、2Dイラスト制作を中心にキャラクターデザインをして、そこから3DCGによるコンテンツ制作事業としてAR(拡張現実)やVR(仮想現実)向けのプラットフォームへコンテンツ提供を行っています。

公式ブログサイトのユニコブログ®では、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。

著書 : 『保存版 売上を向上させるためのYouTube活用術』

教育関連では複数の教育機関で定期的に公演を行い、主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演しました。

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら