WordPressやWebデザインなどに役立つ情報をご紹介

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

2016年2月22日 Web, webサービス, Web制作メモ, デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【関連記事】

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。