16進カラーから三配色カラーパレットを生成します
#336699を入力すると、色相環で120度と240度回転させた2つのトライアド色#993366と#669933が得られます。彩度と明度は変わらないので、3色がひとつの家族のようにまとまります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #336699
- 基本色
- #336699
- トライアド配色
- #993366, #669933
- パレット
- #336699, #993366, #669933
- 色相のオフセット
- 120, 240
この三配色パレット生成ツールは、1つの16進カラーを基準に、色相環上で正確に120度と240度離れた2色を計算します。元の色の彩度と明度を保つため、無作為な選択や手計算をせずに、均衡の取れた3色の組み合わせを作成できます。先頭の#がある3桁または6桁の標準的な16進値を入力してください。#は省略することもできます。結果には、正規化された基準色、生成された2つの配色、完全なパレット、色相の移動角度が含まれます。不正な形式には明確な入力エラーが返されるため、対話的なデザイン作業にも自動処理にも適しています。
三配色パレットの生成方法
三配色パレットは、円形のカラーモデル上に均等に配置された3つの色相で構成されます。色相環に正三角形の頂点を置くと考えると、各頂点の間隔は120度です。最初に、入力された16進カラーを検証して正規化します。
3桁表記は6桁に展開されるため、#369は#336699になります。また、結果を一定にするため英字は小文字に統一されます。次に、赤、緑、青の各チャンネルを色相、彩度、明度へ変換します。
回転させるのは色相だけです。一方の配色には120度、もう一方には240度を加え、360度を超えた角度は正しく循環させます。彩度と明度は変えないため、全体的な鮮やかさと明るさが維持されます。
最後に、2つのHSLカラーを6桁の16進表記へ戻します。応答では、計算された2色と完全な3色パレットを区別して返します。乱数、ネットワーク、現在日時、保存済み状態は使用しないため、同じ入力からは常に同じ結果が得られます。
生成した色の選び方と使い方
ブランドの主色、イラストの基調色、画面のアクセントなど、すでに役割が決まっている色を基準にしてください。3色は数学的に均等ですが、画面や紙面で同じ面積を占める必要はありません。一般的には基準色を中心にし、1色を補助要素へ使い、残りの1色を小さな強調箇所に使うと扱いやすくなります。
色相の調和だけでは読みやすさを保証できないため、文字のコントラストは別途確認してください。3色は同じHSL明度を保ちますが、特に黄色と青では見た目の明るさが大きく異なる場合があります。そのため、得られた三配色を出発点として、状態表示や背景面には明るい段階や暗い段階を追加すると効果的です。
開発ではpaletteをそのままデザイントークンへ取り込めます。灰色は彩度が0で回転可能な色相が見えないため、灰色を入力すると生成色も灰色になります。
対応形式、エラー、自動処理
使用できるのは、先頭の#を任意で付けた3桁または6桁の16進値だけです。例として#f06、f06、#ff0066、FF0066が使えます。前後の空白は検証前に除去されます。
CSSの色名、RGB関数、HSL関数、アルファ値を含む4桁や8桁の16進値、0x接頭辞、空文字列、数値、16進数以外の文字は拒否されます。この厳密な規則により、曖昧な解釈を防げます。どちらも同じ決定論的アルゴリズムを使います。
生成後は、最終用途に応じてコントラスト、文化的な意味、ブランド内の優先順位をご確認ください。
活用例
ブランドのアクセント色を作成
確立済みのブランドカラーから、広告、イラスト、補助的な識別要素に使える均衡した2色を生成します。
画面用カラートークンを構築
主色を基に、テーマ作成時のセカンダリーおよびターシャリートークン候補を決定論的に生成します。
グラフ系列の色を準備
ダッシュボード向けの3色パレットを作成し、その後でコントラストと可視化のアクセシビリティを確認します。
よくある質問
三配色カラーパレットとは何ですか?
色相環上で120度ずつ離れ、均等な関係を持つ3つの色相で構成されるパレットです。
どのカラー形式に対応していますか?
先頭の#がある、または#を省略した3桁か6桁の16進表記に対応します。例は#369や336699です。
灰色から灰色が生成されるのはなぜですか?
灰色は彩度が0であるため、数学上の色相を回転させても目に見える色差が生じないからです。
「赤」のような色名で入力できますか?
いいえ。#f06や#ff0066のような3桁または6桁のカラーコードだけを受け付けます。#は付けても付けなくても構いません。色名やRGB・HSLの書き方、透明度付きのコードは、分かりやすい案内とともに受け付けません。
パレットの先頭が自分の色になるのはなぜですか?
整えた元の色を最初に置き、その後に120度と240度の2色が続くからです。#336699なら#336699、#993366、#669933となり、今使っている色はそのまま残せます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/triadic-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#336699"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#336699"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#336699"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#336699"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#336699"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
生成した色の選び方と使い方
既存の基準トークンを変えたくない場合はtriadic_colorsだけを利用できます。
対応形式、エラー、自動処理
基準色はcolorフィールドへJSON文字列として指定してください。成功時はbase_color、triadic_colors、palette、hue_offsetsを返します。基準色は展開して正規化され、triadic_colorsには生成された2色だけが入り、paletteには基準色、120度の色、240度の色が順に入ります。不正な値には推測した配色ではなくinvalid_inputコードを返します。ブラウザーは試行に便利で、APIの正常な1項目は$0.002です。
技術的な質問
結果に基準色も含まれますか。
はい。paletteには正規化した基準色と2つの配色が入り、triadic_colorsには生成した2色だけが入ります。
API呼び出しの料金はいくらですか。
正常に処理された各項目は$0.002です。ブラウザー版では同じ決定論的な計算をローカルで実行します。