ビビッドライト合成
下の色と上の色をビビッドライトの方法で重ねます。グレーの#808080に明るい#C0C0C0を重ねると#FFFFFFまで明るくなります。各チャンネルを中間グレーの128と別々に比べるため、強いコントラストが出ます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 底
- #808080
- Top
- #C0C0C0
- Hex
- #FFFFFF
- RGB文字列
- rgb(255, 255, 255)
- モード R
- color_dodge
- モード G
- color_dodge
ビビッドライトは、上(ブレンド)色に応じて各RGBチャンネルへ独立にカラーバーンまたはカラードッジを適用する高コントラストの合成ブレンドモードです。上側チャンネルが中間グレー未満のときビビッドライトは焼きます:コントラストが上がり、ベースの逆数を上側の2倍で割ったようにベースチャンネルが暗くなります。上側チャンネルが中間グレー以上のときビビッドライトは覆い焼きします:上側の逆数の2倍で割ったようにベースチャンネルが持ち上がり、強いハイライトになります。写真家、テクスチャアーティスト、テーマパイプラインの技術者は、2つのhexトークンからPhotoshopと同じプレビューが必要なときにビビッドライトを使います。コントラストマスクの重ね合わせ、継続的インテグレーションでのレイヤー合成スウォッチの一致、デスクトップエディタを開かずにアクセント色を作ることなどです。この機能は検証済みの2つのhex色を受け取り、チャンネルごとに1つの決定論的規則を適用し、合成スウォッチをhexとRGBで返します。
ビビッドライトが各チャンネルでカラーバーンかカラードッジかを選ぶ仕組み
ビビッドライトは上の色を混合比率ではなく、コントラストの判断面として扱います。0から255の範囲の各チャンネルについて、上側チャンネルを中間グレー(128)と比較します。上側チャンネルが128未満ならカラーバーン分岐が走ります:上側チャンネルの2倍が焼きの除数になります。
結果は255から、ベースの逆数と255の丸めた積をその除数で割った値を引いたものになり、合法なチャンネル範囲へ制限されます。上側チャンネルが0のとき焼きの除数は消え、結果は0です。ただしベースチャンネルがすでに白なら白のままです。
上側チャンネルが128以上ならカラードッジ分岐が走ります:上側チャンネルの逆数の2倍が覆い焼きの除数になります。結果はベースチャンネルと255の丸めた積をその除数で割ったものになり、その後制限されます。上側チャンネルが白のとき覆い焼きの除数は消え、結果は白です。
ただしベースチャンネルがすでに黒なら黒のままです。中間グレーの上側チャンネルは支点に位置し、焼きと覆い焼きの包絡線が恒等付近で出会うため、大半のベース値をほぼそのまま残します。順序は重要です:baseとtopを入れ替えると別の操作になり、50パーセントのRGB線形補間とは異なります。
hash f zero zeroのような3桁の省略形は各ニブルを倍にして展開され、任意のhashまたはzero-x接頭辞は除去され、成功応答は両親を6桁の大文字hexに正規化するため、画面スウォッチとCIフィクスチャが安定します。
入力できる色と結果の見方
各値は3桁または6桁の16進色で、任意のhashまたはzero-x接頭辞を付けられます。CSSの名前付き色やrgb括弧文字列は対象外です。上流で正規化してください。
検証失敗は課金されません。テーマファイル用の単一トークンが必要なときはhexを、キャンバスやアクセシビリティツールが分離チャンネルを期待するときはrgbを、灰と色味が混ざった上色でどのコントラスト分岐が発火したかを教える・調べるときはモードラベルを使ってください。両方の文字列は短く保ってください。
この機能は画像を読まず、画素を標本化せず、グラフィックライブラリも呼びません。入るのは2つのhexトークン、出るのは1つの合成スウォッチです。
ワークフロー、料金、他の色ツールとの違い
デスクトップスイートを入れずに、素早いコントラストマスク確認、ロゴ重ね実験、テクスチャプレビューにはブラウザ無料のビビッドライト合成を使います。利用者がビビッドライトブレンドモード、2色のビビッドライト、Photoshop vivid light hexと入力するときの検索意図に応えるのが本機能であり、汎用ミキサーやピンライトでは賄えません。
入力は他のKIT parse項目と同じ保持規則に従い、経路が完全に決定論的なため結果は継続的インテグレーションのフィクスチャに固定しても安全です。開発キットを写像する作者は、学生や本番デザイナーが既に期待するカラーピッカーの横にhexと3つのモードラベルを出せます。
活用例
2つのhexトークンから強いコントラスト重ね
中間調パネル色を上側マスクhexの下に合成し、暗い上チャンネルが影を焼き、明るい上チャンネルがハイライトを覆い焼きします。フル画像エディタは不要です。
ゲームと画面のアクセント生成
マテリアル作者はベースのアルベドトークンを上側の照明ヒント色と合成し、HUDスキンや小道具パレット向けのビビッドライトアクセントスウォッチを作ります。
よくある質問
ビビッドライトは2色をどう合成しますか?
各RGBチャンネルで、topが128未満なら上側の2倍によるカラーバーン、128以上なら上側の逆数の2倍によるカラードッジです。baseとtopをhexで送ってください。
baseとtopの違いは何ですか?
baseは下レイヤーの色です。topはチャンネルごとにカラーバーンかカラードッジかを選ぶブレンド色です。順序は重要で、入れ替えると別の結果になります。
無効なhexコードを送るとどうなりますか?
両色は3桁または6桁の16進(#は任意)でなければなりません。長さ誤りや非hex桁は拒否され、課金されません。
ピンライトやcolor.mixと同じですか?
違います。 color.mixは比率による線形RGB補間です。ピンライトは暗く/明るくを選びます。ビビッドライトはカラーバーンまたはカラードッジを選び、コントラストも検索意図も異なります。
どんな色の書き方を受け付けますか?
3桁または6桁のカラーコードで、先頭の#や0xは付けても付けなくても構いません。色名やかっこ付きのRGB表記は受け付けないため、気づかないうちに違う色になることはありません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/vivid-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/vivid-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/vivid-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/vivid-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/vivid-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.vivid_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、整数の赤緑青のrgb、スタイルシートへ貼るためのrgb_string、チャンネルごとのcolor_burnまたはcolor_dodgeという語のmode_r mode_g mode_b、および常にvivid_lightであるmethodを返し、クライアントは形状を嗅ぎ分けずに分岐できます。base欠落、top欠落、空文字、非hex桁、誤った長さはすべてinvalid_inputで失敗し、メッセージがフィールド名を示すためフォーム検証は正確なコントロールを強調できます。
ワークフロー、料金、他の色ツールとの違い
デザインシステムパイプライン、ゲームマテリアル生成、電子商取引スウォッチサービス、マーケティング資産ボットがKIT残高下で安定した契約を必要とするときは、成功1件あたり$0.002のプリペイドAPIを使います。比率によるlerpが必要なときはcolor.mix、絵の具のようなRYB泥が欲しいときはcolor.mix_subtractive、より穏やかな暗く/明るくの兄弟が欲しいときはcolor.pin_light、1色だけをパーセントで動かしたいときはcolor.lightenまたはcolor.darkenと組み合わせてください。リクエストは2つのhex文字列に留め、変換なしで名前付き色を送らず、baseが下レイヤーであることを文書化して、チームが誤って順序を逆転しないようにしてください。
連携の活用例
CIでPhotoshopのビビッドライトプレビューに合わせる
テーマとテクスチャのパイプラインがAPIを呼び、自動ビルドがデザイナーがPhotoshopで見た同じビビッドライトhexを毎回ビット単位で再現します。
技術的な質問
ビビッドライト合成は無料ですか。
ブラウザ用具はお使いの機器上で無料です。API呼び出しは成功1件あたり$0.002のプリペイドKIT残高を使い、検証失敗は課金されません。