【初心者向け】CSSのカラーコード表示をRGBやHSLに切り替える方法

こんにちは、現役エンジニアの inno_tech です。

CSSのカラーコードを16進数ではなく、RGB(RGBA) や HSL形式で確認する方法をお探しでしょうか？

本記事を見れば、カラーコードの表示を好みのフォーマットに切り替えられるようになります。

本記事では、Google Chromeの開発者ツール(デベロッパーツール)で動作確認しています。

Chrome開発者ツールでカラーコードを確認

Google Chromeで対象のウェブページにアクセスし、色を確認したい要素上で右クリック > 検証 を選択します。すると、Chrome開発者ツールが開き、Stylesパネル内に適用されたCSSスタイルが表示されます。

下の画像の例では、16進数のカラーコードが表示されています。

続いて、このカラーコードの表示方法をRGBやHSLに変更する方法を説明します。

カラーコードの表示方法を切り替え

カラーコードの表示方法を切り替える方法を2つ紹介します。

方法1 ｜ カラーパレット上でカラーコードを切り替え

カラーコードの直前にある色が付いた矩形のアイコン(カラーアイコン)をクリックすると、カラーパレットが開きます。カラーパレットの右側にある矢印ボタンのクリックで、カラーコードの表示を切り替えられます。

方法2 ｜ shiftキーを押しながらカラーアイコンをクリック

カラーコードの直前にある色が付いた矩形のアイコン(カラーアイコン)を、shiftキーを押しながら左クリックすると、カラーコードの表示を切り替えられます。

まとめ

楽天市場ランキング1位になったモバイルモニターが気になる方はこちら。USB Type-Cだけで動作し、持ち運びに便利なのでゲームやPC用のサブディスプレイとしても人気があります。

以前書いたモバイルモニターのレビュー記事はこちら。

あわせて読みたい

【電源アダプタ不要】USB TypeCで動作するモバイルモニター EVICIV EVC-1506 独自レビュー ノートPCの画面だけでは作業しづらいため、モバイルモニター EVICIV EVC-1506(15.6inch)を購入しました。 USB経由の電源だけで動作する、モニターです。 電源アダプタ不...

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!