等間隔色相パレット
色相200°から5色を作ると72°ずつ離れ、最初は#269dd9、最後は#26d93eになります。彩度と明度は固定なので、グラフの色が一部の色域に偏りません。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Hue
- 200
- 数量
- 5
- 彩度
- 70
- 明度
- 50
- ステップ (°)
- 72
- スキーム
- #269dd9, #8526d9, #d92656, #d9cd26, #26d93e
- 色相
- 200, 272, 344, 56, 128
等間隔色相パレット生成ツールは、指定した基準色相を起点に、彩度と明度を一定に保ったまま色相環上でN色を等しい角度間隔に配置します。開始色相(度)、2から36までの個数、各スウォッチで共通に保つ彩度と明度のパーセントを入力すると、ステップ幅を360をNで割った値として計算し、続く色相を0以上360未満の半開区間へ正規化し、各HSLをsRGBと小文字hexへ変換し、scheme配列、hues一覧、RGB・CSS・HSL付きの色オブジェクトを返します。多段チャート系列を組み立てるブランドチーム、ダッシュボード用テーマトークンを作るフロントエンド開発者、等間隔色相を学ぶデザイン学生は、フルデザインスイートを開かずに同じ決定論的写像を必要とします。
等間隔色相パレットとは何か、等しいステップが重要な理由
色相円上の等角間隔は、色相環の特定の扇を偏重しない多色シリーズを作る古典的な方法です。補色は180度、トライアドは120度、テトラディックは90度を用いますが、本機能はその考えを2から36の任意の整数Nへ一般化し、ステップを360をNで割った値に設定して基準色相から歩を進めます。彩度と明度は意図的に固定します。
等間隔色相パレットの検索意図はバランスの取れた色相回転であり、明度や彩度のランプを新たに作ることではないため、鮮やかな中明度の起点は鮮やかな中明度の同伴色を、パステル起点はパステルの同伴色を生みます。彩度が0のとき、無彩色には意味のある回転可能な色相がないため各メンバーはグレーへ収束します。これは正しい色の物理であり不具合ではありません。
教員はこのツールを固定スキーム生成と組み合わせ、Nの変化が視覚的緊張をどう変え、同じ基準色相が5段チャートや12段の質的マップにどう供されるかを示します。プロダクトが3〜4のブランドアクセント固定ではなく系列数に応じて伸びるカテゴリパレットを要する場合、デザインシステムはこの構造を用います。
実務上のヒント、制限、関連検索
色相環の任意ピックではなく、すでに信頼するブランドやUIの色相から始めてください。先頭メンバーはラップ後オフセット0の基準色相であり、インデックス0がHSL上のアイデンティティ色です。チャート系列や凡例の大きさに合う整数個数を選び、5段なら72度、6なら60、8なら45、12なら30度のステップになります。
アクセシビリティパイプラインがすでに検証する範囲に彩度と明度を収め、等色相間隔は固定背景に対するWCAGコントラストを保証しないため、ソリッド塗り上のテキストではコントラストチェッカーと併用してください。本ランディングは補色専用やトライアド専用の出力を期待するものではなく、それらは別SEO意図の固定スキーム用ツールです。
Nを自ら制御するパラメータにするときに本機能を使います。名前付きCSS色やhex文字列は範囲外なので、トークンhexから始める場合は先に色相・彩度・明度へ変換してください。本ページは等間隔色相パレット、等色相ホイール生成、無料のN色色相環ツールを探す方向けであり、画像パレット抽出や完全な多空間変換ではありません。
活用例
カテゴリチャートとダッシュボード系列
データチームがブランド基準色相と系列数Nを選び、schemeのhex一覧をチャートライブラリへ入れて等間隔のカテゴリ色にします。
テーマ用デザイントークンの足場
フロントエンド開発者が彩度・明度固定の基準色相からN個のCSSカスタムプロパティを生成し、多アクセントUIキットに使います。
よくある質問
各色は何度ずつ離れますか?
360度を色数で割った角度です。5色なら72°ずつになり、基準が200°なら272°、344°、56°、128°と色相環を一周します。
何色まで作れますか?
2色から36色まで作れます。グラフの系列数や凡例の項目数に合わせると、それぞれに等しく離れた色相が割り当てられます。
すべての色が灰色になるのはなぜですか?
彩度が0になっているためです。彩度のない色には回転させる色相がないので、どの色も同じ灰色になります。彩度を70%などに上げてください。
最初の色はどれになりますか?
常に指定した基準の色相そのものです。ブランドカラーから始めると、200°の場合は最初の色が#269dd9になります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hue-wheel \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":200,"count":5,"saturation":70,"lightness":50}'const res = await fetch("https://api.kit.forhosting.com/color/hue-wheel", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hue-wheel",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hue-wheel", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":200,"count":5,"saturation":70,"lightness":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":200,"count":5,"saturation":70,"lightness":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hue-wheel", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hue_wheel",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
欠落フィールド、整数でない個数、許容範囲外の個数、0から100の外にある彩度や明度など無効な入力は、パレットを捏造せず明確なinvalid_inputで失敗します。経路は純粋な算術であり、ネットワークも乱数シードも時刻依存もなく、無料のブラウザ実行と前払いAPIは毎回同じJSONを返します。
等間隔色相パレットとは何か、等しいステップが重要な理由
応答は常に0からメンバーを番号付けしoffset_degとhueを報告するため、ドキュメント、デザイントークン、自動テストは手並べ替えなしで色相環上の厳密な位置を検証できます。
APIの呼び出し方と返却内容
将来の丸めやHSL変換の変更がすぐ検知できるよう、単体テストではschemeとhues配列を固定することを推奨します。必須の有限数4つを含むJSON本体を送ってください。hueは基準角(度、任意の有限値を受け取り0以上360未満へ包む)、countは2から36の整数、saturationは0から100のパーセント、lightnessは0から100のパーセントです。数値文字列もJSON数値と同様に受け付けます。成功時は正規化済みhue、エコーされたcount、丸め済み彩度・明度、countで360を割った固定小数丸めのstep_deg、巡回順の小文字#rrggbbのscheme配列、各角度のhues配列、index・offset_deg・hue・hex・hex6・r・g・b・rgb・css・hslを持つcolors配列、短い英語message、正規化とステップと各変換を記すsteps配列を返します。欠落フィールド、非有限値、整数でないcount、2〜36外のcount、0〜100外の彩度または明度はinvalid_inputとなり課金されません。価格は成功リクエストごとに単位itemで$0.002の定額です。
実務上のヒント、制限、関連検索
テストでは鮮やかな多段例、count=2(180度分割)、ほぼグレーの彩度、意図的な無効countを少なくとも含め、間隔計算と検証の両方を固定します。invalid_inputの失敗タスクは前払い残高を消費しないため、不完全な値の貼り付けや探索的デザインスクリプトを安く保てます。
連携の活用例
授業での色相環演習
学生が手描きの等分割扇と決定論的なstep_degを比較し、宿題やプログラミング型でhues配列を検証します。
技術的な質問
等間隔色相パレットとは何ですか?
色相円上で等しい角度ステップに置いたN色です。本ツールは基準色相からstep = 360/Nとし、各メンバーで彩度と明度を固定します。
必須の入力は何ですか?
4つの数:hue(度、[0, 360)へ包む)、count(整数2–36)、saturation(0–100%)、lightness(0–100%)。無効値はinvalid_inputです。
ステップ幅はどう計算されますか?
step_deg = 360 / count(安定した小数丸め)。メンバーiは hue wrap(base + i × step_deg) を使います。
トライアドや補色スキームと同じですか?
それらは固定の特例です(N=3で120°、N=2で180°)。本機能は許可された任意のNへ一般化します。
等間隔色相パレットのツールは無料ですか?
ブラウザ版は無料でローカル実行です。APIは成功リクエストごとに$0.002のKIT前払い残高を使い、失敗タスクは課金されません。