ForHosting KIT · 開発者向けツール

3次ベジェ色補間

3次ベジェ色補間は、指定した時間比率をタイミング曲線で変換し、2つの16進色の間で到達する正確な色を計算します。開始色と終了色、ゼロから1までの比率、CSSのcubic-bezierイージングで使う4つの制御座標を指定してください。結果には、イージング後の比率、正規化した色、16進値、RGB各チャンネルが含まれます。ブラウザーのアニメーション時計に依存せず、デザインツール、アニメーション処理、テスト、生成アセットで同じ遷移色を再現できます。

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

無料で実行 API仕様を見る

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

時間の進行と見た目の色の進行を分けます

線形ブレンドでは、経過時間が50パーセントなら、2色間の距離も50パーセント進んだものとして扱います。しかし実際のインターフェースでは、ゆっくり始まり、中盤で加速し、終点の近くで穏やかに収束するなど、別のリズムが必要です。この機能は、RGBチャンネルを混合する前に3次ベジェのタイミング曲線を適用します。入力のtは時間軸上の比率を表し、eased_tは曲線によって得られた色の比率を表します。この区別により、結果を確認して再利用しやすくなります。時間がゼロなら開始色、1なら終了色を返します。その間では、各チャンネルが進む速度を曲線が決めます。明示的な数値だけを使い、時計を参照しないため、同じ入力を繰り返すと必ず同じ出力になります。レンダラー、デザイン書き出し、テストスイート、ビルド処理で、アニメーションを実行したり特定時点のブラウザー表示を推測したりせず、同じ遷移フレームを得たい場合に役立ちます。

3次ベジェの比率を求める仕組み

CSS形式の3次ベジェ曲線はゼロから始まり1で終わり、呼び出し側が指定する2つの制御点を持ちます。要求した時間比率は曲線のx軸に属するため、同じ数値をそのままy多項式へ入れる方法は、多くの曲線で正しくありません。まず、x座標が要求比率と一致する内部パラメーターを求めます。傾きが適切な場合は回数を制限したニュートン法を使い、安定した代替手段として固定回数の二分探索も使います。次に、得られたパラメーターでy座標を評価します。xの制御座標はゼロから1までに限定されるため、時間の単調性と解の一意性が保たれます。yはマイナス10から10まで指定でき、予備動作やオーバーシュートを表現できます。イージング値が通常範囲を外れた場合、補間後のRGBチャンネルを有効なバイト範囲に収めます。表示する小数は一貫して丸め、チャンネル値は最も近い整数に丸めます。これらの規則により、ブラウザーエンジン、フレームレート、環境固有のアニメーションサンプリングに左右されません。

入力を選び、返された色を利用します

各色は3桁または6桁の16進数で入力し、先頭のハッシュ記号は省略できます。短縮色は展開され、受理した色はすべて小文字6桁に正規化して返します。tにはゼロから1までを指定し、続いてx1、y1、x2、y2を一般的なcubic-bezierの順序で指定してください。たとえば標準的なease-in-outは0.42、0、0.58、1です。応答には正規化した両端の色と曲線が保持され、計算したイージング後の比率、16進色、赤・緑・青の各チャンネルが含まれます。16進値はCSS、SVG、デザイントークン、画像指示に利用し、構造化した数値が必要な場合はチャンネルオブジェクトをご利用ください。連続フレームを作る場合は、両端と制御値を固定し、時間比率だけを等間隔に変えて呼び出します。検証では、不正な色、有限でない数、時間範囲外の比率、単調でないx制御値、過大なy制御値を拒否するため、無効な設定から誤解を招く遷移サンプルが暗黙に生成されることはありません。

活用例

決定論的なアニメーションフレームを生成

実時間の時計に依存せず、レンダラーやアセット処理向けに、正確な比率でイージング済みの色遷移を取得できます。

画面遷移の色をテスト

仕様化された3次ベジェ曲線を使うビジュアルテストやコンポーネントテストで、期待する中間16進色を計算できます。

滑らかなデザイントークン尺度を作成

画面アニメーションと同じ加速・収束のリズムで間隔を設けたカラートークン列を作成できます。

よくある質問

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

APIリクエスト1回あたり$0.002です。ブラウザー版は計算内容をAPIへ送らず、ローカルで実行できます。

線形の色混合と同じですか？

いいえ。線形混合は指定比率をそのまま使いますが、この処理では先に3次ベジェ曲線で比率を変換します。

x1とx2をゼロから1に限定する理由は何ですか？

時間の進行を単調に保ち、CSSタイミング関数の規則に合わせ、xを一意に逆算できるようにするためです。

イージング曲線でオーバーシュートできますか？

はい。y1とy2はゼロから1の外側にも設定できます。イージング後の比率には超過値を示し、RGBチャンネルは有効範囲に収めます。

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

先頭のハッシュ記号の有無を問わず、3桁または6桁の16進RGB色に対応します。アルファチャンネルと色名には対応しません。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/bezier-interpolate

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

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

curl -X POST https://api.kit.forhosting.com/color/bezier-interpolate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}'

const res = await fetch("https://api.kit.forhosting.com/color/bezier-interpolate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color1": "#ff6600",
    "color2": "#3366ff",
    "t": 0.5,
    "x1": 0.42,
    "y1": 0,
    "x2": 0.58,
    "y2": 1
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/bezier-interpolate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color1": "#ff6600",
    "color2": "#3366ff",
    "t": 0.5,
    "x1": 0.42,
    "y1": 0,
    "x2": 0.58,
    "y2": 1
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/bezier-interpolate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color1":"#ff6600","color2":"#3366ff","t":0.5,"x1":0.42,"y1":0,"x2":0.58,"y2":1}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/bezier-interpolate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "color1": "#ff6600",
  "color2": "#3366ff",
  "t": 0.5,
  "x1": 0.42,
  "y1": 0,
  "x2": 0.58,
  "y2": 1
}

レスポンス例

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