カラーピッカー・カラーコード変換 — HEX/RGB/HSL/HSBを相互変換
画面上の色をスポイトで取得し、HEX・RGB・HSL・HSBのカラーコードを相互変換できる無料ツールです。
#1カラーピッカー
#2カラーコード変換
R
G
B
H
S
L
H
S
B
よくある質問
Q. EyeDropper（スポイト）機能が使えません
A. ブラウザのEyeDropper APIに対応しているChrome / Edge / Operaなどでのみ利用できます。Firefox / Safariは現在非対応です。代わりに画像をアップロードして色をピックする機能や、HEX/RGB値を直接入力する機能をご利用ください。
Q. HEX / RGB / HSL の違いは？
A. HEX（#RRGGBB）はWebでよく使われる16進数表記、RGBは0〜255の3チャンネル表記、HSLは色相・彩度・輝度で表す表記です。同じ色を異なる形式で表現したもので、デザイン作業では用途に応じて使い分けます。
Q. 色のコントラスト比は確認できる？
A. 本ツールではメインの色取得に特化していますが、選んだ色のRGB値からW3C式（(L1+0.05)/(L2+0.05)）でアクセシビリティのコントラスト比を別途計算可能です。WCAG基準では本文4.5:1以上が推奨されています。
Q. 取得した色を保存できますか？
A. ブラウザのlocalStorageに最近使った色が自動保存されます。複数のサイトで色を統一したい場合は、HEX値をコピーして保存することをおすすめします。
#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など）ではスポイトボタンは表示されません。