VSCode拡張機能「Color Info」でcss/scssの16進数カラーコードをRGBにかんたん変換

知識 / 技能 / 効率化

スポンサードサーチ

カラーコードの変換をエディタ上でやりたい

コーディングしていると、CSSの色を#fafafaなどのように16進数カラーコードで指定しているところもあれば、rgb(192, 192, 192, 0.5)などのようにRGBカラーで指定する場面もあります。

カラーコードの変換は、Photoshop/Illustatorでも出来ますし、オンラインツールでも出来ます。しかしVSCodeのcss/scssファイル上で、しかもコピペをせずに変換できれば便利ですよね。

今回はそれを実現するVSCodeの拡張機能「Color Info」と、その設定の仕方をご紹介します。

VSCode拡張機能「Color Info」

今回の設定で出来るようになることです。

「Color Info」で出来るようになること

・html/css/scssファイル上でカラーコードにマウスホバーすると、16進数、RGB、HTMLカラーネームが表示され、カラーコードをクリックすると簡単にRGB(16進数)に変換できる。
・プレビュー画面を見ながらパレットや色相パネルを使って、色を変えたり透過度を変えたりできる。

今回は上記に加えて紙媒体の仕事が多い人向けに、CMYKカラーコードも表示させる設定にしております。(CMYKへの変換はできません)

※キャプチャツールのためスポイトの部分の色が荒くなっています。

それでは一緒に設定していきましょう。

インストール

拡張機能で検索し、インストールをしましょう。インストールが終わったら歯車のアイコンをクリックして設定画面を開きます。

すると下のような画面が出ます。どれでもよいので「setting.jsonの編集」をクリックします。

setting.jsonの設定

デフォルトではハウスホバーすると↓画像のようにプレビュー画面に大きく色が表示されて邪魔なのでこれを消して、普段使わないHSLコードも非表示にします。

setting.jsonのファイルを開いたら、末尾にこちらのコードをコピペします。(コメントアウトは各自削除お願いします)


"colorInfo.excludedFields": [
"hsl",
"preview"
],
"colorInfo.fields": [
"hex",
"rgb",
"css-color-name",//darkgreenなどのHTMLカラーネームを表示
"cmyk"//cmykカラーを使わない人は削除でOK
],
"colorInfo.languages": [
{
"selector": "html",
"colors": "css"
},
{
"selector": "css",
"colors": "css"
},
{
"selector": "scss",
"colors": "css"
},
],

スポンサードサーチ

使い方

カラーコードにホバーして、一番上のカラーコードをクリックすれば変換できます。もちろん右にあるカラーバーなどで色自体を変更することも可能です。

変換のとき途中HSLが入っていますので、そこだけ注意です。

補足とお願い

マウスホバーするとMDNの解説?みたいなものも表示されてしまうのですが、これの非表示の仕方は調べても分かりませんでした(;^ω^)

もし非表示にする方法がわかりましたら教えていただけると幸いです。m(_ _)m

コメント

タイトルとURLをコピーしました