カラーコードの変換をエディタ上でやりたい
コーディングしていると、CSSの色を#fafafaなどのように16進数カラーコードで指定しているところもあれば、rgb(192, 192, 192, 0.5)などのようにRGBカラーで指定する場面もあります。
カラーコードの変換は、Photoshop/Illustatorでも出来ますし、オンラインツールでも出来ます。しかしVSCodeのcss/scssファイル上で、しかもコピペをせずに変換できれば便利ですよね。
今回はそれを実現するVSCodeの拡張機能「Color Info」と、その設定の仕方をご紹介します。
VSCode拡張機能「Color Info」
今回の設定で出来るようになることです。
「Color Info」で出来るようになること
・JavaScriptファイル上ではカラーコードを参照できるものの、変換はできないようです。(2020.02.04追記）
・プレビュー画面を見ながらパレットや色相パネルを使って、色を変えたり透過度を変えたりできる。
今回は上記に加えて紙媒体の仕事が多い人向けに、CMYKカラーコードも表示させる設定にしております。（CMYKのコードは見れますが、変換はできずコピペする形となります。）
※キャプチャツールのためスポイトの部分の色が荒くなっています。
インストール
拡張機能で検索し、インストールをしましょう。インストールが終わったら歯車のアイコンをクリックして設定画面を開きます。
すると下のような画面が出ます。どれでもよいので「setting.jsonの編集」をクリックします。
setting.jsonの設定
デフォルトではハウスホバーすると↓画像のようにプレビュー画面に大きく色が表示されて邪魔なのでこれを消します。普段使わないHSLコードも非表示にします。
setting.jsonのファイルを開いたら、末尾にこちらのコードをコピペします。（コメントアウトは各自削除お願いします）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
"colorInfo.excludedFields": [ "hsl",//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" }, //javascript上でもカラーコードのみ参照したい方は下記を追加 { "selector": "javascript", "colors": "css" }, ], |
使い方
カラーコードにホバーして、一番上のカラーコードをクリックすれば変換できます。もちろん右にあるカラーバーなどで色自体を変更することも可能です。
変換のとき途中HSLが入っていますので、そこだけ注意です。
補足
(2020.02.04追記）
jsファイル上でも見れないのかというご質問をいただいたので調べて試してみました。
しかしカラーコードは表示されるものの、プレビュー画面が表示されず、変換もできませんでした。
「Color Info」の公式ドキュメントを見ながらやってみましたが、表記の仕方が悪いのか、そういう仕様なのかはっきりさせることはできませんでした。
もし上手くいく書き方があればコメントなどで教えていただけると嬉しいです。
コメント
いつもお世話になっております。
突然のコメント失礼いたします。
こちらの拡張機能はJavaScriptでは機能しないようなのですが、仕様なのでしょうか？
よろしくおねがいします。
コメントありがとうございます。
私もセレクターにjavascriptを追加して試してみましたが、カラーコードは表示されるけど変換はできない、という結果でした。
拡張機能の公式ドキュメントでは”selector” – VSCode document selector.と表記されており、対応できるような感じですが、言語によってはダメなのかもしれません。
ハッキリとした回答ができず申し訳ございません。