HEXからHSVへのカラー変換
デザインソフトや画像編集ソフトで使うために、CSSのHEXカラーをHSV(色相・彩度・明度/輝度)に変換します。
このツールは役に立ちましたか？
ありがとうございます。ツールの改善に役立てます。
このツールの使い方
- HEXカラーコードを入力してください。
- 色相(0–360°)、彩度(0–100%)、明度・輝度(0–100%)を確認してください。
- HSVとHSBは同じもので、「V」と「B」はどちらも輝度を表します。
HEXカラーをHSV(HSBとも呼ばれる — 色相・彩度・輝度)に変換します。PhotoshopをはじめとするデザインアプリのカラーピッカーはこのHSVモデルを使用しています。
計算式
Parse hex to normalized r, g, b (0–1). Then:max = max(r, g, b), min = min(r, g, b), d = max − min
V = max (value/brightness)S = d / max (or 0 if max = 0)
Hue sector (same as HSL):
• R max: H = ((g−b)/d + 6) mod 6
• G max: H = (b−r)/d + 2
• B max: H = (r−g)/d + 4
Then H = H/6 × 360°
よくある質問
- HSLとHSVの違いは何ですか?
- HSVでは、明度(Value)=100%かつ彩度=0%で白になります。HSLでは、彩度に関わらず明度(Lightness)=100%であれば常に白になります。HSVはデザインソフトのカラーピッカーでより一般的に使われます。
- HSVはHSBと同じですか?
- はい。HSV(色相・彩度・明度)とHSB(色相・彩度・輝度)は、名称の違いだけで同一のモデルです。