ForHosting KIT · 開発者向けツール

16進カラーから類似色パレットを生成します

16進の基準色と必要な色数を指定すると、再現可能な類似色パレットを作成できます。基準色をHSLへ変換し、元の色相を中心とする60度の範囲に指定数を均等配置した後、各色を正規化済みの16進表記へ戻します。1色なら基準色相を返し、2色以上なら±30度の両端を含めます。乱数や通信を使わないため、デザイントークン、グラフ、イラスト、ビルド処理に適しています。

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

無料で実行 API仕様を見る

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

基準色とパレットの色数を選択します

最初に、3桁または6桁のCSS用16進カラーを入力してください。先頭のハッシュ記号は省略できます。短縮表記は変換前に展開されるため、#36cと#3366ccは同じ基準色として扱われ、同じ正規化結果になります。次にcountで返す色数を正確に指定します。countは1以上の整数でなければならず、パレットを表せない0や負数は拒否されます。1なら色相を動かさず基準色を返します。2なら-30度と30度の境界色を返し、3ならその間に基準色が入ります。色数を増やしても範囲は広がらず、同じ窓内へ等間隔の色が追加されます。彩度と明度は基準色の値を保つので、変化する要素は色相だけです。応答には正規化した基準色、指定数に加え、各色のゼロ始まりのインデックス、符号付きの色相差、循環処理した色相角、6桁小文字の16進値が含まれます。インデックスを固定トークン名に、色相差を設計資料に利用できます。

色相環上の均等な配置を理解します

類似色は円形の色相環で隣り合う位置にあります。この機能は基準色相の30度下から30度上まで、合計60度の固定範囲を使用します。countが1より大きい場合、間隔は60をcountから1を引いた値で割って求めます。たとえば5色なら-30、-15、0、15、30度、4色なら-30、-10、10、30度です。色相は循環するため、0を越えた値は無効な負の角度にはならず、360付近へ回り込みます。処理ではまず16進値からRGBチャンネルを読み、HSLへ変換して各差分を適用し、再び整数RGBと16進値へ変換します。決定的な丸めを行うので、同じ入力からは常に同じJSONが得られます。無彩色も有効です。灰色は彩度が0であるため、数学上の色相を変えても見えるRGBは変化せず、異なる角度に同じ16進値が並ぶ場合があります。これは計算誤りではなく、彩度がなければ色相が外観へ影響しないためです。

制作と開発の工程へ組み込みます

強い対比よりも、関連する色を再現可能な一群として揃えたい場合に生成配列をご利用ください。デザインシステムではインデックスをaccent-1からaccent-5のようなカスタムプロパティへ割り当て、ブランドの基準色が変わったときに一括再生成できます。グラフ作成では系列数をcountに指定し、配列順に色を割り当てることで、まとまりを保てます。イラスト制作では、選定済みの1色から塗りや細部用の色を導けますが、陰影に必要な明度調整は別に行ってください。乱数、日時、通信結果、モデル差を含まないため、スナップショットテストにも向いています。基準色とcountを正本として保存すると、複数のリポジトリへ無関係な色見本を複製せずに済みます。文字、アイコン、操作部品に使用する前には、実際の背景とのコントラストを確認してください。類似色の調和はWCAG適合を保証しません。APIで正常に処理された1項目の料金は$0.002です。countが1未満または整数でない場合は、画面で検証メッセージを表示してください。

活用例

デザインシステムのアクセントトークン作成

承認済みのブランド色から、部品やテーマに使える安定した隣接色を必要数だけ生成します。

イラスト向けの色群作成

選定した基準色から、乱数や手計算なしで統一感のある塗り色と細部色を導きます。

よくある質問

countが1の場合はどうなりますか？

色相差0度の基準色が1色だけ返されます。

範囲の両端は含まれますか？

はい。2色以上では先頭が-30度、末尾が30度になります。

どのカラー形式を利用できますか？

先頭のハッシュ記号がある、またはない3桁・6桁のCSS用16進カラーを利用できます。

灰色で同じ値が繰り返されるのはなぜですか？

灰色の彩度は0なので、数学上の色相を変更しても見えるRGBチャンネルが変わらないためです。

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

正常に処理された1項目は$0.002です。ブラウザー版は対話的な確認にご利用いただけます。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/analogous-palette

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

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

curl -X POST https://api.kit.forhosting.com/color/analogous-palette \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3366cc","count":5}'

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

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/analogous-palette",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#3366cc",
    "count": 5
},
)
task_id = res.json()["task_id"]

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

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

リクエスト例

{
  "color": "#3366cc",
  "count": 5
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.analogous_palette",
  "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の完全なドキュメントを見る →