RGB→HEX変換ツール
どのRGBカラーでも16進コードがわかります。255, 128, 0は#ff8000のオレンジです。6桁のコードは小文字、大文字、#なしの形で表示され、スタイルシートやブランドガイドにそのまま使えます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 抵抗（Ω）
- 255
- G
- 128
- B
- 0
- Hex
- #ff8000
- Hex（#なし）
- ff8000
- 大文字
- #FF8000
- Rgb
- rgb(255, 128, 0)
このRGB→HEX変換ツールは、赤・緑・青の3つのチャンネル強度(それぞれ0から255までの整数)を受け取り、オレンジ色を表す#ff8000のような対応するCSS16進カラー文字列を返します。デザイナー、フロントエンド開発者、学生はこの対応関係を日常的に使用します。デザインツールはsRGBの3つ組を書き出し、スタイルシートやトークンはコンパクトな6桁の16進数を好み、資料にはその両者を結ぶ再現可能な橋渡しが必要だからです。エンジンは完全に決定的で、各チャンネルを16で割った商と余りによって上位・下位のニブルに分割し、各ニブルを0から9、aからfまでの数字に対応付け、ネットワーク通信や乱数、時計への依存は一切ありません。パレット作業やトークン監査、宿題の確認にはブラウザで無料でご利用いただけます。
RGBが16進カラーコードになる仕組み
CSSやほとんどのWebグラフィックスで使われる8ビットsRGBモデルでは、赤・緑・青のそれぞれが0(その原色がない)から255(最大強度)までの整数チャンネルです。16進カラーコードは同じ3バイトを6桁の16進数字にまとめます。赤に2桁、緑に2桁、青に2桁で、通常はスタイルシートがカラー値として使えるよう先頭にハッシュ記号を付けて書かれます。
変換は古典的なニブル分割です。チャンネルnについて、上位桁はnを16で割った商、下位桁はnを16で割った余りであり、各桁は0から9、続いてaからfに対応付けられます。パーセンテージ、浮動小数点のチャンネル、3桁の省略形を入力として受け付ける経路はなく、256を255に暗黙にクランプすることもありません。
HEXからRGB、HSL、LAB、CMYK、または複数形式の相互変換が必要な場合は、専用の複数形式カラーツールをご利用ください。
r、g、bの読み取り方とHEXの再現性について
文字列チャンネルの前後の空白はトリムされます。任意の先頭プラス記号は、残りの文字が範囲内の整数として解析できる10進数字である場合にのみ許可されます。単純なJavaScriptの数値は、0から255の範囲内の有限の整数である場合にのみ受け付けられます。
128.5のような値は丸められるのではなく検証に失敗し、負の値や256以上の値は、対象のチャンネル名を示し0から255の範囲内でなければならないと述べるメッセージとともに失敗します。変換は各ニブルに0から9、aからfまでの固定の桁アルファベットを使用するため、同じ3つ組は実行やプラットフォームが変わっても常に同じ小文字の16進文字列を生成します。
0は00に、255はffに対応し、43・98・81のような混在したチャンネルは、デザインシステムでおなじみの2b6251というパターンを生成します。
デザイン・学習・ソフトウェアにおけるRGB→HEX変換の位置づけ
デザイナーがこの対応関係に出会うのは、ブランドガイドがRGBのスウォッチを列挙していてCSSやFigmaのトークンファイルにハッシュコードが必要なとき、スクリーンショットのスポイトツールが赤緑青を報告しテーマファイルがHEXで保存するとき、あるいはアクセシビリティチェックがスタイルシートで使われているのと同じカラー文字列を返さなければならないときです。
学生は、CSSカラーを紹介するWeb開発講座、チャンネルスライダーとHEXピッカーを行き来するデジタルアート授業、短い3つ組を暗算で変換させる面接のウォームアップでこれを目にします。
フロントエンド開発者は、デザイントークンの固定値を用意するため、管理画面のカラーピッカーでユーザーが入力したチャンネル値を検証するため、あるいは個別のr・g・b列を保存するスプレッドシートから取り込んだデータを正規化するために、スクリプトから同じ契約を呼び出します。
学習者が3つのスライダーを調整し、UIが重いグラフィックスライブラリを往復せずにライブのHEX文字列を表示しなければならないとき、製品や教育向けツールはこの変換を利用します。このページでは処理はすべてブラウザ内で完結します。
HSLやCMYKが必要な場合は複数形式のカラーツールと、デザインシステムの衛生管理のための小さなラボを構築する場合は他の無料で決定論的な変換ツールと組み合わせてご利用ください。
活用例
デザイントークンとCSS
スタイルシート、テーマファイル、デザインシステムのトークン向けに、ブランドのRGB3つ組を#rrggbb文字列に変換します。
決定論的なテスト用固定値
カラーヘルパーに関する単体テスト、プロパティチェック、CIアサーション向けに、再現可能なHEXの結果を生成します。
宿題と授業デモ
不透明な計算アプリに頼らずに、学生のチャンネル→HEX変換を確認したり、CSSカラーをライブでデモしたりします。
よくある質問
このツールはHEXをRGBに戻す変換もできますか?
いいえ。 このツールは整数のRGBチャンネルをhex文字列に変換するのみです。HEXからRGBへの変換や他の色空間が必要な場合は、複数形式のカラー変換ツールをご利用ください。
RGB 255, 128, 0は16進コードで何になりますか？
#ff8000のオレンジになります。赤・緑・青にそれぞれ2桁ずつ割り当てられます。大文字を好むスタイルガイド向けに、#FF8000の形も表示されます。
小数を入力するとどうなりますか？
四捨五入はされず、受け付けられません。各チャンネルは0〜255の整数である必要があり、どのチャンネルが範囲外かがメッセージで示されます。
結果が3桁の短縮形になることはありますか？
ありません。結果は常に6桁で、各チャンネルに2桁ずつ使います。そのため0は00、255はffと表されます。
16進の各桁はどうやって決まりますか？
各チャンネルを16で割り、商が1桁目、余りが2桁目になります。桁は0〜9の次にa〜fを使います。同じ値からは毎回同じコードが得られます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/rgb-hex \
-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-hex", {
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-hex",
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-hex", 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-hex", 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_hex",
"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→HEX変換の意味とレスポンスに含まれる内容
この計算ツールは、検証済みの整数r・g・b、先頭にハッシュを付けた小文字の16進文字列、ハッシュなしの同じ6桁、大文字A〜Fを好むスタイルガイド向けの大文字ハッシュ形式、rgb(255, 128, 0)のようなrgb関数文字列、methodタグrgb_to_hex、そしてニブル対応の簡潔な公式の再掲を返します。エンジンは、3つの正当なチャンネルから厳密な6桁の16進数を構築するか、そうでなければinvalid_inputでリクエストを拒否します。拒否されるケースには、r・g・bのいずれかのフィールドの未入力、トリム後の空文字列、整数でない数値、数値でないテキスト、InfinityまたはNaN、そして0未満または255を超えるチャンネルが含まれます。このページが答えるのは、トークンや単体テスト、API利用者に適した安定したCSS16進文字列への整数RGBチャンネルの変換のみです。
r、g、bの読み取り方とHEXの再現性について
優先的に使用するフィールドは、赤にはr、緑にはg、青にはbですが、赤についてはredと大文字のR、緑についてはgreenと大文字のG、青についてはblueと大文字のBといったエイリアスも受け付けるため、スプレッドシートやクエリ文字列、型付きフォームでも列名を変更せずに同じ契約を再利用できます。自動化パイプライン内でチャンネルのパッキングを自分で再実装せずに同一の数学的結果が必要な場合は、このページの無料ブラウザ実行と有料APIを組み合わせてご利用ください。
デザイン・学習・ソフトウェアにおけるRGB→HEX変換の位置づけ
API経由の場合、成功した照会1件ごとに$0.002かかり、検証に失敗した場合は課金されず、レスポンスを返した後は何も保存されません。この無料の対話的な探索と、同一結果の有料APIという分離は、KITのtier-Aカタログの他の部分と一致しており、授業のデモやデザインレビューから数学的な結果を変えることなく自動化パイプラインへ移行できます。
技術的な質問
RGB→HEX変換ツールの料金はいくらですか?
このページのブラウザ上では無料です。API経由の場合、成功したリクエストは$0.002かかりますが、無効な入力には課金されません。
r、g、bにはどの範囲が許可されていますか?
各チャンネルは0から255までの整数でなければなりません。その範囲外の値、小数、数値でないテキストはinvalid_inputとして拒否されます。
HEXの出力は小文字ですか、それとも大文字ですか?
主要なhexフィールドは、先頭に#を付けた小文字の数字を使用します。uppercaseフィールドは、その形式を好むスタイルガイド向けに、大文字A〜Fで同じ色を返します。
なぜ256はクランプされずに拒否されるのですか?
暗黙のクランプはデータの誤りを隠してしまいます。範囲外のチャンネルはinvalid_inputで失敗するため、呼び出し元は誤った色を公開する前に元の値を修正できます。