ForHosting KIT · 画像の編集・解析

カラーミキサー

#FF0000と#0000FFを50%で混ぜると#800080になり、赤128、緑0、青128の紫になります。手持ちの2色から、ブランドの中間色や状態ごとの色を作れます。ブラウザで無料で使えます。

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

無料で実行 API仕様を見る

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

計算例

入力した場合

1つ目のhex色: #FF0000
2つ目のhex色: #0000FF
比率: 50

結果

T: 0.5
16進: #800080
RGB文字列: rgb(128, 0, 128)

カラーミキサーは2つのhexコードと混合パーセンテージを受け取り、RGBチャネル空間で両者の間に位置する単一の色を返します。デザイナーはブランドの赤と深い青の中間トーンが必要なとき、ハイライトへ三十パーセント寄ったホバー状態を作りたいとき、あるいはデスクトップのグラフィックソフトを開かずに段階的なランプを生成するときに使います。この機能は赤・緑・青をそれぞれ独立に決定的な線形混合します。無効なhexコードは明確な不正入力エラーで失敗するため、パイプラインは悪いスウォッチを出す前に誤字を検出できます。

RGB混合の仕組みと比率の選び方

2つのhex色とゼロから百までの比率を送ってください。内部では各色がゼロから二百五十五の範囲の3チャネルに展開されます。ハッシュ f ゼロゼロのような3桁の短縮形は各ニブルを倍にして6桁に展開されるため、ハッシュ f ゼロゼロとハッシュ FF0000 は同じ純粋な赤です。

先頭のハッシュやゼロ-xの任意プレフィックスは受け付けられ、検証前に取り除かれます。比率は混合におけるcolor2のパーセンテージとして解釈されます。線形RGBはLABやHSLでの知覚的な中点とは異なるため、明度が大きく違う2色は明るい側に偏って見えることがあります。

これは本製品の想定どおりで、多くのデザインスクリプトが既に使う古典的なCSS風チャネル補間と一致します。経路は純算術で、ネットワークも乱数シードも壁時計もありません。

デザイン作業での使い方と注意点

パレットのスケッチ、ブランドティントの実験、中間混合の素早い確認にはデザインツールを入れずにブラウザ内の無料カラーミキサーを呼び出してください。検証失敗は残高を消費しません。次の段階がフルパレットなら hex から HSL や補色ツールと組み合わせ、混合色がテキストに対して WCAG を満たす必要があるならコントラストチェッカーと組み合わせてください。

入力は hex のみ対応で、名前付き CSS 色や rgb 括弧文字列は対象外です。ソースデータが名前を使う場合は上流で正規化してください。ソース入力は他の KIT パース項目と同じ保持ルールに従い、アルゴリズムが完全に決定的なため結果は継続的インテグレーションのフィクスチャに固定しても安全です。

活用例

ブランドパレットの中間トーン

プライマリのブランドhexをセカンダリと25%、50%、75%で混合し、UIテーマとマーケティングキット向けの段階的な中間トークンを生成します。

ホバーと状態の色

ベースのボタン色を白または黒と小さな比率で混合し、各スウォッチを手で選ばずに明るいホバーと暗いアクティブ状態を作ります。

よくある質問

無効なhexコードを送るとどうなりますか？

両色は3桁または6桁の十六進（#は任意）でなければなりません。長さ不正や非hex桁は拒否され課金されません。

混合はHSLやLABで行われますか？

知覚空間は別の製品意図であり、本ツールは古典的なhexチャネル混合に合わせています。

赤と青を50%で混ぜると何色になりますか？

#800080の紫になります。各チャンネルがちょうど中間になり、赤は255から128へ下がり、青は0から128へ上がり、緑は0のままです。

混合の割合は何を表しますか？

2つ目の色をどれだけ混ぜるかを表します。0なら1つ目の色のまま、100なら2つ目の色、50なら各チャンネルの中間になります。

ホバー時の色はどう作りますか？

ボタンの色に白か黒を少しの割合で混ぜます。白なら明るいホバー時の色、黒なら暗い押下時の色になり、1色ずつ手で選ぶ必要がありません。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/mix

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

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

curl -X POST https://api.kit.forhosting.com/color/mix \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color1":"#FF0000","color2":"#0000FF","ratio":50}'

const res = await fetch("https://api.kit.forhosting.com/color/mix", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color1": "#FF0000",
    "color2": "#0000FF",
    "ratio": 50
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/mix",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color1": "#FF0000",
    "color2": "#0000FF",
    "ratio": 50
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/mix", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color1":"#FF0000","color2":"#0000FF","ratio":50}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color1":"#FF0000","color2":"#0000FF","ratio":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/mix", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "color1": "#FF0000",
  "color2": "#0000FF",
  "ratio": 50
}

レスポンス例

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

技術的な注記

比率ゼロでは結果は純粋なcolor1、百では純粋なcolor2、その間の値は各チャネルを補間して0–255の整数ステップに丸めます。

RGB混合の仕組みと比率の選び方

チャネルは color1 に (1−t) を掛け、color2 に t を掛けた和を丸めた値で、t は比率を百で割ったものです。つまり比率ゼロは color1 をそのまま保ち、比率百は color2 を返し、比率五十は各チャネルで線形RGBの中間になります。同一入力は常に同一のJSONを生みます。

応答の読み方：hex、RGB、エコーされた入力

混合結果は3通りで現れます。スタイルトークンやテーマファイル用に単一トークンが必要なときは hex を使い、キャンバスやチャートライブラリ、アクセシビリティチェッカーが分離チャネルを期待するときは rgb を使います。成功時、応答は正規化された color1 と color2 を先頭ハッシュ付き6桁大文字hexとしてエコーし、送った数値の ratio と、lerp で使った単位区間としての t を返します。hex は主たる混合スウォッチ、rgb は整数の r g b フィールドを持つオブジェクト、rgb_string は CSS やデザインメモに貼れる読みやすい rgb 開き括弧 r カンマ g カンマ b 閉じ括弧の行です。color1_rgb と color2_rgb は解析済みの親チャネルを公開し、UI が再解析なしでグラデーションの両端を描けるようにします。method ラベルは常に rgb_lerp なので、下流コードは形状を嗅がずに分岐できます。color1 欠落、color2 欠落、ratio 欠落、ratio がゼロから百の外、無効なhexコードはすべて invalid_input で失敗し、エンジンが拒否したあと課金されません。エラーメッセージはフィールド名を示すため、API クライアントは精密なフォーム検証を表示できます。

API利用、料金、デザインワークフロー、実務上の制限

必須の文字列フィールド color1 と color2、必須の数値 ratio を含む JSON 本体を送ってください。hex1、hex2、a、b、from、to、percent、amount、mix のエイリアスは文書化されている場合に受け付けられ、古いフォームフィールドをきれいに対応付けられます。テーマ生成器、デザインシステムパイプライン、EC スウォッチ構築、マーケティング資産サービスが KIT 残高のもとで成功アイテムごとに $0.002 の安定した契約を必要とするときは前払い API を使います。SDK を出荷する作者は、学生やデザイナーが既に期待するカラーピッカーとトークン表に hex と rgb を直接対応付けられます。

連携の活用例

自動化されたテーマパイプライン

デザインシステムのスクリプトが前払いAPIを呼び出し、2つのシード色をCI実行間でビット同一のJSONトークンに統合します。

技術的な質問

このカラーミキサーで2つのhex色をどう混合しますか？

color1、color2、ratio（0–100）を含むJSONを送ってください。例：color1 "#FF0000"、color2 "#0000FF"、ratio 50 はRGB中間混合をhexとrgbフィールドで返します。

比率のパーセンテージは何を意味しますか？

Ratioは混合におけるcolor2の割合です。0はcolor1を純粋に保ち、100はcolor2を純粋に返し、50は各RGBチャネルの均等な線形混合です。

カラーミキサーは無料ですか？

ブラウザツールはお使いの端末で無料実行されます。API呼び出しは成功アイテムごとに$0.002の前払いKIT残高を使い、検証失敗は課金されません。

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

カラーミキサー

無料で実行

計算例

RGB混合の仕組みと比率の選び方

デザイン作業での使い方と注意点

活用例

ブランドパレットの中間トーン

ホバーと状態の色

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

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

リクエスト例

レスポンス例

料金

エラー

技術的な注記

RGB混合の仕組みと比率の選び方

応答の読み方：hex、RGB、エコーされた入力

API利用、料金、デザインワークフロー、実務上の制限

連携の活用例

自動化されたテーマパイプライン

技術的な質問

ありがとう