ForHosting KIT · 開発者向けツール

hexまたはRGB値から補色を生成

補色とは、色相環で基準色の正反対に位置する色です。このジェネレーターは一般的なhex値またはRGB値を受け取り、彩度と明度を維持したまま色相を正確に180度回転し、正規化した基準色と生成した補色を返します。インターフェース、イラスト、グラフ、ブランド案、デザイントークンなどで、明確な2色の関係を作る際にご利用いただけます。計算は決定的であり、同じ有効な入力からは常に同じ結果が得られ、不正な形式には明確な入力エラーを返します。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

正確な基準色をご入力ください

まず、既知の色をご指定ください。#369のような3桁hex、#336699のような6桁hex、先頭の記号を省いた同じ6桁、またはrgb(51, 102, 153)のようなRGB関数に対応しています。hexの英字では大文字と小文字を区別せず、返却値はコピーしやすい大文字6桁hexに正規化されます。RGBチャンネルにはゼロから255までの整数をご使用ください。CSS色名、アルファチャンネル、百分率、不完全なhex文字列、範囲外の値など、解釈が曖昧になる形式は推測せず拒否します。値はcolorフィールドで送信してください。汎用的な連携向けにvalueという別名も使用できます。応答には正規化した基準色も含まれるため、生成結果をご利用になる前に、サービスが入力をどのように解釈したかをご確認いただけます。

180度の色相回転の仕組み

計算では、基準色をRGBからHSL色空間へ変換し、色相に180度を加え、360度の色相環内に収めてからRGBへ戻します。彩度と明度は変更しません。各RGBチャンネルを単純に反転する処理ではなく、デザインで一般に補色と呼ばれる色相環上の関係を求めます。赤はシアン、緑はマゼンタ、青は黄色の方向へ移ります。丸め処理は、一般的なデジタル色形式に必要な整数RGBチャンネルへ戻すときだけ行います。無彩色のグレーは彩度がゼロで視覚的な色相を持たないため、回転しても外観は変わりません。応答には基準色と補色の両方について、hex値と赤、緑、青の各チャンネルが含まれます。そのため、整形済み文字列を解析せずに、画面表示にも自動処理にもご利用いただけます。

生成結果を配色の出発点にします

補色は強い分離を作りますが、生成された2色だけでアクセシビリティや美しい構成が保証されるわけではありません。高彩度の補色を同じ面積で並べると視覚的にちらつく場合があるため、多くのインターフェースでは一方を主要な面に使い、補色を小さなアクセント、状態表示、データ系列、行動ボタンなどに限定します。どちらの色からも明るい色や暗い色を派生させられます。色相環で反対でも輝度が等しいとは限らないため、文字や操作部品では実際の背景とのコントラストをご確認ください。決定的な出力は、ビルド処理で保存済みのブランド色から毎回同じアクセントを作る場合に便利です。試作、グラフ設定、テーマ生成、素材処理にも適しています。APIリクエストには公開基本料金$0.002が適用され、ブラウザーでは同じ純粋な計算をローカルで実行できます。

活用例

画面のアクセントを作成

既存テーマ色から、ボタン、バッジ、強調表示、フォーカス要素に使う反対色相を生成します。

2系列グラフの配色を作成

第1系列の色から十分に離れた第2の色相を導き、完成したグラフでコントラストをご確認いただけます。

デザイントークンを自動生成

保存済みのブランドhex値から、ビルド時やテーマ生成時に決定的な補色トークンを作成します。

よくある質問

どの色形式に対応していますか？

3桁または6桁のhex、先頭記号なしの6桁hex、0から255までの整数を使うrgb(r, g, b)に対応しています。

補色はどのように計算されますか？

基準RGB値をHSLへ変換し、色相を180度回転してから、結果をRGBへ戻します。

RGBチャンネルの反転と同じですか？

いいえ。彩度と明度を維持して色相を回転する処理であり、RGBの直接反転とは異なります。

グレー、白、黒はどうなりますか？

無彩色には見える色相がないため、色相を回転しても外観は変化しません。

APIリクエストの料金はいくらですか？

各リクエストには公開基本料金$0.002が適用されます。同じ決定的な計算をブラウザーでもご利用いただけます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/complementary-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/complementary-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#336699"}'

const res = await fetch("https://api.kit.forhosting.com/color/complementary-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#336699"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/complementary-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#336699"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color":"#336699"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "color": "#336699"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.complementary_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →