これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能

これは何色使っているの？

• ロゴはあるけど、何色で作ったかわからない。
• WEBページでテーマカラーをこの色に統一したいけど何色かわからない。

そんなことはないですか？

実はGoogle Chromeの機能でその色を識別してくれる機能があります。

今回はその色の識別する方法を紹介したいと思います。

Google Chromeを使って色を識別する方法

1. 識別したい色があるWEBサイトを表示します。（今回は事例としてInstagramを利用します。）

   

2. WEBサイト上で「右クリック」→「検証」を選択。

   

3. 下記のように右側にでてきます。

   

4. 右に表示されたところの◯の部分にカーソルを合わせると

   

5. ペンキのマークが表示されるので、そのペンキマークをクリックします。

   

6. カーソルが変わり、HTMLカラーコードが表示されるようになります。

   

7. カーソルを識別したい色に合わせてクリックすると「#」から始まるHTMLカラーコードが変わり、識別したい色のHTMLカラーコードが表示されます。

   

わかりやすく動画を作成しましたので参考にご覧ください。



このHTMLカラーコードを使うことでWEBサイトの色を統一したり、相性の良い色を使い分けたりできるようになります。

【関連記事】

• 簡単にきれいな配色デザインが作れる無料ツール「ColorHexa」
• PCでスマホ、タブレット表示を確認しよう！レスポンシブチェックツール
• WordPressテーマ：ポートフォリオを簡単！きれいに作るテンプレートまとめ6選
• プロが選ぶデザイナー用ポートフォリオAdobePortfolioなどまとめ
• えっ！！Wordpressのパーマリンク設定は意外に重要！？
• SEOって聞くけど、SEO対策とは何？
• サイトのURL変更で旧URLから新URLへ転送する方法（301リダイレクトなど）