色チャネル抽出
色をまるごと変換せず、必要な1つの数値だけを取り出せます。#3498dbの赤は52、#3498db80の透明度は128で、どちらも0～255の同じ尺度です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #3498db
- チャンネル
- Red
- 値
- 52
- Red
- 52
- 緑
- 152
- 青
- 219
デザインシステム、キャンバス塗り、シェーダのユニフォーム、アクセシビリティのコントラスト検査では、色空間の変換表全体ではなく、色から取り出した一つの数値が必要になることがよくあります。すでに #3498db や 8 桁の #3498db80 といった hex トークン、あるいは CSS の rgb() / rgba() 文字列をお持ちで、赤・緑・青・アルファのいずれかを 0–255 の整数として得たい場合に使います。この機能は色文字列とチャネル名の両方を検証し、その数値を決定的に返します。hex を RGB 三つ組へ変換する姉妹ツールでは、まだどの欄を取るかを選ぶ必要があります。こちらは名前付きの一本だけを求めるパイプライン向けの専用抽出です。
色チャネルとは何か、数値はどう導くか
画面上のデジタル色は、ほぼ常に 8 ビットのチャネル四つ（赤・緑・青、および任意のアルファ＝不透明度）を詰めたものです。6 桁 hex 形式 #RRGGBB では先頭の二桁が赤、中央が緑、末尾が青で、各対は 00（ゼロ）から FF（二百五十五）までの十六進整数として読まれます。
4 桁と 8 桁の形式 #RGBA と #RRGGBBAA は、同じ 0–255 スケールのアルファ対を足します。だから #3498db80 は #3498db と同じ色ではありません。余分な対は透明度であり、第四の色相ではありません。
CSS の rgb() は同じ三整数を十進で書き、rgba() は 0 から 1 の単位区間のアルファを足します。本ソルバはその単位を 255 倍して最も近い整数へ丸め、取り出したどのチャネルも同じ尺度を共有するようにします。3 桁・4 桁の hex 省略形は各ニブルを倍にします。
#f00c はチャネルを読む前に #ff0000cc になります。色がアルファを省略している場合、抽出器は欠けた帯を完全不透明の 255 として扱い、穴を捏造しません。名前付きチャネルの抽出は、その解析のあとの参照です。
赤・緑・青・アルファの整数であり、HSL・LAB・CMYK への変換ではありません。算法は純算術と文字列検証です。
入力契約、受け付ける形式、応答の形
color は文字列です。3・4・6・8 桁の hex（先頭のハッシュは任意）か、CSS の rgb(r, g, b) / rgba(r, g, b, a) です。関数記法の RGB 成分は 0–255、rgba() のアルファは 0–1（両端を含む）で、round(alpha × 255) により変換します。
channel は閉じた名前 red、green、blue、alpha のいずれかです（ソルバは短い r、g、b、a も受け付けます。公開 enum は四語のフル形なので、ウェブフォームは自由記述ではなく選択になります）。十六進の 34 を parseInt すると 52 だからです。
color 文字列はトリム後最大 64 文字です。
一本のチャネルを取り出す場面
ブランドトークンの赤チャネルを断言するフロントエンド試験、単一ユニフォームを結ぶシェーダローダ、オーバーレイのアルファだけを比べる表計算監査は、三つ組変換器ではなく一つの数を求めます。相対輝度を求めるアクセシビリティ脚本も、出発点は 0–255 の三整数です。
#RRGGBBAA を書くゲームや印刷のパイプラインは、channel 欄に hue や saturation と打たれたとき黙って NaN を返すのではなく、はっきり失敗する必要があります。検索意図が「色チャネルを取り出す（赤・緑・青・アルファを数値で）」であるときに、この機能を選んでください。
hex から RGB への変換ページでも、写真からのパレット抽出でも、混合器でも、名前付き CSS 色の表でもありません。要求は小さく保ち、テストでは value と正規化色を固定すれば、チケット・LMS プラグイン・エッジワーカ向けに再現可能な整数が得られ、自前の色管理ライブラリは不要です。
活用例
デザイントークンとテーマのフィクスチャ
スタイルシート変更のあとでも、ブランド hex が期待どおりの赤・緑・青・アルファ整数を持つかを、毎回フル RGB 変換器をほどかずに検証します。
シェーダとキャンバスのユニフォーム
hex または rgba() トークンから 0–255 の一本を取り、WebGL ユニフォーム、Canvas 塗り補助、CSS カスタムプロパティのパイプラインへ結びます。
オーバーレイのアルファ監査
#RRGGBBAA や rgba() オーバーレイに書いたアルファを読み、透明度が黙って落ちたトークンや未知のチャネル名を拒否します。
よくある質問
色からどのチャネルを取り出せますか？
名前付きは red、green、blue、alpha の四つだけです。いずれも value 欄に 0 から 255 の整数として返ります。
色チャネル抽出はどの色形式を受け付けますか？
先頭 # の有無を問わず hex の #RGB、#RGBA、#RRGGBB、#RRGGBBAA と、CSS の rgb(r, g, b) および rgba(r, g, b, a) です。名前付き CSS 色と 0x 接頭辞は受け付けません。
rgba() と 8 桁 hex でアルファはどう換算されますか？
hex のアルファはすでに 0–255 です（例: #80 は 128）。rgba() のアルファは 0 から 1 の単位で、round(alpha × 255) により換算するため、0.5 は同じ尺度で 128 になります。
色チャネルの抽出にはいくらかかりますか？
ブラウザの道具は無料です。不正な色やチャネルは課金されません。
#3498dbの赤の値はいくつですか？
52です。最初の2桁「34」を十六進法で読むと52になるためです。緑は152、青は219で、透明度の桁がない色は完全に不透明な255として扱います。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/channel-extract \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db","channel":"red"}'const res = await fetch("https://api.kit.forhosting.com/color/channel-extract", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db",
"channel": "red"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/channel-extract",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db",
"channel": "red"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/channel-extract", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db","channel":"red"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db","channel":"red"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/channel-extract", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#3498db",
"channel": "red"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.channel_extract",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_color_chars | 64 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
不正な色や未知のチャネル名は invalid_input で失敗し、課金されません。
色チャネルとは何か、数値はどう導くか
had_alpha を false にするので、呼び出し側は既定値と意図して書いた透明度を区別できます。
入力契約、受け付ける形式、応答の形
必須フィールド二つを含む JSON 本体を送ってください。color 欄には別名 hex、value、text、input、colour も受け付けます。成功時の本体は、取り出した整数 value、正規名 channel、正規化した小文字 hex の color（アルファ省略時は #rrggbb、書いたときは #rrggbbaa）、四整数 red・green・blue・alpha、scale 255、解析した形を示す source（hex3、hex4、hex6、hex8、rgb、rgba）、had_alpha、短いメッセージを返します。例: color #3498db と channel red は value 52 になります。例: color #3498db80 と channel alpha は value 128 です。検証失敗（欠落、空文字、0x 接頭辞、誤った hex 長、非 hex 文字、誤った項数の rgb()、0–1 の外の rgba() アルファ、hue のような未知チャネル）はフィールド名付きの invalid_input を返し、課金されません。
一本のチャネルを取り出す場面
名前付きチャネルから一つずつ取ると、フィクスチャ表が分かりやすくなります（channel が red、value が 52）。実装は純粋な parse のティア A なので、成功した呼び出しは公開の基本料金 $0.002 で、モデルトークンも外向き通信もなく、検証失敗は残高を消費しません。
技術的な質問
アルファのない色に対してアルファを求めるとどうなりますか。
抽出器は 255（完全不透明）を返し、had_alpha を false にします。この既定は文書化されているので、省略された帯と書いた #ff や 1.0 を区別できます。