Core Mechanics

色彩演算アルゴリズムと HSL 色空間における位相変換の定義

1. 数学的定義

本ツールは、RGB色空間ではなく、人間の知覚に近い HSL (Hue, Saturation, Lightness) モデルをベースに演算を行います。BaseカラーとTargetカラーの「色相差（ΔH）」を抽出し、それを任意のアセット（Vector）へ適用します。

ΔH = H_{target} - H_{base}
H'_{vector} = (H_{vector} + ΔH) \pmod{360}

※ ΔH は正規化され、結果は 0° から 359° の範囲に収束します。

2. 変換アルゴリズムの比較

従来の Alpha-blending（不透明度調整）と本演算の比較データです。

Parameter	Alpha Blending	Hue-Shift Logic
Color Purity (純度)	低 (背景色との混色により劣化)	高 (彩度・明度を維持)
Predictability (予測可能性)	不定 (背景に依存)	確定的 (数学的算出)
System Consistency	弱	強 (デザインシステム適合)

3. リファレンス実装 (Pseudocode)

内部で行われている色相計算のロジックです。

/**
 * Calculate shifted hue while maintaining perceived saturation and lightness.
 * @param {number} baseHue - The hue of the source origin.
 * @param {number} targetHue - The hue of the design intent.
 * @param {number} vectorHue - The original asset hue to be transformed.
 * @returns {number} The optimized result hue.
 */
function calculateShift(baseHue, targetHue, vectorHue) {
    const delta = targetHue - baseHue;
    let result = (vectorHue + delta) % 360;
    
    if (result < 0) result += 360;
    
    return Math.round(result);
}

Related Resources

DESIGN
GUIDE

COLOR DESIGN カラー別配色デザインブック

何色を合わせればいいか。直感的な色選びの参考に。

VIEW ON AMAZON

TOOL

W3C/HSL

HSLカラーモデルの基礎。