カラーコードを調べるときの役立つ便利ツールや使い方を解説

たくさんの色見本帳

自分が持っている画像のカラーコードや配色比率を知りたいとき、また、自分が見ているWebページで気になる配色や色が利用されて入り時に役に立つWebツールを紹介します。

例えば、単純に何か色を探しながら多様な色コードを確認するただけであれば、Google検索で

と入力すると「カラー選択ツール」などが出てきてHEX、RGB、CMYK、HSV、HSLと豊富なカラーコードの情報を調べることができます。

見ているWebサイトの色番号を知りたいとき

Webブラウザを利用して色々なWebサイトを見ているとき

  • このリンクは何色だろう?
  • このサイトのフォントカラーが知りたい
  • この背景の色番号は何を使っているのか?

みたいな時があります。

その時は、Webブラウザが標準で持っているWebページの解析機能ですぐにわかります。

分かりやすいやり方の一つとしては、テキストやボタンなど、HTMLやCSSで描画されている部分にポインタを持っていき、右クリックなどで「検証」であったり、「要素の詳細」「調査」というような選択が出てくるので、それを選択します。

すると、Webブラウザ内に解析エリアが出てきて、ピンポイントで要素の検証を選んだ場合は、すぐに「color」というプロパティが身立つように出てくるので、カラーコードがすぐに確認できます。

イロミル

イロミルは、画像や画像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 Content Accessibility Guidelines (WCAG) 2.1

などを読んでおくと、何かと役に立つ場面が多くなるのでおすすめです。

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

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

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

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

ユニコブログ®ConoHa WINGレンタルサーバーで運用しています。

WebサイトデザインのテーマにはSTORK19を利用しています。

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

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業と事業の共同立ち上げ立ち上げを中心に活動していました。

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

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

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

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

現在、公式として公開しているユニコブログ®以外にも、数十サイトの特化ブログ型Webメディアや、サイト型Webメディアを運用しています。

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

また、当ブログ内でピックアップしているレンタルサーバーとWordPressテーマ、プラグインの組み合わせや相性を検証する日々。合わせて、WordPressテーマのカスタマイズやブログパーツ、プラグインなどの開発を手伝っています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。デジタル認定証についてはプロフィール詳細から確認できるようになっています。

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

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

2022年度は土曜プログラム(マイプログラム)『仕事最前線』での講演などになります。

2023年以降は、オンライン講演での活動が多くなっています。

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

ユニコブログ®運営者のプロフィール詳細

ユニコーンコンサルティング株式会社の公式サイト