ForHosting KIT · 開発者向けツール

スクエア配色ジェネレーター

スクエア配色は、色相環の上に4色を90度ずつ等間隔で配置する配色方法です。基準となる16進カラーを入力すると、彩度と明度を保ったまま、基準色と調和する3色を生成します。結果には再利用しやすい16進、RGB、HSLの各値が含まれるため、デザインシステム、スタイルシート、イラスト、ブランド設計にそのまま活用できます。計算は決定的であり、同じ有効な入力からは、乱数やネットワークを使わず常に同じ順序のパレットが得られます。

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

無料で実行 API仕様を見る

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

スクエア配色を組み立てる仕組み

スクエア配色では、360度の色相環を4つの等しい区間に分けます。入力した色を最初の位置とし、その色相に90度、180度、270度を順に加えます。彩度と明度は変えないため、変化する要素は色相だけになり、4色の数学的な関係が明確です。間隔が交互に変わる長方形型のテトラード配色とは、この点が異なります。返される各色には、正確な色相オフセット、正規化したHSL値、RGBチャンネル、小文字6桁の16進コードが含まれます。色相は360度を超えると正しく先頭へ戻るため、色相環の終端に近い基準色でも同じ規則で処理されます。グレーのような無彩色はHSL彩度が0なので、色相を回転しても見た目の色は変わりません。これは色モデルの正常な性質であり、エラーではありません。出力は必ず正規化した基準色から始まり、残り3つの回転色が順番に続きます。

4色の役割を決めて活用する方法

等間隔の色相は多様性を生みますが、見やすい階層を作るには各色の役割を決める必要があります。まず基準色をブランド、背景、またはイラストの主役としてお使いください。回転した1色を主要なアクセント、別の1色を補助アクセントにし、反対側の色は強い区別が必要な場面に割り当てると整理しやすくなります。4色は彩度と明度が同じなので、初期状態では視覚的な強さも近くなります。完成した画面では、役割を決めた後に明るい派生色や暗い派生色を作り、文字、境界線、塗り、操作状態が同じ強さで競合しないようにしてください。配色の調和はアクセシビリティを保証しないため、前景色と背景色のコントラストは必ず個別に確認してください。このツールは規則的な出発点を提供しますが、4色を同じ面積で使う必要はありません。1色を中心に据え、1色か2色で支え、最後の色を強調に限定する配分が実用的です。

決定的な結果をデザイン工程で使う方法

パレットを自動処理に組み込む場合、結果が常に同じであることは重要です。保存した基準の16進カラーから、ビルド時、デザイントークンのスクリプト実行時、または利用者がテーマを変更したときに、同じ4色を再生成できます。入力は正規化されるため、短縮表記や大文字と小文字の違いも統一されます。返される配列から4つのコードをまとめてコピーしたり、構造化された色データを確認したりできます。このアルゴリズムは固定のHSL変換と色相オフセットだけを使い、好みによる順位付け、雰囲気の推測、見えない補正は行いません。その透明性により、結果の検証と再現が容易です。後から由来を確認できるよう、生成したパレットと基準色を一緒に記録してください。用途に合わせて彩度や明度を調整する場合も、元のスクエア配色を参照用に残し、派生色は別に記録すると管理しやすくなります。APIリクエストは$0.002で、ブラウザー版では色を外部へ送らず手動で試せます。

活用例

4色のデザインシステムを作成

承認済みのブランドカラーから、画面やキャンペーンに使える数学的に関連した4つの初期トークンを作成します。

イラスト用パレットを設計

人物、背景、光、アクセントに異なる役割を与えながら、つながりを保つ等間隔の色相を生成します。

テーマ生成を自動化

利用者やプロジェクトが基準色を指定するたびに、同じ順序の16進、RGB、HSL値を再生成します。

よくある質問

スクエア配色とは何ですか？

色相環上で色相を90度ずつ離して配置する、4色の調和配色です。

長方形型のテトラード配色とは何が違いますか？

スクエア配色は90度の等間隔を4つ使います。長方形型では通常、60度と120度の間隔が交互になります。

どの16進カラー形式を入力できますか？

#f00やe74c3cのように、先頭の#がある形式とない形式のどちらでも、3桁または6桁で入力できます。

グレーを入力すると同じ色が返るのはなぜですか？

グレーはHSL彩度が0であるため、色相を回転しても表示されるRGB値が変わらないからです。

調和したパレットなら十分なコントラストになりますか？

いいえ。色相の調和と文字のコントラストは別の要件です。前景色と背景色の組み合わせを個別に検証してください。

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

APIリクエスト1回あたり$0.002です。ブラウザー版はAPIリクエストなしで手動利用できます。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/square-scheme

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

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

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

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

import os, requests

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

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

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

リクエスト例

{
  "hex": "#e74c3c"
}

レスポンス例

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

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

料金

1リクエストあたり$0.002

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

制限

hex_max_len 7

エラー

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

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