- ・WEBサイトに使われている色のカラーコードを調べる方法
- ・Google Chromeの拡張機能で簡単にできます
ブログのテーマカラーやアクセントカラーを変えるのは、簡単にできるブログカスタマイズですし、自分の好きな色に変えると気分も上がってやる気もでますよね！
気に入ったWEBサイトなどに使われている色と全く同じ色を、自分のブログでも使いたい！ということもあると思います。
今回はそういったときのために、WEBサイト上で使われている色のカラーコードを調べる方法をご紹介します。
WEBサイトに使われている色のカラーコードを調べる方法
結論、ColorZillaというGoogle Chromeの拡張機能を入れると簡単に調べられます。
まずはGoogle Chromeのブラウザで「ColorZilla」と検索してください。
※パソコンで作業してください
ColorZillaのページに行くと、右にある「Chromeに追加」をクリックして、「拡張機能を追加」でOKです。
すると「ColorZilla installed」というページが表示されますが、無視して閉じてしまって大丈夫です。
次にウインドウの右の方にあるパズルアイコン（拡張機能アイコン）をクリックすると、拡張機能メニューが出てきます。
その中にColorZillaがあるので、ピンマークをクリックしてください。
そうすると下のように、ウインドウにスポイトのアイコンが追加されたと思います。
これがColorZillaのアイコンです。
ちなみにその左に並んでいるいくつかのアイコンは、僕が入れているChromeの拡張機能です。
ColorZillaのアイコンをクリックすると下にメニューが表示されるので、一番上の「Pick Color From Page」を選んでください。
Pick Color From Pageをクリックすると、ColorZilla専用のバーが出現し、カーソルが十字に変わります。
カーソルを自分が取りたい色に合わせてクリックすれば取得完了で、ColorZilla専用のバーに取得したカラーコードが表示されます。
「#」とそのあとに続く「6桁の英数字」がカラーコードです。
今回取得したオレンジ色は「#FF4717」ですね。
あとはwordpressなどのブログ側で、色を変えたい部分のカラーコードを打ち替えるだけ。
このカラーコードを覚えておいて打ち替えても良いですし、ColorZillaで色を取得した時点で自動的にコードがコピーされているので、ペーストもできます。
実際にColorZillaで色を取得している様子を、20秒ほどの短い動画にしているのでイメージがつきやすいかと思います。
過去に取得したカラーコードの履歴も見られる
ColorZillaのメニューには「Picked Color History」という機能もあり、過去に取得したカラーコードの履歴が見られます。
便利な機能ですよね！
今回取得したオレンジ色を、LIFE DRILLのヘッダーに適応するとこんな感じ。
こんなふうにColorZillaを使えば、WEB上の色を簡単に調べて取得できるので、「かっこいいなー」とか「おしゃれだなー」と思うカラーリングのサイトがあれば、採用して遊んでみてください！
それではまた、次の記事で。
