類似色ジェネレーター
基準色と角度を入力すると、色相環で両隣にある2色が分かります。#3366ccを30度ずらすと#33b2ccと#4c33ccになり、彩度と明度は変わりません。画面デザインやブランドに使える3色のまとまりです。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- カラー
- #3366cc
- 角度
- 30
- パレット
- #33b2cc, #3366cc, #4c33cc
類似色は色相環上で互いに隣り合っているため、同系の色相を共有し、インターフェース、ブランディングシステム、イラストで自然に調和して感じられます。このジェネレーターは、ベースとなるCSSの16進カラーと正の色相シフト角度（度）を受け取り、ベースをHSLに変換し、彩度と明度を固定したままその角度を引いたり足したりして2つの隣接色を作ります。結果は3色のスウォッチパレット（minus、base、plus）で、16進、RGB整数、HSL成分、すぐに使える palette 配列として返されます。古典的なデザインでは、緊密なファミリーには30度を、補色のコントラストに飛ばずにもっと分離させたい場合はより大きなステップを使います。無効な16進コードや範囲外の角度は、パレットをでっち上げる代わりに明確な検証エラーで失敗します。
類似色の色相シフトの仕組み
#3366cc や短縮形 #36c のようなCSSの16進文字列で書かれたベースカラーから始めます。ソルバーは3桁の16進を展開し、0〜255の範囲で赤・緑・青チャンネルを解析し、標準のCSSおよびW3Cの式を使ってそのRGB三つ組をHSLに変換します。色相は0〜360の円上の度数で、彩度と明度は%になります。
angle パラメータは0より厳密に大きく180以下の正の度数です。2つの類似色は、色相をベース色相 − 角度、ベース色相 + 角度に移動して作られ、移動が色相環の赤の端を越える場合は0をまたいでラップし、彩度と明度はそのままにするため、ファミリーは同じ彩度・明度帯に留まります。
得られた各HSL三つ組は、ブラウザのカラーモジュールが使うのと同じ hue-to-rgb 経路で整数RGBに戻され、小文字の16進、rgb() 文字列、hsl() 文字列として整形されます。
送信するものと返ってくるもの
有効なカラー形式は、先頭のハッシュを省略可能な3桁または6桁の16進数字で、大文字小文字は無視され、出力は常に6桁小文字のハッシュ付きに正規化されます。angle は0より大きく180以下でなければなりません。これにより2つの隣接色が区別可能に保たれ、補色風の180度反転（それは別の調和意図になります）に潰れません。
典型的なチェックには、30度の角度で古典的な寒色ファミリーを作る中間の青 #3366cc、30度で暖かいオレンジとマゼンタの隣接色を得る純粋な赤 #ff0000、展開を確認する3桁短縮16進があります。
デザインレビューやムードボードには無料のブラウザフォームを使い、ブランドバリアントの一括生成やテーマトークンの回帰フィクスチャが必要な場合はスクリプトから同一の契約を呼び出してください。
類似色パレットが実務で登場する場面
プロダクトデザイナーは、補色ペアの高い緊張なしに関連する色相が必要なコンポーネント状態、チャート系列、マーケティングのヒーローグラデーションを構築します。固定角度によりトークンはデザインシステム間で再現可能になります。
ブランドチームは、スタイルガイドが公式スウォッチを1つしか提供しない場合でも、プライマリ16進からセカンダリ・ターシャリのブランドカラーを導出し、イラストやソーシャルテンプレート用の管理されたファミリーを得ます。
フロントエンドエンジニアは1つのシードカラーからCSSカスタムプロパティやTailwind風のトークンマップを生成し、ライトテーマとダークテーマが同じ色相の背骨に沿い、他では明度だけが変わるようにします。データ可視化の著者は、補色の衝突がグループ化ではなく対立を暗示してしまうカテゴリチャートで、識別可能でありながらまとまりのある系列色を割り当てます。
カリキュラムやワークショップの講師はライブ例で色彩理論を教えます。学生は好きな16進を入力し、30度・45度・60度を試して、ファミリーが色相環をどれだけ歩くかをすぐに確認します。
後で補色やトライアドのスキーム、HSL→RGB変換のみ、最も近いCSS色名の検索、WCAGコントラストチェックが必要になった場合は、この類似色ジェネレーターページに過負荷をかけず、別の検索意図とランディングとして扱ってください。
活用例
ブランドのセカンダリ・ターシャリトークン
プライマリ16進と固定角度から2つの隣接ブランド色相を導出し、スタイルガイドとデザインシステムをマーケティングとプロダクトUI間で一貫させます。
UIテーマとチャート系列のパレット
1つのシードから、補色ペアの高コントラストな緊張なしに、まとまりのあるCSS変数やチャート系列色を生成します。
色彩理論の演習とワークショップ
学生に16進を入力させ、30°、45°、60°のシフトを試して、彩度と明度を固定したまま類似色ファミリーが色相環をどう歩くかを見せます。
よくある質問
類似色パレットとは何ですか？
類似色パレットは、色相環上で互いに隣り合う3色（以上）の色です。このツールは、彩度と明度を固定したまま色相を ±angle だけシフトして、ベースのちょうど2つの隣接色を作ります。
どの角度を使うべきですか？
30度は多くのデザインシステムで使われる古典的な緊密なファミリーです。45や60など大きな値はより分離が開きます。受け付け範囲は0より大きく180度以下です。
どのカラー形式が受け付けられますか？
CSSの16進のみです。#rgb または #rrggbb で、先頭のハッシュはあってもなくても構いません。
ジェネレーターは彩度や明度を変更しますか？
いいえ。 色相だけが ±angle 動きます。ベースの彩度と明度は両方の隣接色で保持されるため、ファミリーは同じ彩度・明度帯に留まります。
料金はいくらですか？
ブラウザツールは無料でローカルで動作します。無効な入力には課金されません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/analogous \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","angle":30}'const res = await fetch("https://api.kit.forhosting.com/color/analogous", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"angle": 30
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/analogous",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"angle": 30
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/analogous", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","angle":30}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","angle":30}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/analogous", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#3366cc",
"angle": 30
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.analogous",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
類似色の色相シフトの仕組み
応答にはさらに、クリーンアップされたベースカラー、数値の角度、base・analogous_minus・analogous_plus という名前付きスウォッチ、シフト方向に対して寒色側のminusからベースを経て暖色側のplusまで並んだ3要素の palette 配列、ドキュメントやデバッグ用のコンパクトな formula フィールドが含まれます。このパイプラインは純粋で決定的な浮動小数点演算であり、乱数シード、時計のタイムスタンプ、ネットワーク呼び出し、モデルドリフトがないため、同一の入力は常に同一のJSONを生成します。アルファ付き16進形式、非16進文字、color 欠落、angle 欠落、NaN、Infinity、角度ゼロ、180を超える角度は invalid_input で拒否されます。
送信するものと返ってくるもの
必須の color フィールドを16進文字列として、必須の angle フィールドを有限の度数として送信します。color フィールドはエイリアス hex と base も受け付けるため、hex や base キーで保存する既存のテーマJSONは、名前変更なしで同じ契約を呼び出せます。成功時、ペイロードには正規化されたベース16進の color、安定したJSON用にクリーンアップされた angle、role・hex・r・g・b・h・s・l・rgb・hsl を持つ base、同じスウォッチ形の analogous_minus と analogous_plus、3つの16進文字列の palette、3つの h・s・l オブジェクトの palette_hsl、RGB→HSL→シフト経路を記述する formula が含まれます。成功したAPI呼び出しの料金は項目ごとに公開基準の$0.002で、検証失敗は前払い残高を消費しません。
類似色パレットが実務で登場する場面
この機能は純粋な parse エンジンなので、API料金は成功項目ごとに公開基準の$0.002で、検証失敗は残高を消費しません。