テトラディック配色生成ツール

成功したレスポンスは常に、正規化された入力HEX、HEX・RGB・HSLを含む4つの詳細なスウォッチ、そしてデザイントークンやCSS変数向けのフラットなhexes配列とhues配列を返します。デザインシステム、テーマ生成ツール、自動化されたスタイルパイプラインで再現性のあるテトラディックの固定値が必要な場合は、成功したリクエストごとに$0.002でAPIを呼び出すこともできます。

テトラディック(矩形)配色の意味とレスポンスに含まれる内容

レスポンスには、正規化された6桁形式のinput_hex、最初のスウォッチを表すbaseオブジェクト、それぞれhex・r・g・b・h・s・l・hue_offset・rgb・hsl文字列を持つ4つのオブジェクトからなるcolors配列、便利なhexes配列とhues配列、offsetsのリスト、tetradicに設定されたscheme、methodのhue_rotate_rectangle、そして簡潔な公式の再掲が含まれます。エンジンは、有効なHEXから4つの厳密なスウォッチを構築するか、そうでなければinvalid_inputでリクエストを拒否します。このページが答えるのは、デザイントークンや単体テスト、色を勝手に作り出してはならないAPI利用者に適した安定した数値出力を持つ、矩形のテトラディック展開のみです。

HEX入力の読み取り方と4色相の再現性について

値は先頭のハッシュを含んでいても省略していても構わず、f00のような短縮3桁形式を使うこともでき、その場合は変換前に桁ごとにff0000へ展開されます。解析後、チャンネルは標準的なsRGBの公式でHSLに変換されます。色相は0から360度の円周上の度数で表され、彩度と明度は4つのステップを通して決して変化しない単位小数のままです。各オフセットは正の剰余で適用されるため、負の中間値が漏れ出すことはなく、その後HSLはチャンネルのクランプと各チャンネル2桁の小文字16進数字を伴って整数RGBに戻されます。優先的に使用するフィールドはhexですが、エイリアスとしてcolor、base、inputも受け付けるため、フォームやクエリ文字列、デザインツールのエクスポートでも列名を変更せずに同じ契約を再利用できます。h・s・lのような任意の浮動小数点フィールドは、異なるJavaScriptエンジン間でJSON比較がずれないよう、固定の小数桁数に丸められます。自動化パイプライン、テーマパッケージの公開ステップ、あるいはデプロイのたびに色相がひそかに変わってはならないマルチテナントのホワイトラベル設定ツールで同一のパレットが必要な場合は、このページの無料ブラウザ実行と有料APIを組み合わせてご利用ください。

製品・ブランド・UI作業におけるテトラディックパレットの位置づけ

エンジニアは、CSSカスタムプロパティ、Tailwindのテーママップ、デザイントークンJSON、Storybookの固定値を用意するためにスクリプトから同じ契約を呼び出し、どの環境でも同じ4つのスウォッチを共有できるようにします。API経由の場合、成功した照会1件ごとに$0.002かかり、検証に失敗した場合は課金されず、レスポンスを返した後は何も保存されません。この無料の対話的な探索と、同一結果の有料APIという分離は、KITのtier-Aカタログの他の部分と一致しており、Figmaでの探索から数学的な結果を変えることなく本番のテーマファイルへ移行できます。