単色パレット生成
#3366ccから5段階を作ると#000000、#193366、#3366cc、#99b2e6、#ffffffになり、どれも色相220、彩度60%のままです。ブランドの青を、濃い面から淡い背景まで青のまま保てます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #3366cc
- 数量
- 5
- Hue
- 220
- 彩度
- 60
- 基準の明度
- 50
単色パレットジェネレーターは、1つのCSS 16進カラーと整数のステップ数を受け取り、同じ色相と同じ彩度を共有しながら明度が黒から白まで等間隔に進むN枚のスウォッチを返します。デザイナーがこの古典的な一色相ハーモニーを選ぶのは、ブランドの紺が深い面から淡い背景まで紺のままである必要があり、類似色スキームのように隣の色相へ流れたくないときです。本ツールは16進をHSLへ変換し、HとSを固定したまま、明度を i かける100を N 引く1で割った位置に置くため、5ステップは0、25、50、75、100パーセントに落ちます。
単色パレットが明度を段階化する仕組み
#3366cc や短縮形 #36c のようなCSSの16進カラーから始めます。パーサーは空白を取り除き、桁を小文字にし、3桁コードを標準のCSS倍化規則で展開し、各対を0から255までの赤・緑・青の整数に変換します。それらのチャンネルは、いつものCSSおよびW3Cの式で色相・彩度・明度へ写像されます。
明度はチャンネル分数の最大と最小の平均、彩度はその明度に依存し、色相は色相環上の度数で測られ、無彩色の灰色は色相0を報告します。単色スキームは色相を回さず、RGBで黒や白へ混ぜることもありません。明度の百分率だけを変え、色相と彩度はベースカラーの値のままです。
ステップ指数 i が0から N 引く1まで進むとき、明度は i かける100を N 引く1で割った値になり、最初のスウォッチは常に明度0の純黒、最後は常に明度100の純白、中間の停留点はHSL明度で等間隔になります。新しい明度が分かったあと、同じCSSの色相からRGBへの経路がHSLを整数チャンネルと6桁の小文字16進コードへ戻します。
中間明度の青に5ステップを掛けると、黒、深い紺、元に近い中間トーン、淡い空、白が得られ、いずれも元の色相と彩度を保ちます。乱数シードも時計のタイムスタンプもネットワーク呼び出しもないため、同じ入力は常に同じ順序のパレットを返します。4桁または8桁のアルファ付き16進は、この契約が不透明RGBのみであるため拒否されます。
非整数のステップや2から21の外の値は検証に失敗し、クライアントが許可範囲を黙って超えないようにします。
送るものと返ってくるもの
color は16進文字列、steps は2以上21以下の整数です。各パレットスウォッチには index、hex、整数 r g b、色相・彩度・明度の数値、印刷可能な rgb と hsl の文字列が含まれます。元の色は常に base として返されるため、クライアントはランプの横に種を表示できます。
その種が swatches 内に現れるのは、明度がちょうど偶数の停留点に落ちるときだけです。例は明度50で5ステップです。典型的な確認は、#3366cc で5ステップ、短い赤 #f00 で3ステップ、非16進文字列が検証に失敗することです。
デザインレビューや素早いランプには無料のブラウザフォームを配線し、トークンスケールの一括生成が必要なときはスクリプトから同一の契約を呼び出してください。黙った切り詰めに頼らず、steps を文書化された範囲に保ってください。このツールは大きく失敗するため、デザインシステムは予測可能です。
ピクセル安定のフィクスチャが必要なときはスタイルガイドの6桁エクスポートを優先してください。3桁の短縮形は受け入れられ、変換前に展開されます。
実務で単色パレットが現れる場面
プロダクトデザイナーは一色相のUIランプを作り、1つのブランドプライマリがテキスト、面、チップ、無効状態を覆い、アイデンティティと争う第二の色相を入れないようにします。アクセシビリティ担当はテキスト色やアイコン色の同伴色を明度のはしごに沿って探り、目分量で中間トーンを当てるのではなく、候補をコントラストチェッカーへ渡します。
マーケティングチームは飽和したロゴからキャンペーン用のパステルと深いアクセントを作り、ソーシャルバナーやメールヘッダーでもブランドの色相アイデンティティを守ります。フロントエンド技術者は継続的インテグレーションで単色ランプをスクリプト化し、1つのブランド色がチャート、バッジ、セカンダリボタン向けの文書化されたはしごを生むようにします。
色彩調和を教える教材の著者は、単色スキームが補色・類似色・トライアド・テトラッドの回転も含む古典的一族のうち一色相の一員であること、他のランディングは色相を回し、このページは明度だけを歩くことを示せます。
あとで補色の反対、類似色の隣対、120度のトライアド、単一の明るくするステップが必要になったら、この単色ページに過負荷をかけず、別の検索意図とランディングとして扱ってください。tomato のような名前付きCSS色は範囲外です。まず16進へ解決してください。
活用例
一色相のUI面と状態
色相と彩度を安定させたまま、プライマリカラーから深い面、中間の塗り、淡い背景を導きます。
色相を外さないブランドキャンペーン
飽和したロゴ色から、バナー・スライド・ソーシャル用のキャンペーン向けに明るいスウォッチと暗いスウォッチを作ります。
よくある質問
この単色パレットジェネレーターはN色をどう組み立てますか？
16進をHSLへ変換し、色相と彩度を固定したまま、i が 0 から N − 1 までの L_i = i × 100 / (N − 1) に明度を置き、各ステップを16進とRGBへ戻します。最初のスウォッチは黒、最後は白です。
パラメータ steps は何を意味しますか？
Steps はパレットスウォッチの総数（整数 2–21）であり、ベースの両側の個数ではありません。5ステップは明度 0、25、50、75、100 パーセントの5色を作ります。
パレットに元のベースカラーは含まれますか？
元の色は解析済みRGBを保ったまま、常に base スウォッチとして返されます。
どの16進形式が受け付けられますか？
先頭のハッシュの有無を問わず、3桁および6桁のCSS 16進です。
最初と最後の色がいつも黒と白になるのはなぜですか？
明度を0%から100%まで均等に割り振るためです。最初の段階は必ず黒、最後は必ず白になり、その間の色が元の色の色相と彩度を受け継ぎます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/monochromatic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":5}'const res = await fetch("https://api.kit.forhosting.com/color/monochromatic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/monochromatic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/monochromatic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/monochromatic", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#3366cc",
"steps": 5
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.monochromatic",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無効な16進文字列や許可された整数範囲外のステップ数は、黙って切り詰める代わりに invalid_input で失敗します。ネットワークも乱数シードも壁時計もなく、同じ色と同じステップは常に同じJSONを生み出します。
送るものと返ってくるもの
2つのフィールドを送ってください。color はエイリアス hex と base も受け付け、steps は count と n を受け付けます。欠落フィールド、非16進文字、誤った長さ、NaN、Infinity、非整数、閉区間の外の steps は invalid_input で失敗し、課金されません。成功時、応答は正規化された6桁の color と整数 steps を繰り返し、続けて steps に等しい count、ベースの色相と彩度、元のHSLからの lightness_base、解析済み入力RGBを保つ base スウォッチ、最も暗いものから最も明るいものへ並ぶ swatches 配列、便宜用の hexes リスト、短い formula 文字列を提供します。成功したAPI呼び出しの料金は項目ごとに公開基準の $0.002 で、検証失敗は前払い残高を消費しません。
実務で単色パレットが現れる場面
デザイントークンのパイプラインは単一のベース16進からCSS変数やJSONテーマスケールを出し、ライトモードとダークモードの面のために派生スウォッチをすべて保存します。この能力は純粋な parse エンジンなので、API料金は成功項目ごとに公開基準の $0.002 で、検証失敗は残高を消費しません。invalid_input を返す失敗タスクは前払い残高を消費しないため、学習者が不完全なクリップボード値を貼るあいだも、探索的なデザインスクリプトとフォーム検証は安く保てます。
連携の活用例
デザイントークンの単色ランプ
1つのブランド16進から、CSS変数・テーマJSON・複数ブランドのデザインシステム向けに、最も暗いものから最も明るいものまでN停留点のはしごを生成します。
技術的な質問
単色パレットジェネレーターの料金はいくらですか。
ブラウザツールは無料で、端末上で動きます。APIリクエストは成功項目ごとに $0.002 の前払いKIT残高を使い、無効な入力は課金されません。