FOT.Color(色変換) - fairy.ouchi.to


ソース


警告

この取説は現状の FOT.Color の仕様に基づくものです。
今後 FOT.Color の仕様が変更される可能性があります。


概要

#RRGGBB形式の色を他の形式に変換、及びその逆を行います。


使用方法

ヘッダでcolor.jsを読み込んで


    let col = FOT.Color("F080EE", "rgb");

    // 上記は以下でも同じ
    // let col = FOT.Color().set([240, 128, 238], "dec");
    // let col = FOT.Color().hex(["F0", "80", "EE"]);

    let h, s, v, l;

    [h, s, v] = col.get("hsv"); // HSV を取得

    // h : 色相 ( H / Hue        )。0.0 <= h <  360.0
    // s : 彩度 ( S / Saturation )。0.0 <= s <= 100.0
    // v : 明度 ( V / Value      )。0   <= v <= 255

    [h, s, l] = col.hsl(); // HSL を取得

    // h : 色相 ( H / Hue        )。0.0 <= h <  360.0
    // s : 彩度 ( S / Saturation )。0.0 <= s <= 100.0
    // l : 輝度 ( L / Luminance  )。0.0 <= l <= 255.0

    let rgb = col.hsl([(h + 180) % 360, s, l]).rgb(); // 補色 "rrggbb"

こんな感じです。

現在は、rgb("rrggbb") / hex(["rr", "gg", "bb"]) / dec([(0-255), (0-255), (0-255)]) / hsv([h, s, v]) / hsl([h, s, l]) の6形式の入出力に対応しています。

上記のいずれも、set(色, "形式") / get("形式") メソッドが使えます(*)。
コンストラクタの引数は set と同一です。省略すると黒 "#000000" が設定されます。

(*) 内部では、引数に応じて set / get を呼んでるだけです。