カラーをグレースケールへ
色の見た目の明るさを保ったグレーを求めます。#3498dbは#828282(グレー値130)になります。緑の影響が最も大きく、赤がそれに続き、青が最も小さいためです。計算の各手順も表示されます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- ソース色(hex)
- #3498db
- 値
- 130
- 入力 hex
- #3498db
- 入力 rgb
- 52, 152, 219
- 抵抗(Ω)
- 52
カラーからグレースケールへの変換ツールは、不透明な色—hexコード、または赤・緑・青の各チャネル—を受け取り、チャネルを単純平均するのではなく知覚的な明るさを保った単一の中立グレーに写像します。#e74c3c、rgb(52, 152, 219)、または個別の r・g・b 整数を貼り付けてください。ツールは古典的な輝度重み 0.299 赤、0.587 緑、0.114 青を適用し、0 から 255 の整数グレーに丸め、グレー hex トリプル、数値、CSS の rgb() 文字列、および手順付き算術を返します。
単純平均より輝度加重が優れる理由
人間の視覚は赤・緑・青の光に同じ感度ではありません。知覚的な明るさへの寄与は緑が最も大きく、赤がそれに続き、青が最も小さいです。そのため、どちらも単一チャネルが 255 でも、純粋な青 #0000ff は純粋な緑 #00ff00 より暗く見えます。
三チャネルを足して 3 で割る単純平均は、緑寄りの色の明るさを過小評価し、青寄りのトーンを過大評価します。輝度加重は、しばしば BT.601 と呼ばれる古典的なテレビ用ルーマモデル由来の固定係数でその不均衡を直します。グレー Y は 0.299×赤 + 0.587×緑 + 0.114×青を 0–255 の最も近い整数に丸めたものです。
結果は、各ペアが同じ hex バイトの #YY として書くと RGB 空間の中立軸に乗り、元の色相のおよその明るさを保つ単一チャネルです。このページは意図的に単色ツールであり、画像フィルタではありません。デザイン トークン、CSS 変数、パレット スウォッチを一度に一つ変換し、監査可能なグレー hex と値を返します。
授業課題やコーディング面接では手計算でこの変換を求められることが多く、どの重みを使い、どう丸め、三桁 hex 略記を乗算前に展開したかを曖昧にしない決定的な参照が役立ちます。
実務上のヒント、制限、関連検索
デザイン ツールが書き出した正確なトークンを送ることを推奨します。#RRGGBBAA や意味のあるアルファを保ちたい rgba などのアルファ付き形式は渡さないでください—このページは不透明 RGB のみ変換し、予期しない長さは拒否されるため、アルファを黙って落とすのではなく気づけます。
rebeccapurple のような名前付き CSS 色は対象外です。まず名前表で hex に解決してから本変換器を呼んでください。単体テストでは、鮮やかな赤、緑優勢のティール、純粋な青、自分自身に戻るべき既グレー入力、三桁略記、rgb() 文字列、意図的に無効な hex を少なくとも一つずつカバーし、検証の回帰を防いでください。
このページはカラー→グレースケール変換、輝度 hex→グレー計算機、無料の RGB→グレー値ツールを探す方を対象とします。フル画像の脱彩器でも、HSL・LAB・CMYK の多空間変換でも、パレット生成器でもありません。
既に一色があり輝度グレー hex と整数値だけが必要なときに本能力を選び、パイプラインがまだ HSL や印刷 CMYK を出す必要がある場合は、それらの空間には多形式カラー変換器を、モノクロ工程には本ツールを使ってください。
活用例
ブランド hex からモノクロ デザイン トークン
デザイナーがブランド hex を貼り付けると、画像エディタを開かずにモノクロ テーマ、印刷モック、無効 UI 用の輝度加重グレー hex を得られます。
CSS 変数と canvas 塗りつぶしの準備
ピッカーからユーザー指定色を中立の rgb() と hex 文字列に変換し、グレースケール プレビュー、透かしレイヤ、印刷向け CSS 変数に使います。
よくある質問
#3498dbはどんなグレーになりますか?
#828282になります。重み付きの和は0.299×52+0.587×152+0.114×219=129.738で、四捨五入したグレー値は130、つまりrgb(130, 130, 130)です。
赤・緑・青を単純に平均しないのはなぜですか?
人の目には三つの色が同じ明るさに見えないからです。緑が明るさに最も強く効き、青は最も弱いため、単純平均では緑寄りの色が暗く、青寄りの色が明るくなりすぎます。#0000ffが#00ff00より暗く見えるのはこのためです。
グレースケール変換の計算式は何ですか?
グレー値は0.299×赤+0.587×緑+0.114×青で、0から255の整数に四捨五入します。この重みは、BT.601と呼ばれる伝統的なテレビの輝度モデルに由来します。
赤・緑・青の値を別々に入力できますか?
はい。十六進コードの代わりに、0から255の整数で三つのチャンネルを入力するか、rgb(52, 152, 219)のような形式を貼り付けられます。小数や範囲外の値は受け付けません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/grayscale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/grayscale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/grayscale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/grayscale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/grayscale", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#3498db",
"hex": "valor-ejemplo"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.grayscale",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_channel | 255 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無効な色—空入力、hex 長の誤り、非 hex 文字、0–255 外のチャネル、不足したフィールド集合—は偽のスウォッチを作らず、明確な invalid_input エラーで失敗します。経路は純粋な決定的パースと算術—ネットワークなし、乱数シードなし、壁時計依存なし—のため、無料のブラウザ実行と前払い API は呼ぶたびに同じ JSON を返します。
API の呼び出し方と戻り値
有効な例は #3498db、3498db、#abc、rgb(52, 152, 219)、素の一覧 52, 152, 219 です。前後の空白は除去され、hex 文字は大文字でも小文字でもよく、ハッシュは任意です。色文字列または三つの個別チャネル フィールドを含む JSON 本体を送ってください。color フィールドは alias として hex、value、text、input、code を受け付けます。代わりに r・g・b(alias red、green、blue)を 0 から 255 の整数で指定できます。成功時は解決済みソースの input_hex と input_rgb、整数 gray と alias gray_value および value、六桁の中立コードとしての gray_hex と hex、三要素配列 gray_rgb、css としての rgb(g, g, g)、係数を記す formula と weights、表示精度固定の丸め前加重和 luminosity、短い要約 message、教育やデバッグ用の置換行の順序付き配列 steps を返します。検証失敗—色とチャネルの欠落、空文字列、hex 長の誤り、非 hex 文字、プログラミング用 0x 接頭辞、範囲外チャネル、非整数の小数チャネル—は invalid_input を返し課金されません。料金は成功リクエストごとに定額 $0.002(単位 item、限界単価ゼロ)です。
実務上のヒント、制限、関連検索
ハッシュ付きでも無しでも hex は動き、応答は常にソースを小文字六桁の input_hex に正規化するため下流の diff が安定します。invalid_input を返す失敗タスクは前払い残高を消費しないため、不完全なクリップボード値を貼る探索スクリプトやフォーム検証を安価に保てます。
連携の活用例
脱彩ヘルパーの単体テスト
hex と RGB の fixture から既知の良いグレー値を生成し、テーマ エンジンとアクセシビリティのコントラスト検査が安定した輝度計算を検証できるようにします。
技術的な質問
カラー→グレースケール変換はどの式を使いますか?
古典的な輝度加重:Y = 0.299·R + 0.587·G + 0.114·B を 0 から 255 の最も近い整数に丸めます。グレー hex はそのバイトを三回繰り返した #YY です。
どの色形式が受け付けられますか?
Hex #RGB または #RRGGBB(# は任意)、CSS rgb(r,g,b)、素の r,g,b 一覧、または 0–255 の個別整数フィールド r・g・b。アルファと名前付き CSS 色は受け付けません。
成功時に何が返りますか?
整数 gray(gray_value と value も)、gray_hex / hex、gray_rgb、css の rgb() 文字列、ソースの input_hex と input_rgb、formula、weights、luminosity、message、steps です。
無効な色値ではどうなりますか?
API は問題を説明するメッセージ付きで invalid_input を返します(空入力、不正 hex、範囲外チャネルなど)。検証失敗は課金されません。
カラー→グレースケール変換は無料ですか?
ブラウザ ツールは無料でローカル実行です。API 呼び出しは成功リクエストごとに前払い KIT 残高から $0.002 を使用し、失敗タスクは課金されません。