ForHosting KIT · 画像の編集・解析

色のティント生成

Q: 生成色はアクセシビリティのコントラスト要件を満たしますか？

保証されません。 コントラストは前景、サイズ、太さ、適用基準に左右されるため、各ティントを実際の利用環境でご確認ください。

#3366ccと4ステップを指定すると、白を25、50、75、100％混ぜた#668cd9、#99b3e6、#ccd9f2、#ffffffが得られます。ステップは1〜20で選べ、同じ入力なら必ず同じパレットになります。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

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

計算例

入力した場合

色: #3366cc

結果

数量: 4
16進カラーコード: #668cd9, #99b3e6, #ccd9f2, #ffffff

中間値を推測したり、スライダーを目視で調整したりせず、1つのベースカラーから信頼できるティントパレットを生成できます。指定された16進カラーを白へ向けて等しい割合で混合し、各ティントの正確なHEX値とRGB値を返します。計算は決定的であるため、同じ色とステップ数からは常に同じパレットが得られます。元の色から白まで明確に変化する、インターフェースの状態、背景、グラフ、イラスト、デザイントークンの作成にご利用いただけます。

ベースカラーと適切なステップ数を指定します

まず、#36cや#3366ccのような3桁または6桁の16進ベースカラーを指定してください。短縮形は計算前に展開されるため、この2つの例はまったく同じ色を表し、同一の結果になります。次に、1から20までのステップ数を選択します。

この数は生成されるティントの個数であり、元のベースカラーは含まず、最後の結果となる純白は含みます。したがって4ステップでは、ベースカラーに白を25%、50%、75%、100%の割合で混合します。少ないステップ数はコンパクトな画面階層に適し、多いステップ数はデータ可視化、イラスト、トークン検討でより細かな候補を提供します。

結果では、正規化されたベースと生成された各ティントが別々に示されるため、入力値と計算値を明確に区別できます。変化は必ず白で終わるので、隣接するスウォッチ間の混合率は等しくなります。ただし、見た目の差はベースカラーやディスプレイによって異なる場合があります。

決定的な混合式の仕組みを確認します

赤、緑、青の各チャンネルは、白のチャンネル値である255へ個別に混合されます。nステップのパレットにおけるk番目のティントでは、base + (255 − base) × k/nを計算し、各チャンネルを最も近い整数へ丸めます。3つのチャンネルへ同じ比率を適用することで、元の色との関係を保ちながら白までの距離を段階的に縮めます。

応答には、1から始まるインデックス、正確な白の混合率、小文字に正規化されたHEX、個別のチャンネル値、RGB文字列が含まれます。これは直接的なsRGB補間です。HSLの明度変更、ガンマ補正による光学的混合、知覚的な均等化は行いません。

複数の混色空間を提供するグラフィックソフトウェアと結果を比較する際には、この違いが重要です。計算式は意図的に単純で、明記され、安定しています。そのため、ビルドスクリプト、スナップショット、自動トークン生成、主観的な見た目の調整より再現性を重視するシステムに適しています。

デザインシステムで安全に活用します

生成値は一貫した初期スケールとして扱い、実際の使用環境で必ず確認してください。明るいティントは、選択行、通知の背景、控えめな境界線、グラフの塗り、ホバー面、装飾領域に役立ちます。しかし、数学的に規則的なパレットであっても、アクセシブルなコントラストが自動的に保証されるわけではありません。

選択した各ティント上の文字やアイコンについて、製品に適用されるコントラスト要件を確認してください。ベースカラーは別のトークンとして保存し、配列位置だけに頼らず、brand-tint-25やinfo-backgroundのように役割または混合率で生成値を命名することをお勧めします。割合を用いた名前は、別のパレットでステップ数が変わっても意味を保ちます。

自動処理では返されたHEX値をそのまま保存し、入力色とステップ数も併記するとパレットを再現できます。無効な色、アルファ付き16進形式、小数のステップ数、対応範囲外の値は補正せず拒否されるため、意図しないトークン変更を見逃しにくくなります。

活用例

画面サーフェス用トークンを作成

確立されたブランドカラーやセマンティックカラーから、再現可能な明るい背景、境界線、選択状態を作成できます。

グラフ用の色バリエーションを準備

系列の主色との視覚的な関係を維持した、予測可能な明るい塗り色を生成できます。

パレット資料を自動生成

デザインシステムのページ、コード生成、テスト、引き渡しファイル向けに安定したHEX値とRGB値を作成できます。

よくある質問

パレットにベースカラーは含まれますか？

応答では正規化されたベースを別に示します。ティント配列には段階的に明るくなる混合色のみが入り、最後は白になります。

最後のティントが必ず白になるのはなぜですか？

ベースカラーから白を100%混合した状態までの全範囲を、等しい間隔で分割するためです。

どのカラーフォーマットに対応していますか？

先頭のハッシュ記号の有無を問わず、3桁または6桁の16進数を指定できます。アルファチャンネルやその他のCSSカラー構文には対応していません。

生成色はアクセシビリティのコントラスト要件を満たしますか？

保証されません。コントラストは前景、サイズ、太さ、適用基準に左右されるため、各ティントを実際の利用環境でご確認ください。

ステップ数はいくつまで指定できますか？

1から20まで指定できます。この数はベースカラーを除いた生成色の数で、4ステップなら白を25、50、75、100％混ぜた4色になります。

開発者向け — APIアクセス

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

エンドポイント

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

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

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

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

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

import os, requests

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

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

body := bytes.NewBufferString(`{"color":"#3366cc","steps":4}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tints-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",
  "steps": 4
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.tints_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`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な質問

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

APIリクエスト1回につき$0.002です。出力には指定されたティントパレット全体が含まれます。

KITの完全なドキュメントを見る →