気になる色も‼ 素敵な色も⁉ 簡単GET! オススメ拡張機能「ColorPick Eyedropper」

記事
コラム
区切りshort.png
ブログ案内short-ver.png
区切りshort.png

こんにちは、京獅郎です。

いろんなサイトやブログを閲覧していると

この色素敵だなぁ」とか
この色使いたいなぁ」など
思ったりしませんか?

自力で似た色を探すのは大変だと思います。

だがしかし!
それは簡単に解決するかもしれませんよ!

今回、拡張機能紹介の第3弾として、
WEB上のカラーコードを
簡単に取得できるChrome拡張機能
ColorPick Eyedropper」をシェアしていきたいと思います。

WEB制作を始める方や、
ブログを始める方はもちろん、
やっていない方も
「へぇこんな事もできるんだぁ」と楽しんでいただけたらと思います。

今回の拡張機能は
超簡単に色のコードがゲットできるので 
オススメです! 
もちろん無料!


22_01京ぶろぐアイコン吹き出しメイン.png


それでは今日も楽しくシェアしていきましょう!

Let's share!

※拡張機能とはなんぞや?と言う方は、
この京ブログ#14に詳しい解説を
しているのでそちらをご覧下さいね。

区切りshort.png

「ColorPick Eyedropper」追加しよう


早速「ColorPick Eyedropper」を使えるように設定していきましょう!

拡張機能紹介WEBストア検索.png

まずは、グーグルのブラウザを開き

①のアプリをクリック。
②のウェブストアを開く。
③の検索窓に「ColorPick Eyedropper」を入力。

これで、「ColorPick Eyedropper」が出てきます。

さぁどんどんいきましょう!
22_01colorPick資料all.png

上記画像
①をクリックし、Chromeに追加。
②:ブラウザ右上の拡張機能のアイコン一覧箇所に
「ColorPick Eyedropper」のアイコンが現れれば設定完了。

これで
「ColorPick Eyedropper」を使用できます。


せっかくなので、使ってみましょう。

区切りshort.png

超簡単にカラーコードをゲット!


我らがココナラさんのトップページで使ってみましょう!
いや使わせて頂きます!

22_02colorPick資料all.png

上記画像
①:先程現れたアイコンをクリック
②:クリック後、ウィンドウが出る。(無視します笑)
③:今回は緑枠のオレンジをゲットしていきます。

22_03colorPick資料all.png

上記画像
①:今回欲しいのはオレンジなので
そのままカーソルをオレンジの上に乗せる。
②:オレンジの上でクリックすると
青枠のウインドウが出ます。
③:この数字とアルファベットをコピーします「FDA93D」

※「FDA93D」これが今回の
オレンジのカラーコードになります。
(例:白は「fff」.黒は「000」)
深く考えなくて良いです。
「これがカラーコードかぁ」ぐらいでいきましょう!


これでカラーコードがゲットできました!

次はこのカラーコードどう使うのかやってみますか!

22_02京ぶろぐアイコン吹き出しメイン.png

区切りshort.png

実際に色を使ってみよう!


先程ゲットしたカラーコードを
photoshopと
WEBページを構成する言語HTML,CSSで
使ってみましょう!


まずはphotoshop。
22_04colorPick資料all.png

①:白い四角の色をオレンジに変えます。
②:コピーしたカラーコードをそのまま貼り付けます。
③はい、ココナラさん帯カラー仕様に変わりました!

大変素敵な色ですね!(媚び売り)


よしよし、次はHTML,CSS!
22_05colorPick資料all.png

①:右側にある元々黒い四角を変えます。
backgroundcolorプロパティに
コピーしていたカラーコードを貼り付けます。
②:貼り付け後に更新すると
ココナラさん帯カラー仕様に変更!!

簡単っ!

区切りshort.png

色の悩みを解決!

22_03ブログノーマルアイキャッチテンプ.png

どうでしたか?

思ったよりお手軽にカラーコードをゲットできたかと思います。

この拡張機能を使うことにより
気になる色を見つけたら、すぐチェックできるようになりますね!

22_04京ぶろぐアイコン吹き出しメイン.png


それでは今日はこの辺で!

では!

区切りshort.png

■贈って使える?キャンペーン中‼

ブログフリーチケット紹介.png

ギフトにも使えるフリーチケットをプレゼントしております!

お取引終了後、評価していただくと
次回、一回限りではございますが
無料で画像制作依頼が出来る
無料チケットをプレゼントしております!

このチケット・・・
なんと!依頼主様以外も使えちゃいます。(笑)

ですので、
画像をお求めのご友人や、
お困りのお知り合いの方などにギフトとして贈ってみてはいかがでしょうか?
自分で使うのも良し!
誰かに贈るのも良し!
ぜひご活用下さいね!

なにかご不明点がございましたら
お気軽にお問い合わせ下さい。
区切りshort.png

■提供サービス一覧





サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す