HSV から RGB への変換ツール
HSV/HSB カラー(色相 0〜360°、彩度と明度 0〜100%)を RGB と HEX コードに変換します。チャンネルごとの内訳とライブのカラープレビューを表示します。
入力
カラーホイール上の位置を度数で指定します(0〜360)。
色の鮮やかさ。0%(グレー)から 100%(原色)まで。
明るさ。0%(黒)から 100%(最も明るい)まで。
出力
| 項目 | 値 |
|---|---|
| No data yet | |
ここに色が表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/hsv-to-rgb-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"hue": "0",
"saturation": "100",
"value": "100"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `hsv-to-rgb-converter` tool (HSV to RGB Converter) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/hsv-to-rgb-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HSV から RGB への変換ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
HSV カラー — 色相(Hue)、彩度(Saturation)、明度(Value)で表される色 — を、CSS やデザインツール、コードで使う RGB と HEX の値に変換します。3 つのスライダーを動かすと、RGB の文字列、HEX コード、チャンネルごとの内訳、ライブのカラープレビューがすぐに更新されます。HSB とも呼ばれ、この場合の B は明度(Brightness)を意味します。
HSV カラー空間とは?
HSV は、赤・緑・青の光の混合としてではなく、人が普段色をどう捉えるかに近い形で色を表します。3 つの要素があります。
- 色相 (Hue, H) — 基本となる色。カラーホイール上の 0〜360 度の角度で表されます。0° が赤、120° が緑、240° が青で、360° で再び赤に戻ります。
- 彩度 (Saturation, S) — 色の鮮やかさや「純度」。0%(グレー)から 100%(最も鮮やかな色)まで。
- 明度 / 輝度 (Value / Brightness, V) — 色の明るさ。0%(黒)から、色相と彩度で可能な最も明るい状態の 100% まで。
色相・鮮やかさ・明るさが分かれているため、HSV はカラーピッカーや画像編集ソフトで人気があります。たとえば、ほかの値を変えずに彩度だけを少し下げるといった調整が簡単にできます。一方、RGB は画面やスタイルシートがそのまま扱える形式なので、2 つの形式の間で変換することは日常的によくある作業です。
このツールの使い方
- 色相スライダー(0〜360°)で基本の色を選びます。
- 彩度(0〜100%)で鮮やかさを調整します。
- 明度 / 輝度(0〜100%)で明るさを調整します。
出力は自動的に更新されます。次の情報が得られます。
- CSS にそのまま貼り付けられる
rgb(r, g, b)の文字列 - 対応する
#RRGGBB形式の HEX コード - 各チャンネルの値を一覧にした表
- カラーのプレビュー(コピー可能な HTML 付き)
コピーボタンを使えば、どの値もすぐに取得できます。
変換の仕組み
このツールは標準的な HSV から RGB への変換アルゴリズムを使用しています。色相の円は 60° ずつ 6 つのセクターに分けられ、各セクター内では 2 つのチャンネルが固定され、1 つのチャンネルが直線的に変化します。その変化量は彩度と明度でスケーリングされます。結果は 0〜255 の整数のチャンネル値に丸められます。いくつかの基準点で計算を確認できます。H0/S100/V100 は純粋な赤 rgb(255, 0, 0)、H120 は純粋な緑、H240 は純粋な青、S0/V50 は中間のグレー rgb(128, 128, 128) になります。
HSV は HSB や HSL と同じですか?
HSV と HSB は同じモデルの 2 つの呼び方です。HSL(Hue、Saturation、Lightness)は別のモデルで、その明るさの軸は HSV の明度とは振る舞いが異なるため、両者は互換ではありません。
入力した色のデータは端末の外に送られますか?
いいえ。変換はすべてブラウザ内で行われ、入力した内容がアップロードされたり保存されたりすることはありません。
出力される HEX の形式は?
大文字の 6 桁の #RRGGBB 形式で、アルファチャンネルはありません(HSV には透明度の要素がないためです)。