ForHosting KIT · 開発者向けツール

Material Designカラーパレット生成

16進数の色を、インターフェース、デザイントークン、試作、資料作成に使えるMaterial Designの完全な色調スケールへ変換します。入力色は500としてそのまま保持し、50〜400の明るい段階と600〜900の暗い段階を算出します。結果はすべて大文字の#RRGGBB形式で返されるため、CSS、テーマファイル、トークン処理へすぐにコピーできます。計算は即時かつ再現可能で、ネットワークサービスや主観的な色選びには依存しません。

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

無料で実行 API仕様を見る

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

信頼できる基本色から始めます

#3F51B5のように、先頭にハッシュ記号を付けた6桁の16進数色を入力してください。この値が生成スケールの視覚的な基準である500になります。厳密な入力形式により、省略表記、アルファチャンネル付き表記、ハッシュ記号のない表記を混同しません。基本色を決める前に、最も多く使う場所をご検討ください。ボタンに使うブランドのアクセント色では明暗どちらの背景でも十分なコントラストが必要な場合があり、グラフの装飾色では隣接する系列との識別が重要です。本ツールはコントラスト目標のために基準色を密かに変更しません。500を入力どおりに保つため、選択した色とパレットの関係を追跡できます。小さい番号ほど段階的に明るく、大きい番号ほど暗くなります。出力は大文字6桁に統一され、CSSカスタムプロパティ、JSONトークン、コンポーネントテーマ、資料へ追加の正規化なしで利用できます。無効な文字列を推測したり部分的に解析したりせず、明確に拒否します。

色調スケールの計算方法をご確認ください

パレットにはMaterialで一般的な50、100、200、300、400、500、600、700、800、900を使用します。500は送信された基本色と完全に一致します。明るい側では赤、緑、青の各チャンネルを固定比率で白へ混合し、50を最も強く明るくします。暗い側では同じチャンネルを黒へ混合し、900を最も強く暗くします。各チャンネルは最も近い整数へ丸め、再び16進数として表現します。固定RGB補間によって処理は透明かつ決定的になり、同じ入力からは常に同じ順序で同じ10個の値が得られます。また、ディスプレイプロファイル、ブラウザーの色管理、ネットワークAPI、デザインソフトの変更される初期設定への隠れた依存もありません。この結果は実用的なMaterial風の色調ファミリーですが、各間隔の知覚的な明るさが等しいことを保証するものではありません。人の視覚反応は色相によって異なるため、厳密な知覚要件がある場合は安定した出発点として利用し、実際の利用環境でご確認ください。

アクセシビリティを保って適用します

色調番号をアプリケーション全体へ直接散在させず、返された値を意味のあるトークンへ割り当ててください。例えばテーマでは、操作可能な背景、ホバー状態、選択済みの面にそれぞれ異なる色調を指定できます。この対応を単一のトークン層で管理すれば、各コンポーネントを編集せずに視覚体系を調整できます。前景色と背景色の組み合わせは、実際に公開する文字サイズと太さで必ず検証してください。色調番号だけでは特定のコントラスト比は保証されず、同じ番号でも基本色によってアクセシビリティの結果は大きく異なります。フォーカス表示、無効なコントロール、データ可視化、ダークモード、高コントラスト設定も個別に確認します。生成パレットは一貫した候補をすばやく用意できるため検討に役立ちますが、最終決定では文脈と意味も考慮してください。エラーや状態を色だけで伝えないでください。デザインと開発で共有する際は、元の基本色と生成値を併記し、後の変更を再現できるようにします。

活用例

UIトークンを作成

承認済みのブランド色を、コンポーネントの状態や面に使える予測可能な10段階へ変換します。

Materialテーマを試作

基本、ホバー、選択状態へ割り当てる前に、コピー可能な16進数の色調を生成します。

開発への引き渡しを標準化

曖昧な名前の色見本ではなく、再現可能でJSONに適したパレットを共有します。

よくある質問

どの入力形式に対応していますか？

ハッシュ記号の後に16進数6桁を続けた形式だけを使用してください。例は#3F51B5です。3桁の省略形、アルファチャンネル、ハッシュ記号なしの値は拒否されます。

元の色はどの色調ですか？

500が元の色を大文字に正規化した値です。生成時に変更されることはありません。

明暗の色調はどのように計算しますか？

RGBチャンネルを固定比率で混合し、50〜400では白へ、600〜900では黒へ近づけます。

生成色はアクセシブルなコントラストを保証しますか？

保証しません。前景色、背景色、文字の大きさと太さに左右されるため、利用予定の各組み合わせを検証してください。

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

APIリクエスト1回につき$0.002です。ブラウザー版でも同じ決定的な計算をローカルで実行します。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/material-palette-generate

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

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

curl -X POST https://api.kit.forhosting.com/color/material-palette-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base_color":"#3F51B5"}'

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

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/material-palette-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "base_color": "#3F51B5"
},
)
task_id = res.json()["task_id"]

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

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

リクエスト例

{
  "base_color": "#3F51B5"
}

レスポンス例

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