ディスプレイ

カラーピッカー・カラーコード変換(HEX/RGB/HSL/HSB)

画面上の色をスポイトで取得し、HEX・RGB・HSL・HSBのカラーコードをリアルタイムで相互変換。ワンクリックコピー対応の無料カラーコード変換ツールです。

カラーピッカー・カラーコード変換 — HEX/RGB/HSL/HSBを相互変換

画面上の色をスポイトで取得し、HEX・RGB・HSL・HSBのカラーコードを相互変換できる無料ツールです。

#1カラーピッカー

#2カラーコード変換

R
G
B
H
S
L
H
S
B

#3カラーコード変換とは?

カラーコード変換とは、色を表す形式(HEX、RGB、HSL、HSBなど)を相互に変換することです。Webデザインやアプリ開発では場面に応じて異なるカラーコード形式を使い分ける必要があります。

HEX(16進数カラーコード)について

HEXコードは #RRGGBB の形式で色を表します。CSSで最も広く使われる形式で、Rが赤、Gが緑、Bが青の成分を16進数(00〜FF)で表現します。3桁の省略形(例: #fff = #ffffff)にも対応しています。

RGB / HSL / HSBの違い

RGB は赤・緑・青の光の三原色を0〜255の数値で指定する加法混色モデルです。HSL は色相(Hue)・彩度(Saturation)・明度(Lightness)で色を定義し、直感的に色の明暗を調整しやすいのが特徴です。HSB(HSVとも呼ばれる)は色相・彩度・明るさ(Brightness/Value)のモデルで、PhotoshopやFigmaなどのデザインツールで広く使われています。

EyeDropper API(スポイト機能)について

EyeDropper APIはブラウザのネイティブ機能で、画面上の任意のピクセルから色を取得できます。Chrome・Edgeなどで対応しており、Webページだけでなくデスクトップ上のあらゆる色をスポイトで取得できます。非対応ブラウザ(Firefox・Safariなど)ではスポイトボタンは表示されません。