補色ファインダー
色相環で反対側にある色をすぐに求めます。純粋な赤#FF0000の補色はシアン#00FFFFで、彩度と明度は変わらず、カラーコード・RGB・HSLで返します。ブランドカラーからアクセント色を作るのに便利です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- ソース色(hex)
- #FF0000
- 十六進
- #00FFFF
- hex 桁
- 00FFFF
- 抵抗(Ω)
- 0
- G
- 255
デザイナー、フロントエンド開発者、ブランドチームは、色相環上で与えられた見本のちょうど反対側にある色をしばしば必要とします。ボタンと背景の組み合わせ、ブランドのプライマリから作るアクセント用トークン、古典的な色彩理論の教材デモなどです。この補色ファインダーは、#FF0000 のような hex コードや短縮形 #f00、rgb(r,g,b) 文字列、または 0 から 255 までの赤・緑・青の各チャンネルを受け取り、ソースを色相・彩度・明度に変換し、彩度と明度を固定したまま色相をちょうど 180 度回転させ、補色を hex、RGB チャンネル、HSL 成分、貼り付け可能な CSS 文字列として返します。
色の入力と反対色相の計算方法
hex 入力は先頭のハッシュの有無を問わず 3 桁または 6 桁の十六進を受け付けるため、#FF0000 と FF0000、短縮形の #f00 と f00 のどれも使えます。大文字小文字は無視されます。rgb(...) や rgba(...)
文字列、255,0,0 のようなカンマ区切りの三つ組も送れます。アルファがある場合、補色計算では無視されます。エンジンがソースを整数 sRGB チャンネルに解決したあと、CSS やグラフィックス系で使われるのと同じ max-min-chroma 経路で HSL に変換します。
明度は正規化チャンネルの最大と最小の和の半分、彩度は灰色では 0、それ以外は標準 HSL 式でスケールした chroma、色相は 0 から 360 度までの扇形角度です。補色は色相に 180 度を加えて 360 で剰余を取り、彩度と明度はそのまま、その HSL 三つ組を RGB 整数と 6 桁大文字 hex に戻して作ります。
デザインでの使い方と実務上の限界
パレット確認、講義デモ、ブランドアクセントの試行には、色ライブラリを入れずに無料のブラウザ内補色ファインダーを呼び出します。検証失敗はエンジン拒否後に残高を消費しません。アクセシブルなテーマを組むときは補色をコントラストチェッカーと組み合わせ、明度を固定したままブランドプライマリを反転するトークンパイプラインに反対アクセントを流し込めます。
ソース入力は他の KIT parse アイテムと同じ保持規則に従い、アルゴリズムが完全に決定的なので結果は継続的インテグレーションのフィクスチャに固定して安全です。
活用例
プライマリ hex からブランドアクセント
ブランドのプライマリを、毎回手で見本を選ばずに、ボタン・チャート・マーケ用ブロック向けの信頼できる反対アクセントへ変換します。
よくある質問
hex コードの補色はどう求めますか?
応答には complement.hex(とトップレベル hex)に加え、反対色相の RGB と HSL が含まれます。
hex の代わりに RGB チャンネルを送れますか?
はい。 r、g、b をそれぞれ 0 から 255 で渡すか、rgb(255,0,0) のような文字列を使います。チャンネル入力では三チャンネルすべてが必須です。
補色はどう計算されますか?
エンジンは色を HSL に変換し、色相に 180 度を加え(360 で剰余)、彩度と明度はそのまま、RGB と hex に戻します。
色の値が正しくないとどうなりますか?
不完全なカラーコード、0~255の範囲外のチャンネル、値の欠落はエラーとして返します。勝手に範囲内へ丸めないので、誤ったデータがもっともらしい色に化けることはありません。
灰色の補色は何色ですか?
灰色には彩度がないため、補色もまったく同じRGB値のままです。表示される色相の角度だけが180度進み、画面上の見た目は変わりません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/complementary \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#FF0000","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/complementary", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#FF0000",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/complementary",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#FF0000",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#FF0000","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#FF0000","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#FF0000",
"hex": "valor-ejemplo"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.complementary",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
不正な色値—壊れた hex、範囲外のチャンネル、欠落フィールド—は明確な invalid_input エラーで失敗し、悪いデータが黙ってクランプされることはありません。
色の入力と反対色相の計算方法
color という文字列フィールド(別名 hex、value、colour、input)か、数値チャンネル r、g、b(別名 red、green、blue)のいずれかを指定してください。チャンネル入力では 0 から 255 の閉区間に三成分すべてが必要で、数値は JSON 数値でも数値文字列でも構いません。経路はネットワークも乱数シードも壁時計も使わない純粋な算術なので、同一入力は常に同一の JSON を生成します。
original・complement・トップレベル便利フィールドの読み方
成功時の応答には、解析されたソース色を表す original オブジェクトと、反対色を表す complement オブジェクトが含まれます。純赤 #FF0000 はシアン #00FFFF を生み、純緑はマゼンタ方向、純青は黄方向の補色になります。無彩色の灰色は彩度が 0 のため回転後も同じ RGB を保ち、報告される色相角だけが 180 度進みます。各束は先頭ハッシュ付き 6 桁大文字の hex、ハッシュなしの hex_digits、r・g・b チャンネル、度単位の色相とパーセントの彩度・明度のための h・s・l、長い名前 hue・saturation・lightness、入れ子の hsl オブジェクト、rgb(0, 255, 255) のような rgb_css 文字列を持ちます。素早い連結のため、同じ補色値はトップレベルでも hex、r、g、b、h、s、l、hsl、rgb_css として繰り返され、UI コードや採点器が入れ子なしの平坦な形を読めます。hue_rotation_deg は常に 180、method は常に hue_rotate_180 なので、ルーターは形を嗅がずに分岐できます。source フィールドは解析が hex、rgb 文字列、別チャンネルのどれを使ったかを記録します。色データの欠落、非 hex のゴミ、誤った hex 長、0 から 255 の外のチャンネルはすべて invalid_input で失敗し、エンジンが拒否したあと課金されません。
API の使い方・料金・デザイン作業・実務上の限界
hex または rgb 文字列を color に、あるいはチャンネル値を r、g、b に入れた JSON 本体を送ってください。デザインシステム、テーマ生成、EC バリアントツール、アクセシビリティパイプラインが KIT 残高のもと $0.002 の成功アイテム単価で安定契約を必要とするときは前払い API を使います。検索意図が色相環上の補色・反対色に特化しているときはこのエンドポイントを優先し、hex から HSL だけなら専用の hex 対 HSL 変換器、RGB から HSL なら RGB 対 HSL 変換器、HEX・RGB・HSL・LAB・CMYK 間の多形式変換ならカタログ内のより広い色変換器を使います。SDK を出荷する著者は、トップレベルの hex と RGB をフォーム制御や CSS カスタムプロパティへ直接写像でき、言語ごとに色解析と HSL 回転を再実装する必要はありません。
連携の活用例
テーマとデザイントークンのパイプライン
色を hex や RGB で保持する自動化が、ライト/ダークテーマ変種向けに決定的な JSON で補色トークンを導出します。
色彩理論の教育と採点
講義とコーディング評価が、学生の補色解答を安定フィクスチャと照合し、色値が壊れているときは invalid_input を返します。
技術的な質問
色値が無効な場合はどうなりますか?
リクエストは invalid_input で失敗します。壊れた hex、誤った長さ、非 hex 文字、欠落フィールド、0–255 外のチャンネルは拒否され、課金されません。
補色ファインダーは無料ですか?
ブラウザツールはお使いの端末で無料で動作します。API 呼び出しは前払い KIT 残高を成功アイテムあたり $0.002 で使用し、検証失敗は課金されません。