RGBを16進数へ変換
赤・緑・青を大文字のカラーコードひとつにまとめます。255, 128, 0は#FF8000になります。結果は常に6桁そろっているので、コードの比較や保存、CSSへの貼り付けで迷いません。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 抵抗（Ω）
- 255
- G
- 128
- B
- 0
- Hex
- #FF8000
RGBカラーを、CSS、デザインシステム、画像ツール、各種データファイルで使われる6桁の16進形式へ変換します。赤・緑・青を0〜255の整数で入力すると、#RRGGBB形式のコードが返されます。計算は常に決定的であり、不正な値を推測したり、範囲内へ丸めたり、黙って修正したりしません。チャンネルが不足している場合、小数である場合、または許容範囲外の場合は、明確な入力エラーを返します。そのため、手作業での簡単な確認にも、色の正確さが必要な再現可能な自動処理にも安心してご利用いただけます。
RGBが16進カラーへ変換される仕組み
RGBカラーは、赤・緑・青という3つの独立した光の強度を保持します。各チャンネルには0から255までの256個の整数値を設定できます。6桁の16進カラーは、同じ情報を各チャンネル2桁の16進数で正確に表します。
最初の2桁が赤、次の2桁が緑、最後の2桁が青です。10進数の0は00、255はFFになり、その間の値は16進数へ変換したうえで、必要に応じて2文字になるよう先頭を補います。たとえば、赤255、緑128、青0を入力すると#FF8000になります。
先頭のハッシュ記号はCSSや多くのデザインツールで色を示し、後続する6文字は3つの8ビットチャンネルを精度を失わず保持します。短縮CSS表記で同じ色を示せる場合でも、この変換機能は必ず完全な6桁形式を返します。すべての正常な結果で長さとチャンネル順が一定になるため、比較、保存、テスト、システム間の受け渡しが容易です。
英字は大文字で返しますが、CSSでは大文字と小文字の16進コードは同じ色として解釈されます。
有効なチャンネル値とエラーの確認方法
0は有効で、該当する原色の光が含まれないことを示します。255も有効で、最大強度を示します。この仕様では8ビットRGBチャンネルが整数である必要があるため、12.5のような値は拒否されます。
負数や255を超える値も、範囲内へ補正せず拒否します。補正を行うと、センサーの異常値、表計算の誤った数式、設定不良の画面部品、上流の検証ミスなどが隠れるおそれがあるため、自動処理では明示的なエラーの方が安全です。失敗した場合は、示されたチャンネルを確認し、元データを直してから完全な3値を再送してください。
ネットワーク、乱数、時刻を使わないため、同じ値からは常に同じ結果が得られます。
デザインと開発の作業で結果を活用する方法
返されたコードは、color、background-color、border-color、fillなどのCSSプロパティへそのまま配置できます。一般的なデザイントークン形式、テーマ設定ファイル、グラフの配色、メールテンプレート、ブランドカラーの資料にも利用できます。
デザイナーは画像編集ソフトからコピーしたチャンネル値を変換し、コンポーネントライブラリへ色見本を追加できます。開発者はデータベースや表計算に分かれて保存されたRGB列を、テーマの書き出し前に統一された文字列へ変換できます。テストでは、カラーピッカーやシリアライズ処理に対する正確な期待値を作成できます。
厳密なエラーにより、不正なチャンネルがもっともらしい誤色へ化けず、データ処理を適切に停止できます。単発の作業ではブラウザー画面からコードを書かずに3値を確認できます。CSSで使う場合はハッシュ記号を残してください。
別のシステムが6文字だけを要求する場合は、各ペアを変えずに記号だけを削除します。この機能は透明度、カラープロファイル、知覚差、HSL、CMYK、色名を計算しません。
活用例
CSSカラーの準備
デザイン仕様のRGBチャンネルを、スタイルシートや部品で使える固定形式の#RRGGBBコードへ変換します。
読み込んだ配色の検証
表計算やデータベースの範囲外チャンネルを拒否し、有効な各項目へ正確なコードを生成します。
よくある質問
どのRGB値を使用できますか？
r、g、bの各チャンネルには、両端を含む0〜255の整数を指定してください。
16進コードの大文字と小文字で違いはありますか？
いいえ。 CSSでは大文字と小文字を区別しません。この変換機能は一貫性のため大文字を返します。
結果が3桁の短い形にならないのはなぜですか？
CSSで短く書ける色でも、常に6桁の完全な形で返します。長さとチャンネルの順序が一定なので、比較や保存、テストがしやすくなります。
12.5のような小数は入力できますか？
できません。各チャンネルは0〜255の整数である必要があり、12.5や負の数、255を超える値は受け付けられません。示されたチャンネルを直して入力し直してください。
16進コードはどこで使えますか？
CSSの文字色や背景、枠線、塗りにそのまま貼れます。デザインツールでも使えます。大文字と小文字は同じ色を表すので、#ff8000の代わりにも使えます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/rgb-to-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-to-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-to-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-to-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-to-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_to_hex",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
有効なチャンネル値とエラーの確認方法
r、g、bを含むオブジェクトを送信し、各フィールドには0以上255以下の整数を指定してください。いずれかのチャンネルが欠けると色が完成しないため、3つのフィールドはすべて必須です。文字列は数値として扱わず、API仕様を予測可能に保ち、暗黙の型変換による曖昧な入力の変化を防ぎます。正常な応答には、先頭のハッシュ記号と正確に6桁の16進数字を持つhexフィールドだけが含まれます。
デザインと開発の作業で結果を活用する方法
自動化では、APIリクエスト1回につき$0.002で同じ決定的な計算を利用できます。
連携の活用例
デザイントークンの統一
別々の赤・緑・青フィールドを、テーマやトークン一覧向けの一貫した16進値へまとめます。
技術的な質問
チャンネルが範囲外の場合はどうなりますか？
invalid_inputエラーで変換に失敗します。値を丸めたり循環させたりすることはありません。
結果にハッシュ記号は含まれますか？
はい。hexフィールドは、先頭のハッシュ記号と6桁を含む完全な#RRGGBB形式です。
API変換の料金はいくらですか？
APIリクエスト1回につき$0.002です。ブラウザーの決定的な変換機能は対話的な確認にご利用いただけます。