フロントの人の雑多メモ

【拡張機能不要】VSCodeでカラーコードを16進数とRGBの相互変換する方法

【拡張機能不要】VSCodeでカラーコードを16進数とRGBの相互変換する方法

VSCodeで16進数のカラーコードとRGBカラーコードを相互変換する方法をご紹介します。

「デザインデータから16進数でコピってきたけど、半透明にしたいからRGBAにしたい」ということよくありますよね。

この色をRGBに変換します。

VSCode CSS ハッシュ付き16進数カラーコード

自動表示される四角い色の部分をホバーします。

VSCode CSS カラーデコレータ

これが表示されない方は、設定から「Editor: Color Decorators」にチェックが入っているかご確認ください。

VSCode 設定 Editor: Color Decorators

上部のカラーコードをクリックします

VSCode CSS カラーデコレータ 16進数変換

「hsl()」→「hwb()」→「rgb()」→「16進数」の順番で変換することができます!

VSCode CSS カラーデコレータ rgb変換

あとはご自由に、rgba()にして半透明にしたりできますね。

VSCode CSS rgba

以上、VSCodeでCSSなどのカラーコードを16進数からRGBに相互変換する方法でした!

コメント

内容を確認の上、個人情報などは省いて掲載させていただきます。

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください。

頂いた個人情報は開示しません。返信のためだけに利用いたします。

直接送信されます。確認の上、「送信」してください。

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る