自分が持っている画像のカラーコードや配色比率を知りたいときに役に立つWebツールを紹介します。
ちなみに、「 カラーピッカー 」とGoogleで検索すると、検索結果の一番上にカラーピッカーが出てきます。
HEX、RGB、CMYK、HSV、HSLと豊富なカラーコードの情報を調べることができます。
目次
イロミル
イロミルは、画像や画像URLからカラーコードを抽出してくれる便利なサービスです。
画像を読み込むと、画面下にカラーバンドが表示されます。
クリックされて抽出された情報は、カラーコード情報としてカラーサンプルが表示されます。
使用する画像とブログサイトの色調を合わせたときなどに使用すると便利なツールです。
カラーピッカー
ライン上のカラーバンドから色を選択すると、HEX、RGB、HSBカラーの値を抽出することができます。
イメージカラーピッカー
イメージカラーピッカーは、画像をアップロードすると画像で使用されている色の一覧が表示されます。
すぐに色情報がメモできるようにテキストでカラーコードが表示されるので便利なツールです。
画像から色を抽出、判定(カラーコード) | 無料で色を調べるオンラインサイト
このWebサイトも、画像をアップロードして画像の気になる色の部分をクリックすると、画面の下部にカラーコード情報を抽出してくれます。
画像から色を抽出、判定(カラーコード) | 無料で色を調べるオンラインサイト
画像から色を取得するツール : PEKO STEP
画像をアップロードして画像にカーソルを当てると、カラーコード情報が取得できます。
また、クリックをすることで気になったカラーコードを色の取得情報をとっておくこともできます。
画像カラーピッカー
画像をアップロードするか画像のURLを入力するとHEX、RGB、HSVのカラーコードを取得することをできます。
Color Picker – HTML Color Codes
気になる色を選択すると、カラーコード情報と合わせてWebセーフカラーを考慮したカラーチャートも表示してくれます。
Color Picker – HTML Color Codes
どういう色に見えているのかチェックする
ここまで、「 カラーピッカー 」について、カラーコードの抽出ツールを紹介してきましたが、実際に配色をしてデザインを完成させる前に、選んだ色がどのように見えているのか、推奨される色の使い方に準じているかなどのチェックもできると安心です。
主には、Webアクセシビリティに関するモノですが、チェック方法について３つほど簡単に紹介しておきます。
色覚異常があった場合にどうみえるのか検証するツール｜Spectrum
クロームWebブラウザの拡張機能ですが、利用すると、すぐに色覚異常（CVD）の場合に、どのような彩色で見えるのかを検証出来るスゴく便利なツールです。
背景などのコントラスト比を検証できるWebサービス
デザインをするとき、例えば、背景とボタンの色でコントラスト比が低いと、視認しにくい見えにくいボタンになってしまうなど、利用者にとって不便な配色デザインになっていることがあります。
これらの確認をするために、背景となる色とボタンなどのオブジェクト要素で利用されている色のコントラスト比が、Webアクセシビリティとして推奨される状態になっているか確認することが出来ます。
ページ全体の評価を細かく確認出来るツール｜Lighthouse for Google Chrome
これも、クロームWebブラウザの拡張機能番での紹介になりますが、導入しておけばクリックだけで、色の事なども含めた視認性など、様々なページ評価が確認出来るのでスゴく便利です。
まとめ｜多くのカラーコード取得ツール
カラーコードの取得ツールには無料で使える多くのWebツールがあります。
どれも便利なWebツールですが、自分に合うWebツールを見つけてお気に入り登録をしておきましょう。
最後まで読んでいただきありがとうございました。
