RGB→HSV変換ツール
RGBカラーをカラーホイールで使う数値に変換します。オレンジの255, 128, 0は色相が約30°、彩度1、明度1です。ピッカーで色相と明るさを分けて扱いたいときに便利です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 抵抗（Ω）
- 255
- G
- 128
- B
- 0
- H
- 30.1176470588
- S
- 1
- 電圧（V）
- 1
- 色相（度）
- 30.1176470588
このRGB→HSV変換ツールは、赤・緑・青の3つのチャンネル強度(それぞれ0から255までの整数)を受け取り、度数で表した色相と、0から1までの単位小数で表した彩度・明度を返します。デザイナー、フロントエンド開発者、学生は、パレットがsRGBチャンネルで管理されている一方でUIには人間が直感的に扱える色相ホイールや彩度スライダー、明度コントロールが必要なときに、この対応関係を使用します。エンジンは完全に決定的で、各チャンネルを255で正規化し、最大値と最小値を求めてその差(delta)を計算した後、古典的な6セクターの色相公式と標準的な彩度・明度の恒等式を適用します。ネットワーク通信や乱数、時計への依存は一切ありません。パレット作業やアニメーションのキーフレーム、宿題の確認にはブラウザで無料でご利用いただけます。
RGBが色相・彩度・明度になる仕組み
CSSやほとんどのWebグラフィックスで使われる8ビットsRGBモデルでは、赤・緑・青のそれぞれが0から255までの整数チャンネルです。HSVは同じ色を3つの知覚的な軸に組み替えます。
色相は色相環上の位置を0以上360未満の度数で表し、彩度はグレー(0)から純色(1)までその色の純度を表し、明度は黒(0)からその色相の最も明るい形(1)までの全体的な明るさを表します。変換ではまず各チャンネルを255で割って正規化し、3つの単位チャンネルのうち最大のものをCmax、最小のものをCmin、その差をdeltaとします。
deltaがゼロ(グレー軸)のとき色相はゼロです。それ以外の場合は、どのチャンネルがCmaxかと、赤が優勢な場合・緑が優勢な場合・青が優勢な場合を色相環に対応付けるモジュラーなセクター公式から色相が決まります。彩度はCmaxがゼロのときゼロ、それ以外はdelta/Cmaxであり、明度は単純にCmaxです。
パーセンテージや浮動小数点のチャンネルを入力として受け付ける経路はなく、256を255に暗黙にクランプすることもありません。HSVからRGB、HEXへのパッケージング、HSL、LAB、またはCMYKが必要な場合は、専用の複数形式ツールまたは逆変換ツールをご利用ください。
r、g、bの読み取り方とHSVの再現性について
文字列チャンネルの前後の空白はトリムされます。任意の先頭プラス記号は、残りの文字が範囲内の整数として解析できる10進数字である場合にのみ許可されます。単純なJavaScriptの数値は、0から255の範囲内の有限の整数である場合にのみ受け付けられます。
128.5のような値は丸められるのではなく検証に失敗し、負の値や256以上の値は、対象のチャンネル名を示し0から255の範囲内でなければならないと述べるメッセージとともに失敗します。検証後、変換は単位チャンネルに対する閉じた形の演算のみを使用し、その後浮動小数点成分をプラットフォーム間で安定するよう固定の小数桁数に丸めます。
純粋な赤は、彩度・明度が最大の状態で色相ゼロに対応し、純粋な黒は色相・彩度・明度がすべてゼロに対応し、255・128・0のような混在したチャンネルは、彩度・明度が最大の状態でおよそ30度付近の暖色系の色相を生成します。
デザイン・学習・ソフトウェアにおけるRGB→HSV変換の位置づけ
デザイナーがこの対応関係に出会うのは、ブランドガイドがRGBのスウォッチを列挙していて色相ベースのピッカーやアニメーションシステムにH・S・Vが必要なとき、スクリーンショットのスポイトツールが赤緑青を報告し生成的なパレットが明度を保ったまま色相を回転させなければならないとき、あるいはアクセシビリティツールが彩度とは切り離して明るさを扱わなければならないときです。
学生は、円柱形のカラーモデルを紹介するコンピューターグラフィックス講座、チャンネルスライダーとHSVホイールを行き来するデジタルアート授業、短い3つ組を暗算で変換させる面接のウォームアップでこれを目にします。
フロントエンド開発者は、デザイントークンの固定値を用意するため、色相と明るさを公開するカラーピッカーUIを動かすため、あるいはキャンバスシェーダーに渡す前に個別のr・g・b列を保存するスプレッドシートから取り込んだデータを正規化するために、スクリプトから同じ契約を呼び出します。
HEXやCMYKが必要な場合は複数形式のカラーツールと、デザインシステムの衛生管理のための小さなラボを構築する場合は他の無料で決定論的な変換ツールと組み合わせてご利用ください。
活用例
色相ホイールとパレットツール
ピッカー、生成的なパレット、アニメーションのキーフレーム向けに、ブランドのRGB3つ組を色相・彩度・明度に変換します。
決定論的なテスト用固定値
カラーヘルパーに関する単体テスト、プロパティチェック、CIアサーション向けに、再現可能なHSVの結果を生成します。
宿題と授業デモ
不透明な計算アプリに頼らずに、学生のRGB→HSV変換を確認したり、円柱形のカラーモデルをライブでデモしたりします。
よくある質問
h、s、vの単位は何ですか?
色相hは[0, 360)の度数です。彩度sと明度vは[0, 1]の範囲の単位小数です。
このツールはHSVをRGBに戻す変換もできますか?
いいえ。 このツールは整数のRGBチャンネルをHSVに変換するのみです。HSVからRGBへの変換や他の色空間が必要な場合は、逆変換または複数形式のカラー変換ツールをご利用ください。
グレーの色相と彩度はいくつになりますか？
どちらも0です。赤・緑・青が等しいと最大と最小のチャンネルに差がなく、色はグレーの軸に乗ります。変わるのは明度だけで、黒が0、白が1です。
オレンジの255, 128, 0はなぜ彩度と明度が最大ですか？
明度は最大のチャンネルを255で割った値で、ここでは1です。彩度は最大と最小の差を最大で割った値で、これも1になります。純粋な赤との違いは約30°の色相だけです。
255を超える値を入れるとどうなりますか？
255に丸められることはなく、わかりやすいメッセージで受け付けられません。赤・緑・青は0〜255の整数で入力してください。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/rgb-hsv \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":255,"g":128,"b":0}'const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsv", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 255,
"g": 128,
"b": 0
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/rgb-hsv",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 255,
"g": 128,
"b": 0
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsv", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":255,"g":128,"b":0}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":255,"g":128,"b":0}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-hsv", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"r": 255,
"g": 128,
"b": 0
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_hsv",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
min_channel | 0 |
max_channel | 255 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
0から255の範囲外のチャンネルは、暗黙にクランプされることなく、明確なinvalid_inputエラーで拒否されます。CIやデザインシステム、授業デモで同一の固定値が必要な場合は、成功したリクエストごとに$0.002でAPIを呼び出すこともできます。
RGB→HSV変換の意味とレスポンスに含まれる内容
この計算ツールは、検証済みの整数r・g・b、丸められたh・s・v、わかりやすさのための重複フィールドh_degrees、スライダーUI向けに100倍したs_percentとv_percent、rgb関数文字列、hsvの要約文字列、methodタグrgb_to_hsv、そして簡潔な公式の再掲を返します。エンジンは、3つの正当なチャンネルから厳密なHSVの3つ組を構築するか、そうでなければinvalid_inputでリクエストを拒否します。拒否されるケースには、r・g・bのいずれかのフィールドの未入力、トリム後の空文字列、整数でない数値、数値でないテキスト、InfinityまたはNaN、そして0未満または255を超えるチャンネルが含まれます。このページが答えるのは、トークンや単体テスト、API利用者に適した安定したHSVの3つ組への整数RGBチャンネルの変換のみです。
r、g、bの読み取り方とHSVの再現性について
優先的に使用するフィールドは、赤にはr、緑にはg、青にはbですが、赤についてはredと大文字のR、緑についてはgreenと大文字のG、青についてはblueと大文字のBといったエイリアスも受け付けるため、スプレッドシートやクエリ文字列、型付きフォームでも列名を変更せずに同じ契約を再利用できます。自動化パイプライン内でチャンネルの正規化を自分で再実装せずに同一の数学的結果が必要な場合は、このページの無料ブラウザ実行と有料APIを組み合わせてご利用ください。
デザイン・学習・ソフトウェアにおけるRGB→HSV変換の位置づけ
学習者が3つのRGBフィールドを調整し、UIが重いグラフィックスライブラリを往復せずにライブの色相・彩度・明度を表示しなければならないとき、製品や教育向けツールはこの変換を利用します。このページでは処理はすべてブラウザ内で完結します。API経由の場合、成功した照会1件ごとに$0.002かかり、検証に失敗した場合は課金されず、レスポンスを返した後は何も保存されません。この無料の対話的な探索と、同一結果の有料APIという分離は、KITのtier-Aカタログの他の部分と一致しており、授業のデモやデザインレビューから数学的な結果を変えることなく自動化パイプラインへ移行できます。
技術的な質問
RGB→HSV変換ツールの料金はいくらですか?
このページのブラウザ上では無料です。API経由の場合、成功したリクエストは$0.002かかりますが、無効な入力には課金されません。
r、g、bにはどの範囲が許可されていますか?
各チャンネルは0から255までの整数でなければなりません。その範囲外の値、小数、数値でないテキストはinvalid_inputとして拒否されます。
なぜ256はクランプされずに拒否されるのですか?
暗黙のクランプはデータの誤りを隠してしまいます。範囲外のチャンネルはinvalid_inputで失敗するため、呼び出し元は誤った色を公開する前に元の値を修正できます。