ペコログ

ペコネット付録ページ

画面の色情報(HEX,RGB,HSL)値の取得

2025-03-04 21:59:06
2025-03-04 22:31:47
目次

Webページなどを制作していると画面の色情報を知りたいことなどがある。

Chromeの拡張機能「ColorPick Eyedoropper」でブラウザ上の色情報を便利に取得していたが先日、サポート終了により機能がオフにされた。

Chromeにて「ColorPick Eyedropper」のサポート終了を知らせるメッセージ。機能がオフに

な、なんだ… 終了か…唐突の感

これを機に「PowerToys」をインストールしてブラウザ上だけではなく、PCディスプレイ上の色情報を取得してみることにする。

PowerToysとは

Microsoftが開発するユーティリティソフトウェアでWindowsの使い勝手を向上させるさまざまなモジュール(機能)を追加することが出来ます。今回はこのPowerToysのモジュールのひとつ「Color Picker」を取り上げています。

PowerToysのインストール

Microsoftストアからインストールします。
Microsoftストアの「PowerToys」のダウンロードページ

Microsoftストアの「PowerToys」のページ

 

PowerToysのダッシュボード

PowerToysのダッシュボード。「Color Picker」を有効にしておく(デフォルトで有効になっています)

Color Pickerを使う。

PowerToysが起動していれば(デフォルトではWindowsログインと同時に自動起動している)ショートカットで「Windowsキー」+「Shift」+「C」で「Color Picker」が使用できるようになる。

PowerToysのモジュール「Color Picker」を起動して色情報を取得。

ディスプレイ上のマウスポインタの置かれている位置のHEX値が表示されるようになります。ここでは当ブログを開いて適当な位置の色を取得しています。(上画像の赤枠部分)

PowerToysのモジュール「Color Picker」よりHEX値、RGB値、HSL値の表示画面。

そのままクリックするとRGB値やHSL値も表示されます。

この記事を書いた人

ペコネット

ペコネット付録のページ(ペコログ)をブログ形式で制作・編集しています。