ForHosting KIT · 画像の編集・解析

HSVからRGB変換

Q: HSVとHSLは同じですか？

いいえ。 どちらも色相と彩度という名を使いますが、明度（value）はlightnessと同じではありません。本ツールはHSVのみ実装します。HSLの三つ組を入れて正しいRGBを期待しないでください。

HSVで選んだ色を画面のチャンネルに変えます。色相210、彩度70%、バリュー80%は、伝統的な六区分の式でrgb(61, 133, 204)、つまり#3d85ccになります。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

H: 210
S: 70
電圧（V）: 80

結果

明度: 80
色相: 210
彩度: 70
抵抗（Ω）: 61

色相は0から360度、彩度は0から100パーセント、明度は0から100パーセントで入力してください。本ツールは古典的な6セクタ公式を実行し、0から255のr・g・bを返すほか、hex文字列、貼り付け可能なCSSのrgb()形式、段階的なクロマ中間計算も返します。カラーピッカー出力を確認するフロントエンド開発者、ブランドツールのHSVをRGBが必要なエンジニアへ渡すデザイナー、パレット固定値を検証する自動テストは、フルの多色空間スタジオを開かずに同じ決定的写像を必要とします。経路は純粋に決定的な算術のみで、ネットワーク・乱数シード・壁時計依存はありません。

HSVの意味とRGBの導出方法

HSVは色相（Hue）・彩度（Saturation）・明度（Value）を表す円柱モデルで、生の赤緑青スライダーよりも、多くの人がデザインソフトで色を選ぶ仕方に近いです。色相は色相環上の角度（度）で、0と360はどちらも純赤、60は黄、120は緑、180はシアン、240は青、300はマゼンタです。

彩度は灰色から完全なクロマへどれだけ離れているかで、ここでは0（色なし、グレーのみ）から100（その色相と明るさでの最大純度）までのパーセントです。明度は0（色相に関係なく黒）から100（その色相と彩度の最も明るい版）までの明るさです。

RGBへの変換は、まず彩度と明度を0から1の単位区間に正規化し、クロマCをV掛けるS、60度セクタ内の小数位置から中間X、マッチmをV引くCとして計算し、色相が入る6つの60度セクタのどれかに応じてプライム付きチャネルの順序付き三つ組を割り当てます。最後に各チャネルを255倍して整数に丸めます。

これはコンピュータグラフィックスの授業で教えられ、無数のカラーピッカーが使うのと同じアルゴリズムです。HSLとの違いを理解することは、誤った略語で検索した人に重要です。HSLの明度（lightness）はHSVの明度（value）と同じ軸ではないため、HSLの数値を本ツールに入れると誤ったRGBになります。

ソースが既に色相・彩度・明度（または明るさ）とラベルしている場合はHSVを選んでください。

実務のヒント、制限、関連検索

彩度と明度はデザインツールが書き出した同じパーセント尺度で送ることを推奨します。先に100を掛けない限り、0から1の単位区間の小数を送らないでください。0.7の彩度は1パーセント未満と読まれ、ほぼ灰色に見えます。

色相360は受け付けて0として扱い、閉じた色相環のエクスポートが失敗しないようにします。本ページはHSVからRGB変換、色相彩度明度から赤緑青、無料のHSVカラー計算機を探す人向けです。HSL変換でも、hexからRGBツールでも、画像からのパレット抽出でも、LABやCMYK付きの本格色管理スイートでもありません。

既にHSVがあり、3チャネル整数・hexトークン・cssのrgb()文字列だけが必要なときに本機能を選んでください。パイプラインがhexから始まるなら専用のhexからRGB経路を、多くの空間を往復するならマルチ形式変換を使ってください。

活用例

カラーピッカー出力をCSSとキャンバスへ

開発者はカスタムピッカーやデザイン出力のHSVを取り、スタイルシートとCanvas塗り用の正確なr・g・b整数とcss・hex文字列を受け取ります。

テーマとパレット固定値の単体テスト

HSV固定値から既知のRGB三つ組を生成し、視覚回帰とブランドトークンのテストが安定したチャネル値を検証し、範囲外彩度を拒否できるようにします。

6セクタHSV公式の教材として

学生は手書きのセクタ・クロマ・スケール済みチャネルを、グラフィックス課題提出前に決定的なsteps配列と照合します。

よくある質問

HSVからRGB変換が受け付ける範囲は？

色相hは0から360度、彩度sは0から100パーセント、明度vは0から100パーセントです。

HSVとHSLは同じですか？

いいえ。どちらも色相と彩度という名を使いますが、明度（value）はlightnessと同じではありません。本ツールはHSVのみ実装します。HSLの三つ組を入れて正しいRGBを期待しないでください。

HSVからRGB変換は無料ですか？

ブラウザツールは無料でローカル実行です。失敗タスクは課金されません。

HSVの210、70%、80%はRGBでいくつですか？

赤61、緑133、青204で、rgb(61, 133, 204)、十六進では#3d85ccです。途中の計算手順も表示されるので、結果を確かめられます。

計算はどのような手順で行われますか？

彩度とバリューを0〜1に直し、バリュー×彩度で色の強さ0.56を求めます。色相環を60度ずつの六区分に分けて各チャンネルに振り分け、0.24を足して255を掛け、四捨五入します。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/hsv-rgb

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/hsv-rgb \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"h":210,"s":70,"v":80}'

const res = await fetch("https://api.kit.forhosting.com/color/hsv-rgb", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "h": 210,
    "s": 70,
    "v": 80
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hsv-rgb",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "h": 210,
    "s": 70,
    "v": 80
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsv-rgb", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"h":210,"s":70,"v":80}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"h":210,"s":70,"v":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsv-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "h": 210,
  "s": 70,
  "v": 80
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hsv_rgb",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`h_min`	0
`h_max`	360
`s_min`	0
`s_max`	100
`v_min`	0
`v_max`	100

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

HSVからRGBへの変換ツールは、色相環上の色相、純クロマの割合としての彩度、明るさとしての明度で表された色を受け取り、画面・キャンバスAPI・デザイントークンが今もネイティブに扱う整数の赤・緑・青チャネルへ写像します。0から100の範囲外の彩度は、クリップした色をでっち上げず、明確なinvalid_inputエラーで拒否されます。そのため無料のブラウザ実行とプリペイドAPIは、呼び出すたびに同じJSONを返します。

APIの呼び出し方と返却内容

彩度ルールは意図的なプロダクト文言です。101やマイナス10の彩度を黙ってクランプせず、呼び出し側が悪いピッカーや固定値に気付けるようにします。必須の有限数3つを含むJSONボディを送ってください。hは0から360度の色相（別名hueとH）、sは0から100パーセントの彩度（別名saturationとS）、vは0から100パーセントの明度（別名value、V、brightness）です。厳密な有限数値パターンに一致する周囲の数値文字列もJSON数値と同様に受け付けて変換します。成功時は、丸めたh・s・vとhue・saturation・value別名、整数r・g・bとred・green・blue別名、3要素のrgb配列、先頭ハッシュ付き小文字hex文字列、rgb(r, g, b)形式のcss文字列、入力パーセントを要約するcss_hsv文字列、使われた60度バケツの0から5のセクタ索引、短い英語メッセージ、正規化・クロマ・セクタ割当・最終スケール行を示すsteps配列を返します。検証失敗（欠落フィールド、非有限数、0–360外の色相、0–100外の明度、0–100外の彩度）はinvalid_inputを返し、課金されません。料金は成功リクエストごとに定額$0.002で、単位アイテムと限界単価ゼロです。

実務のヒント、制限、関連検索

単体テストでは、最大彩度・明度の純赤、部分彩度の中間セクタ青（例：210度）、彩度0で明度だけがRGBグレーを変えるグレー、明度0で色相を無視する黒、意図的に0–100外の彩度を少なくともカバーし、invalid_input経路が退行しないようにしてください。invalid_inputを返す失敗タスクはプリペイド残高を消費しないため、学習者が不完全なクリップボード値を貼ったり意図的に彩度境界を探ったりしても、探索スクリプトとフォーム検証を安く保てます。

技術的な質問

r・g・bは何を表しますか？

赤・緑・青チャネル強度を0から255の整数で表します。同じ値はred/green/blue別名、rgb配列、hex文字列、cssのrgb()文字列としても現れます。

彩度が0–100の外だとどうなりますか？

APIは彩度が0から100の間でなければならないというメッセージ付きでinvalid_inputを返します。値はクランプされません。検証失敗は課金されません。

KITの完全なドキュメントを見る →

HSVからRGB変換

無料で実行

計算例

HSVの意味とRGBの導出方法

実務のヒント、制限、関連検索

活用例

カラーピッカー出力をCSSとキャンバスへ

テーマとパレット固定値の単体テスト

6セクタHSV公式の教材として

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

APIの呼び出し方と返却内容

実務のヒント、制限、関連検索

技術的な質問

ありがとう