カラートン生成
ひとつのブランドカラーから暗い色から明るい色までの段階を作ります。#3366ccを3段階にすると、#000000から#224488、元の色を経て#bbccee、#ffffffまでの7色になります。変わるのは輝度だけです。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- カラー（hex）
- #3366cc
- 数量
- 7
- 基準明度
- 50
カラートン生成は、CSSのhex基準色とステップ数を受け取り、HSL空間の明度チャネルだけを動かして、より暗いシェードとより明るいティントの完全な階調を返します。色相と彩度は固定のため、ブランドの青は青のまま、ブランドの赤は赤のまま、面はほぼ黒から基準色を経てほぼ白まで滑らかに進みます。ステップ数は基準色の両側の段数です。3ステップなら、より暗いシェード3つ、元の色、より明るいティント3つで、計7枚のスウォッチが暗い順に並びます。無効なhex文字列や許容整数範囲外のステップ数は、静かに丸めず明確な検証エラーで拒否します。
ティントとシェードが明度を段階化する仕組み
hash 三 三 六 六 c c のようなCSS hex、または短い形 hash 三 六 c から始めます。パーサは3桁コードを展開し、桁を小文字化し、各対を赤・緑・青の0から255までの整数に変換します。これらのチャネルは標準のCSSおよびW3Cの式で色相・彩度・明度に写像されます。
明度はチャネル割合の最大と最小の平均、彩度はその明度に依存し、色相は色相環上の度数で測られ、無彩色の灰色は色相0を報告します。シェードはRGBで黒に向かって混ぜるのではなく、色相と彩度を固定したまま明度の百分率だけを下げます。
ステップ指数kを1から選んだステップ数までとし、各シェードの明度は基準明度に（1−k/steps）を掛けた値になり、最も遠いシェードは明度0の純黒、最も近いシェードは基準のすぐ下に位置します。ティントは同様に明度を白へ上げます。明度は基準明度に、100までの残り距離をk/stepsでスケールした値を加えたものになり、最も遠いティントは純白です。
新しい明度が決まると、同じCSSの色相からRGBへの経路でHSLを整数チャネルと6桁小文字hexに戻します。乱数シードも壁時計タイムスタンプもネットワーク呼び出しもないため、同じ入力は常に同じ順序の階調を生みます。4桁または8桁のアルファ付きhexは、この契約が不透明RGBのみのため拒否されます。
非整数のステップや1から20の外の値は検証に失敗し、クライアントが許容範囲を静かに超えないようにします。
送信内容と返却内容
colorはhex文字列、stepsは1から20までの整数です。各スウォッチにはrole、index、step、hex、整数のr g b、色相・彩度・明度の数値、印刷可能なrgbとhsl文字列が含まれます。roleはより暗い段がshade、元色がbase、より明るい段がtintです。
stepはシェードで負、基準で0、ティントで正となり、クライアントは明度を再導出せずに並べ替えや絞り込みができます。短いformula文字列がLの段階化規則をドキュメントとサポート向けに記録します。典型的な確認は、hash 三 三 六 六 c c に3ステップ、純赤に5ステップ、無効hexが検証に失敗することです。
デザインレビューと素早いランプには無料のブラウザフォームを使い、トークン階調の大量生成が必要なときはスクリプトから同一契約を呼び出します。静かなクランプに頼らずstepsを文書化された範囲に保ってください。このツールは明確に失敗し、デザインシステムを予測可能に保ちます。
シェード階調が実務で現れる場面
プロダクトデザイナーは、色相をずらさず1つのブランドプライマリからより暗いactive状態とより明るいhover背景を生成し、ネイビーCTAの階調を押下から柔らかい面までネイビーのまま保ちます。アクセシビリティ担当はテキスト色やアイコン色の相棒を明度の階調に沿って探り、中間色を目測せず候補をコントラスト検査に渡します。
マーケティングチームは飽和したロゴからキャンペーン用パステルと深いアクセントを作り、ブランドの色相アイデンティティを保ったままSNSバナーやメールヘッダに使います。フロントエンド技術者は継続的インテグレーションでシェードランプをスクリプト化し、1つのブランド色からチャート、チップ、バッジ、副ボタン用の文書化された階調を得ます。
後で単一の明度上げ、HSLからRGBへの変換、類似パレット構築、WCAGコントラスト確認が必要なら、このシェードページに詰め込まず、別の検索意図とランディングとして扱ってください。
活用例
UIのホバーと押下状態
プライマリ色からより暗い押下シェードとより明るいホバーティントを導出し、色相と彩度を安定させます。
マーケ向けパステルと深いアクセント
飽和したロゴ色から、バナー・スライド・SNSクリエイティブ向けのキャンペーン用の明るい・暗いスウォッチを作ります。
よくある質問
このカラートン生成はどのように階調を組み立てますか？
hexをHSLに変換し、シェードでは明度を黒方向へ（L = L×(1−k/steps)）、ティントでは白方向へ（L = L+(100−L)×(k/steps)）段階化し、色相と彩度を固定したまま各段をhexとRGBに戻します。
stepsパラメータの意味は何ですか？
stepsは基準色の両側の明度ステップ数（整数1–20）です。スウォッチ総数は基準を含め2×steps+1で、最も暗いものから最も明るいものへ並びます。
シェードとティントの違いは何ですか？
シェードはHSL明度を黒方向へ下げ、ティントは明度を白方向へ上げます。どちらも元の色相と彩度を保ち、ブランドの一貫性を安定させます。
どのhex形式が受け付けられますか？
3桁および6桁のCSS hexで、先頭ハッシュの有無は問いません。
いちばん端の色が純粋な黒と白になるのはなぜですか？
最も暗いシェードは輝度0、最も明るいティントは輝度100になるよう計算するためです。その間の段階は均等に並び、元の色の色相と彩度は変わりません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/shades \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":3}'const res = await fetch("https://api.kit.forhosting.com/color/shades", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 3
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/shades",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 3
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/shades", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":3}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":3}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/shades", 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": 3
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.shades",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無料のブラウザツールと有料APIは同じ純粋な同型関数を共有するため、デザインシステムと自動化は常に同一の階調に一致します。ネットワーク呼び出しも乱数シードもモデルドリフトもなく、同じ色とステップは常に同じJSONを生成します。
送信内容と返却内容
2つのフィールドを送ります。colorはhexおよびbaseの別名も受け付け、stepsはcountおよびnも受け付けます。欠落フィールド、非hex文字、誤った長さ、NaN、Infinity、非整数、閉区間外のstepsはinvalid_inputで失敗し、課金されません。成功時は正規化された6桁のcolorと整数stepsをエコーし、続けてstepsの2倍に1を加えたcount、元のHSL由来のlightness_base、baseスウォッチ、shadesとtintsの別配列、最も暗いものから最も明るいものへ並んだ完全なswatches配列、利便用のhexes一覧を返します。成功したAPI呼び出しの料金は公開ベースの$0.002/件で、検証失敗は前払い残高を消費しません。
シェード階調が実務で現れる場面
デザイントークンのパイプラインは単一の基準hexからCSS変数やJSONテーマ階調を出し、明モードと暗モードの面のために導出スウォッチをすべて保存します。この能力は純粋なparseエンジンのため、API料金は成功1件あたり公開ベースの$0.002で、検証失敗は残高を消費しません。
連携の活用例
デザイントークンのシェードランプ
1つのブランドhexから最も暗いものから最も明るいものまでの完全な階調を、CSS変数・テーマJSON・マルチブランドのデザインシステム向けに生成します。
技術的な質問
料金はいくらですか？
ブラウザツールは無料でローカル実行です。APIリクエストは前払いKIT残高を成功1件あたり$0.002で使用し、無効な入力は課金されません。