HEXカラーを0～255のRGB値に変換
十六進コードに含まれる三つの数を取り出します。#4a90e2は4a、90、e2に分かれ、赤74、緑144、青226になります。#3afのような省略形は先に#33aaffへ展開されます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Hex
- #4a90e2
- 抵抗（Ω）
- 74
- G
- 144
- B
- 226
HexからRGBへの変換ツールは、16進数コード—3桁または6桁、先頭のハッシュの有無を問わず—で書かれた色を、あらゆる画面・キャンバス・デザイントークンシステムが今なおネイティブに扱う3つの整数チャンネル、すなわち赤・緑・青（各0から255）に分解します。#3498dbや短縮形#abcを貼り付けてください。必要に応じて短縮形を展開し、小文字6桁のhexに正規化し、r・g・bに加え、そのまま貼れるCSSのrgb()文字列とチャンネル計算の手順を返します。
hex色の意味とRGBの導出方法
16進カラーコードは、3つの8ビットチャンネルを、スタイルシート・デザインツール・ブランドガイドラインが何十年も使ってきたコンパクトな文字列にまとめます。6桁形式#RRGGBBでは、先頭2文字が赤、中央2文字が緑、末尾2文字が青を表し、各ペアは0（00）から255（FF）までの16進整数として解釈されます。
3桁の短縮形#RGBは、各桁を2倍にするCSSの利便記法です。#abcは#aabbccになり、パレットが粗い段階だけでよいとき、1ニブルが1バイトの代わりになります。#fffと#ffffffは同じ純白ですが、#f0f0f0は3桁の等価がない別の灰色です。
本変換器はまさにその対応付けを行います。任意の先頭ハッシュを取り除き、3桁または6桁の16進数字以外を拒否し、短縮形があれば展開し、各2文字ペアを基数16で解析します。結果は、canvasの塗りスタイル、Reactのインラインスタイル、メールHTML、コントラスト比計算機にそのまま渡せる3つの整数であり、ビット詰めを自分で再導出する必要はありません。
授業の演習やコーディング面接ではこの変換を手計算で求められることが多く、決定的な参照があれば大文字小文字・ハッシュの有無・短縮形の展開についての曖昧さが消えます。
実用的なヒント、制限、関連検索
デザインツールが書き出したhex文字列を、ハッシュがあれば含めて送ることを推奨します。どちらの形式も動き、応答は常に小文字6桁hexに正規化されるため、下流の差分が安定します。
#RRGGBBAAや#RGBAのようなアルファ付き形式は渡さないでください—本ページは意図的に古典的な不透明RGB詰めに限定しており、それらの長さは拒否されるため、アルファを黙って落とす代わりに気づけます。rebeccapurpleのような名前付きCSS色は対象外です。
先に名前色表で変換するか、HSL・LAB・CMYKも必要なときはより広い複数空間ツールを使ってください。単体テストでは、6桁ケース、3桁展開、大文字入力、ハッシュなし入力、意図的な無効長さを少なくとも1つずつカバーし、検証の回帰がすり抜けないようにします。
このページは、hexからRGBへの変換器、#RRGGBBから赤緑青、無料のhexカラーからRGB計算機オンラインを探す人向けです。フル機能の色管理スイートでも、画像からのパレット抽出でも、RGBからhexへの逆変換でもありません。すでにhexトークンがあり、3つのチャンネル整数かcssのrgb()文字列だけが必要なときにこの機能を選んでください。
パイプラインがHSLや印刷用CMYKを経由する必要があるなら、マルチフォーマット変換器を使ってください。
活用例
デザイントークンのエンジニアへの引き渡し
デザイナーがFigmaやスタイルガイドからブランドのhexコードを貼り付け、実装チケット用の正確なr・g・b整数とCSSのrgb()文字列を受け取ります。
インラインスタイルとcanvas塗りつぶしの補助
カラーピッカーからユーザーが指定したhexを、CanvasRenderingContext2D・SVG属性・フレームワークのスタイルオブジェクト用の数値チャンネルに変換します。
よくある質問
Hex→RGB変換はどのhex形式を受け付けますか？
3桁（#RGB）と6桁（#RRGGBB）の16進カラーで、先頭の#の有無は問いません。英字は大文字小文字どちらでも可。アルファ付き形式と名前付きCSS色は受け付けません。
3桁の短縮形はどう展開されますか？
各桁を2倍にします。 #abcは#aabbccになり、各ペアを0から255の基数16整数として解析します。
Hex→RGB変換は無料ですか？
ブラウザツールは無料でローカル実行されます。失敗タスクは課金されません。
#4a90e2のRGB値はいくつですか？
赤74、緑144、青226です。コードを4a、90、e2の組に分け、それぞれを00からFFまでの16進数として読みます。
大文字と小文字で結果は変わりますか？
変わりません。#4A90E2と#4a90e2はまったく同じ値になります。大文字か小文字かで16進数の桁の値は変わらないためです。使えるのは0〜9の数字とA〜Fの文字だけです。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hex-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#4a90e2"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#4a90e2"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#4a90e2"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#4a90e2"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#4a90e2"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hex": "#4a90e2"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_rgb",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
長さ不正・非16進文字・空入力・プログラミング用の0x接頭辞などの無効コードは、色を捏造せず明確なinvalid_inputエラーで失敗します。経路は純粋に決定的な解析のみ—ネットワークなし、乱数シードなし、壁時計への依存なし—のため、無料のブラウザ実行器と前払いAPIは呼び出すたびに同じJSONを返します。
APIの呼び出し方と返却内容
有効な例は#3498db、3498db、#ABC、abcです。前後の空白は除去され、英字は大文字小文字どちらでもよく、ハッシュは任意です。必須の文字列フィールドhexを持つJSON本体を送信します—aliasのcolor、value、text、input、codeも同じsolverが受け付けます。成功時の応答は、正規化された小文字#rrggbbのhex、ハッシュなしのhex6、整数フィールドr・g・bとred・green・blueの別名、3数値のrgb配列、rgb(r, g, b)形式のcss文字列、元の形を示す真偽値shorthandとhad_hash、短い英語メッセージ、デバッグや教材用に各parseIntチャンネル行を示すsteps配列を返します。検証失敗—フィールド欠落、ハッシュ後の空文字、3でも6でもない長さ、非16進文字、本体内部の空白、プログラミング用0x接頭辞、文字列ではなく裸の数値—はinvalid_inputを返し、課金されません。料金は成功したリクエストごとに定額公開料金、単位はitem、限界単価はゼロです。
実用的なヒント、制限、関連検索
invalid_inputを返す失敗タスクは前払い残高を消費しないため、学習者が不完全なクリップボード値を貼る間も、探索的スクリプトとフォーム検証を安価に保てます。自動処理で成功したリクエストには、公開基本料金$0.002が適用されます。
連携の活用例
テーマ・パレットfixtureの単体テスト
hexのfixtureから既知の正しいRGB三組を生成し、視覚回帰やコントラスト比テストが安定したチャンネル値を検証できるようにします。
技術的な質問
r、g、bは何を表しますか？
赤・緑・青チャンネルの強度を0から255の整数で表します。同じ値がred/green/blue別名、rgb配列、cssのrgb()文字列としても現れます。
無効なhexコードではどうなりますか？
APIは問題を説明するメッセージ付きのinvalid_inputを返します（空入力、長さ不正、非16進文字、0x接頭辞など）。検証失敗は課金されません。