RGB→LCH変換ツール
RGBカラーを人が調整する感覚で表します。明度は黒の0から白の約100まで、クロマは鮮やかさ、色相は0から360°未満の角度です。ほかの値を崩さずにひとつだけ変えられます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 抵抗（Ω）
- 255
- G
- 128
- B
- 0
- L
- 67.0548169961
- C
- 85.5142055704
- H
- 59.9466748349
- 明度 (L*)
- 67.0548169961
このRGB→LCH変換ツールは、sRGBの3つのチャンネル強度(赤・緑・青、それぞれ0から255までの整数)を受け取り、Webや印刷のカラーワークフローで使われる標準のD65白色点で計算したCIE LCH座標(明度L*、クロマC*、色相角h°の度)を返します。デザイナー、アクセシビリティエンジニア、学生は、パレットが8ビットチャンネルで管理されている一方で、明度・クロマ・色相をLabの矩形a*・b*軸なしに独立して編集できる知覚的に構造化された空間が必要なときにLCHを使用します。エンジンは完全に決定的で、各チャンネルの逆コンパンディングを行い、D65のsRGB→XYZ行列を掛け、D65基準白色で正規化し、CIE Labを形成したうえで、C*をa*とb*のhypotとして、h°をb*とa*のatan2から導出します。ネットワーク通信や乱数、時計への依存は一切ありません。知覚的な編集やアクセシビリティチェック、宿題にはブラウザで無料でご利用いただけます。
RGBからLCHへの変換の意味と応答に含まれる内容
CSSや多くのWebグラフィックスで使われる8ビットsRGBモデルでは、赤・緑・青はそれぞれ0から255までの整数チャンネルです。CIE LCHはCIE L*a*b*の極座標形式であり、同じ刺激を明度L*(黒でおよそ0、拡散白でおよそ100)、無彩色軸からの距離を測るクロマC*、その軸まわりの角度としての色相h°(度で0以上360未満)として表します。
変換ではまず各チャンネルを255で割ってスケールし、次にsRGBガンマ(IEC 61966-2-1の逆コンパンディング曲線)を戻して線形光にします。
それらの線形チャンネルは、照度D65の下で固定の3×3行列を通ってCIE XYZになり、各三刺激値はD65基準白色で割られ、CIEのピボット関数f(しきい値以上は立方根、未満は線形枝)が適用されてL*・a*・b*が得られます。
Labからの円柱ステップは閉じた形で、C*はa*b*ベクトルのユークリッド長、h°はb*とa*の2引数arctanを度に直し、0以上360未満の半開区間に巻き戻したものです。クロマが実質ゼロのとき色相は幾何学的に未定義なので、この計算機は純黒・純白・中性グレーなどの無彩色についてh°を0と定義します。
入力としてパーセントや浮動小数チャンネルを受け付ける経路はなく、256を255へ黙ってクランプすることもありません。拒否される例は、r・g・bの欠落、トリム後の空文字、非整数、非数値テキスト、InfinityやNaN、0未満または255超のチャンネルです。
LCHからRGB、十六進パッケージ、HSV、HSL、CMYKが必要な場合は専用の逆変換や多形式ツールをご利用ください。
デザイン・学習・ソフトウェアにおけるRGB→LCH変換の位置づけ
デザイナーは、ブランドガイドがRGBスウォッチを列挙し、制作や知覚編集のワークフローがLCHターゲットを期待するとき、明度を固定したまま色相を回してティントやシェードを作るとき、デザインシステムが画面RGBとLCH参照値を並記してランプ生成を行うときにこの対応に出会います。
アクセシビリティエンジニアは、知覚明度をクロマの強さと分けて考えるとき、色相シフト後も2つのUI状態が区別できるか確認するとき、後でLabの形式的なdelta-E検査に回し、執筆用に同じ色をLCHで再表現する前のメモを準備するときにL*とC*を使います。
学生は、XYZ・Lab・円柱形LCHを順に紹介するコンピュータグラフィックスや色彩科学の授業、チャンネルスライダーと色相・クロマ操作を行き来するデジタル写真の授業、短い三組を極座標Labに頭の中で変換する面接のウォーミングアップで目にします。
十六進やCMYKが必要なときは多形式ツールと、矩形a*・b*だけが必要なときはLab変換ツールと、デザインシステムの衛生のための小さな実験室を組むときは他の無料の決定的変換ツールと組み合わせてご利用ください。
活用例
色相とクロマを独立させた知覚的編集
ブランドのRGB三組をCIE LCHに変換し、明度を固定したまま色相の回転やクロマの拡大縮小でランプとバリエーションを作れます。
宿題と授業デモ
学生のsRGB→LCH課題を確認し、不透明な電卓アプリなしでXYZ・Lab・極座標LCHをライブデモできます。
よくある質問
白色点と変換経路は何ですか？
経路はsRGB → linear → XYZ → Lab → LCHです。
LabからC*とh°はどう定義されますか？
C*はhypot(a*, b*)です。色相h°はatan2(b*, a*)を度にし[0, 360)に巻き戻したものです。C*が実質ゼロ(無彩色)のときh°は0と定義します。
グレーの色相はなぜ0になりますか？
グレーや黒、白にはクロマがないため、色相角が定まりません。同じ無彩色から常に同じ結果が出るよう、決まりとして0にしています。
オレンジの255, 128, 0はLCHでいくつになりますか？
D65白色点で明度67.0548169961、クロマ85.5142055704、色相59.9466748349°です。明度はLabと同じで、色の表し方だけが変わります。
LCHとLabはどう違いますか？
LCHはLabを円筒の形で表したものです。明度は共通で、a*とb*の2軸の代わりに、無彩色の軸からの距離であるクロマと、その周りの角度である色相を使います。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/rgb-lch \
-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-lch", {
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-lch",
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-lch", 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-lch", 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_lch",
"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からLCHへの変換の意味と応答に含まれる内容
応答には検証済みの整数r・g・b、L・C・H(別名L_star・C_star・h_deg)、Labの中間a*・b*(a・lab_b・a_star・b_starとして返し、Labのb*がRGBの青チャンネルと衝突しないようにする)、中間X Y Z、rgb・lch・labの要約文字列、D65に設定されたwhite_point、メソッドタグrgb_to_lch、短い公式の覚え書きが含まれます。エンジンは合法な3チャンネルに対して厳密なLCH三組を作るか、invalid_inputで拒否します。このページは、トークン・単体テスト・API利用者が明度・クロマ・色相を独立に扱うための、整数sRGBから安定したCIE LCH三組への変換のみに答えます。
r・g・bの読み取り方とLCHの再現性の保ち方
文字列チャンネルの外側空白はトリムされ、先頭のプラスは残りが範囲内整数に解釈できる十進数字のときだけ許されます。素のJavaScript数値は、0から255までの有限整数である場合にのみ受け付けられ、128.5のような値は丸められず検証に失敗し、負数や256以上もチャンネル名を挙げて0〜255に留めるよう求めるメッセージで失敗します。純赤は中程度のL*・大きなC*・約40度の色相に、純白と純黒はクロマ0でh°を0と定義した写像に、飽和した緑と青はLab平面の期待される色相区画に落ちます。推奨フィールドは赤のr、緑のg、青のbですが、赤にはredと大文字R、緑にはgreenと大文字G、青にはblueと大文字Bの別名も受け付けるため、スプレッドシートやクエリ文字列、型付きフォームが列名を変えずに同じ契約を再利用できます。逆ガンマ・D65正規化・LabからLCHへの極座標変換を自ら再実装せず、自動化パイプラインで同一の数学結果が必要なときは、このページの無料ブラウザ実行と有料APIを組み合わせてご利用ください。
デザイン・学習・ソフトウェアにおけるRGB→LCH変換の位置づけ
このページでは作業はすべてブラウザ内で完結し、APIでは成功した照会ごとに$0.002がかかり、検証失敗は課金されず、応答後に何も保存されません。無料の対話的探索と有料で同一のAPIという分割はKITのティアAカタログ全体と一致し、教室デモやデザインレビューから自動化パイプラインへ、数学結果を変えずに移れます。
連携の活用例
決定的なテストfixture
単体テスト、プロパティ検査、CIアサーション向けに、カラーヘルパーとデザイントークン用の再現可能なLCH結果を生成します。
技術的な質問
RGB→LCH変換ツールの料金はいくらですか？
このページではブラウザで無料です。APIでは成功したリクエストごとに$0.002がかかり、無効な入力は課金されません。
r・g・bに許される範囲は？
各チャンネルは0から255までの整数である必要があります。範囲外・小数・非数値テキストはinvalid_inputで拒否されます。
なぜ256はクランプではなく拒否ですか？
黙ったクランプはデータ誤りを隠します。範囲外チャンネルはinvalid_inputで失敗し、呼び出し側が誤った色を公開する前に元の値を直せます。