除外モードで2色を合成して16進カラーを計算
除外カラーブレンダーは、2つの16進カラーを除外モードで合成し、正確な結果を正規化済みhex値、数値のRGBチャンネル、コピー可能なCSSのRGB文字列として返します。除外は差の絶対値モードより穏やかで低コントラストです。明るい色はもう一方を反転させる傾向があり、暗い色の変化は小さく、同じ中間色は灰色に近づくことがあります。計算前に両方の入力を検査するため、欠落、不正、未対応の値には曖昧な結果ではなく明確な検証エラーを返します。
無料で実行
除外ブレンドモードで得られる色
除外は2つの色をチャンネルごとに比較しますが、単純な平均ではありません。赤、緑、青の各チャンネルについて両方の値を正規化し、除外の関係式を適用してから、結果を8ビットのチャンネルへ戻します。黒を組み合わせるともう一方の色は変化せず、白を組み合わせると反転します。その中間の値では、差の絶対値モードよりも穏やかなコントラストになるのが一般的です。そのため、強い輪郭や極端な明暗差を避けながら、色同士の相互作用を見せたい場合に役立ちます。この演算は対称なので、1番目と2番目の色を入れ替えても結果は変わりません。出力には両入力の正規化済み表記も含まれ、何を計算したか確認できます。また、ブレンドモード名も返すため、別の色変換と一緒に保存したり、自動化されたデザイン工程で比較したりする際に便利です。アルファ値は意図的に対象外としており、各入力を不透明なRGBカラーとして扱うことで、予測可能で持ち運びやすい結果を保ちます。
16進入力の検証方法と計算方法
各色は3桁または6桁の16進数で入力してください。先頭の#は省略でき、英字は大文字と小文字のどちらも使用できます。3桁表記は計算前に展開されるため、#369は#336699になります。CSSの色名、アルファチャンネル、rgb()形式、値の前後にある説明文、一部だけが有効な文字列には対応しません。この厳格な検証により、入力ミスが別の色として黙って解釈されることを防ぎます。検証後の各チャンネルでは標準的な除外式を使います。2つの値を加算し、その積を2倍して255で割った値を差し引きます。結果は最も近い整数チャンネルに丸め、通常の8ビットRGBと6桁の16進表記にします。計算は言語、端末設定、現在時刻、乱数、外部サービスに依存しません。同じ入力からは常に同じJSONフィールドと値が得られます。両方の色が必須であるため、欠けている場合は結果を生成する前に対象フィールド名を含むエラーを返します。
デザインと開発で結果を利用する方法
返されたhex値は、不透明なCSSカラーを受け付ける場所で使用できます。RGB文字列はスタイルシート、デザイントークン、canvas処理、テストデータへコピーできます。数値のRGBオブジェクトも別に返すため、コード側で文字列を再解析せず各チャンネルを確認できます。除外合成は、インターフェースの重なったアクセント、ポスター表現、写真のオーバーレイ、生成アート、低コントラストの差の効果を求めるホバー状態の事前確認に適しています。2つのレンダリング環境が同じブレンド計算を行うか検証する際の決定的な基準にもなります。この計算機が処理するのは色の値だけです。透明度の合成、要素背面の考慮、カラープロファイル変換、特定の画像ソフト固有の挙動は再現しません。意味のある比較には、元の色と同じRGBワークフローで出力をご利用ください。ブラウザーでは手軽に試せます。繰り返し処理へ組み込むAPIリクエストは$0.002です。ネットワークに依存しないため、安定した出力が必要なビルドツールやテストにも適しています。
活用例
穏やかなコントラストを事前確認
2つのパレット値を除外で組み合わせた不透明色を計算し、レイアウトへ適用する前に効果を確認できます。
決定的なデザイントークンを作成
テーマ、コンポーネント状態、イラスト体系、再利用可能なCSS変数向けに、安定した派生hexカラーを生成します。
ブレンド計算を検証
正規化済み入力とチャンネルを含む明示的なRGB除外結果を基準に、レンダラーやグラフィックス工程を比較します。
よくある質問
APIでの計算料金はいくらですか?
APIリクエスト1回の料金は$0.002です。ブラウザーツールはこのページで直接ご利用いただけます。
除外は差の絶対値ブレンドと同じですか?
いいえ。どちらもチャンネルを比較しますが、除外のほうが一般に穏やかで低コントラストの効果になります。
どのカラーフォーマットを使用できますか?
#369、336699、A0B1C2のように、先頭へ任意の#を付けた3桁または6桁の16進数をご使用ください。
2つの色の順序は結果に影響しますか?
いいえ。除外式は対称なので、入力の順序を入れ替えても同じ合成色になります。
透明色に対応していますか?
いいえ。入力は不透明なRGBカラーです。アルファ値を含む4桁または8桁の16進数は拒否されます。
画像編集ソフトで少し違って見えるのはなぜですか?
カラープロファイル、リニアライト処理、透明度、合成時の背景、ソフト固有の丸めにより見え方が変わる場合があります。本機能は決定的な8ビットRGB演算を使用します。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/exclusion \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#336699","color2":"#CC8844"}'const res = await fetch("https://api.kit.forhosting.com/color/exclusion", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#336699",
"color2": "#CC8844"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/exclusion",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#336699",
"color2": "#CC8844"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/exclusion", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#336699","color2":"#CC8844"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#336699","color2":"#CC8844"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/exclusion", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color1": "#336699",
"color2": "#CC8844"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.exclusion",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |