自分が持っている画像のカラーコードや配色比率を知りたいとき、また、自分が見ているWebページで気になる配色や色が利用されて入り時に役に立つWebツールを紹介します。
例えば、単純に何か色を探しながら多様な色コードを確認するただけであれば、Google検索で
と入力すると「カラー選択ツール」などが出てきてHEX、RGB、CMYK、HSV、HSLと豊富なカラーコードの情報を調べることができます。
目次
見ているWebサイトの色番号を知りたいとき
Webブラウザを利用して色々なWebサイトを見ているとき
- このリンクは何色だろう？
- このサイトのフォントカラーが知りたい
- この背景の色番号は何を使っているのか？
みたいな時があります。
その時は、Webブラウザが標準で持っているWebページの解析機能ですぐにわかります。
分かりやすいやり方の一つとしては、テキストやボタンなど、HTMLやCSSで描画されている部分にポインタを持っていき、右クリックなどで「検証」であったり、「要素の詳細」、「調査」というような選択が出てくるので、それを選択します。
すると、Webブラウザ内に解析エリアが出てきて、ピンポイントで要素の検証を選んだ場合は、すぐに「color」というプロパティが身立つように出てくるので、カラーコードがすぐに確認できます。
イロミル
イロミルは、画像や画像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）の場合に、どのような彩色で見えるのかを検証出来るスゴく便利なツールです。
Spectrum
※現在はダウンロード出来ません。
とても素敵な機能を持つ拡張機能だったので、このような拡張機能ツールが出てくるのを待っています。
背景などのコントラスト比を検証できるWebサービス
デザインをするとき、例えば、背景とボタンの色でコントラスト比が低いと、視認しにくい見えにくいボタンになってしまうなど、利用者にとって不便な配色デザインになっていることがあります。
これらの確認をするために、背景となる色とボタンなどのオブジェクト要素で利用されている色のコントラスト比が、Webアクセシビリティとして推奨される状態になっているか確認することが出来ます。
ページ全体の評価を細かく確認出来るツール｜Lighthouse for Google Chrome
これも、クロームWebブラウザの拡張機能番での紹介になりますが、導入しておけばクリックだけで、色の事なども含めた視認性など、様々なページ評価が確認出来るのでスゴく便利です。
Webアクセシビリティを考慮する
最近は、Webアクセシビリティにおいても色の選定は重要になってきています。
Web Content Accessibility Guidelines (WCAG) 2.1
などを読んでおくと、何かと役に立つ場面が多くなるのでおすすめです。
まとめ｜多くのカラーコード取得ツール
カラーコードの取得ツールには無料で使える多くのWebツールがあります。
どれも便利なWebツールですが、自分に合うWebツールを見つけてお気に入り登録をしておきましょう。
最後まで読んでいただきありがとうございました。
