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

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

Ad

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

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

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

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

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

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

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

    searchcolor2



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

    searchcolor3



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

    searchcolor4



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

    searchcolor5



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

    searchcolor6



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

    searchcolor7



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

    searchcolor8



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



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


    【関連記事】
Ad
by

IT企業に勤務を経てフリーに。Web制作やWebサービスに関連した役立つ情報を紹介していきます。わかりやすい記事を書くことを心がけています。Apple,Wintersports(Ski,Snowboard),海外旅行が好き。