ピンライト合成
#808080の上に#C0C0C0を重ねると#818181になり、明るい上の色は下地を128から129へわずかに持ち上げるだけです。ピンライトは、上の色が十分に暗いか明るいときだけ下地を置き換えます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 底
- #808080
- Top
- #C0C0C0
- Hex
- #818181
- RGB文字列
- rgb(129, 129, 129)
- モード R
- lighten
- モード G
- lighten
ピンライトは、ベース色の各チャンネルを上（ブレンド）色に応じてより暗い値またはより明るい値に置き換える、古典的な合成ブレンドモードです。上側チャンネルが中間グレー未満のときモードは暗くします：結果はベースチャンネルと上側チャンネルの2倍との最小値です。上側チャンネルが中間グレー以上のときモードは明るくします：結果はベースチャンネルと上側チャンネルの2倍から255を引いた値との最大値です。デザイナー、テクスチャアーティスト、パイプラインエンジニアは、フル画像エディタなしで鋭い選択的コントラストが必要なときにピンライトを使います。ハイライトマスクの重ね合わせ、中間調パネル下の影の引き締め、自動化テーマツールでのPhotoshopピンライトプレビューとの一致などです。この機能は検証済みの2つのhex色を受け取り、赤・緑・青に同じ決定論的なチャンネル規則を適用し、合成スウォッチをhexとRGBで返します。
ピンライトが各チャンネルで暗く／明るくを選ぶ仕組み
ピンライトは上の色を単純な混合比率ではなく、判断面として扱います。0から255の範囲の各チャンネルについて、上側チャンネルを中間グレー（128）と比較します。上側チャンネルが128未満なら暗くする分岐が走ります：上側チャンネルの2倍が上限となり、結果はその上限とベースチャンネルの小さい方です。
見た目では、上レイヤーが深い影である箇所で明るいベース画素が引き下げられます。上側チャンネルが128以上なら明るくする分岐が走ります：上側チャンネルの2倍から255を引いた値が下限となり、結果はその下限とベースチャンネルの大きい方です。これにより、上レイヤーが明るいハイライトである箇所で暗いベース画素が持ち上げられます。
中間グレーの上側チャンネルは境界に位置し、暗く／明るくの包絡線がベース付近で出会うため、ベース値をほぼそのまま残しがちです。順序は重要です：baseとtopを入れ替えると別の操作になり、50パーセントのRGB線形補間とは異なります。
hash f zero zeroのような3桁の省略形は各ニブルを倍にして展開され、任意のhashまたはzero-x接頭辞は除去され、成功応答は両親を6桁の大文字hexに正規化するため、UIスウォッチとCIフィクスチャが安定します。
入力する色と結果の見方
各値は3桁または6桁の16進色で、任意のhashまたはzero-x接頭辞を付けられます。CSSの名前付き色やrgb括弧文字列は対象外です。上流で正規化してください。
検証失敗は課金されません。テーマファイル用の単一トークンが必要なときはhexを、キャンバスやアクセシビリティツールが分離チャンネルを期待するときはrgbを、灰と色味が混ざった上色でどの分岐が発火したかを教える・デバッグするときはmode_*ラベルを使ってください。
活用例
選択的なハイライトと影の重ね合わせ
中間調パネル色を上側マスクhexの下に合成し、暗い上側チャンネルは影を深め、明るい上側チャンネルはハイライトを強調します。フル画像エディタは不要です。
ゲームとUIマテリアルの調整
マテリアル作者がベースアルベドトークンと上側の照明ヒント色を合成し、HUDスキンや小道具パレット用のピンライトアクセントスウォッチを生成します。
よくある質問
ピンライトは2色をどう合成しますか？
各RGBチャンネルで、topが128未満なら結果はmin(base, 2×top)（darken）、128以上ならmax(base, 2×top−255)（lighten）です。baseとtopをhexで送ってください。
baseとtopの違いは何ですか？
baseは下レイヤーの色です。topはチャンネルごとに暗く／明るくを選ぶブレンド色です。順序は重要で、入れ替えると別の結果になります。
無効なhexコードを送るとどうなりますか？
両色は3桁または6桁の16進（任意の#）である必要があります。長さ不正や非hex桁は拒否され、課金されません。
color.mixと同じですか？
いいえ。 color.mixは比率による線形RGB補間です。ピンライトは比率を使わず、topチャンネルだけが暗く／明るくを選びます。アルゴリズムも検索意図も異なります。
#808080の上に#C0C0C0を重ねると何色になりますか？
#818181になります。上の各チャンネルは192で中間の灰色より明るく、その2倍から255を引くと129です。下地の128をわずかに上回るので、1段だけ明るくなります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/pin-light \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":"#808080","top":"#C0C0C0"}'const res = await fetch("https://api.kit.forhosting.com/color/pin-light", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": "#808080",
"top": "#C0C0C0"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/pin-light",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": "#808080",
"top": "#C0C0C0"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/pin-light", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":"#808080","top":"#C0C0C0"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":"#808080","top":"#C0C0C0"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/pin-light", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"base": "#808080",
"top": "#C0C0C0"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.pin_light",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無効または欠落した入力はinvalid_inputで失敗し、スクリプトが誤った色を黙って出荷しないようにします。
ピンライトが各チャンネルで暗く／明るくを選ぶ仕組み
アルゴリズムはネットワークも乱数シードも壁時計もない純粋な算術なので、同一入力は常に同一のJSONを生成します。
入力契約、応答フィールド、検証エラー
必須の文字列フィールド2つを含むJSON本体をPOSTします：base（下レイヤー）とtop（暗く／明るくを選ぶブレンドレイヤー）です。エイリアスcolor1、bottom、hex1、from、backgroundはbaseに、color2、blend、hex2、to、foregroundはtopに対応し、古いフォーム欄やデザインツール用語もきれいに接続できます。成功時、ペイロードは正規化済みのbaseとtopのhex、base_rgbとtop_rgbのチャンネルオブジェクト、合成hex、整数r g bのrgb、CSSへ貼るためのrgb_string、チャンネルごとのdarkenまたはlightenという語のmode_r mode_g mode_b、および常にpin_lightであるmethodを返し、クライアントは形状を嗅ぎ分けずに分岐できます。base欠落、top欠落、空文字、非hex桁、誤った長さはすべてinvalid_inputで失敗し、メッセージがフィールド名を示すためフォーム検証は正確なコントロールを強調できます。
ワークフロー、料金、他の色ツールとの違い
デスクトップスイートを入れずに、素早いマスク確認、ロゴ重ね実験、テクスチャプレビューにはブラウザ無料のピンライト合成を使います。ユーザーがピンライトブレンドモード、2色のピンライト、Photoshop pin light hexと入力するときの検索意図に応えるのが本機能であり、汎用ミキサーでは賄えません。入力は他のKIT parse項目と同じ保持規則に従い、経路が完全に決定論的なため結果は継続的インテグレーションのフィクスチャに固定しても安全です。デザインシステムパイプライン、ゲームマテリアル生成、ECスウォッチサービス、マーケティング資産ボットがKIT残高下で安定した契約を必要とするときは、成功1件あたり$0.002のプリペイドAPIを使います。比率によるlerpが必要なときはcolor.mix、絵の具のようなRYB泥が欲しいときはcolor.mix_subtractive、1色だけをパーセントで動かしたいときはcolor.lightenまたはcolor.darkenと組み合わせてください。リクエストは2つのhex文字列に留め、変換なしで名前付き色を送らず、baseが下レイヤーであることを文書化して、チームが誤って順序を逆転しないようにしてください。SDKを写像する作者は、学生や本番デザイナーが既に期待するカラーピッカーの横にhexと3つのモードラベルを出せます。
連携の活用例
CIでPhotoshopのピンライトプレビューに一致
テーマとテクスチャのパイプラインがAPIを呼び、自動化ビルドがデザイナーがPhotoshopで見たのと同じピンライトhexを毎回ビット単位で再現します。
技術的な質問
ピンライト合成は無料ですか？
ブラウザツールはお使いの端末で無料です。API呼び出しは成功1件あたり$0.002のプリペイドKIT残高を使い、検証失敗は課金されません。