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


ソース


警告

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


概要

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


使用方法

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


    var arr, h, s, v, l;

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

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

    arr = col.get("hsv"); // HSV を取得

    h = arr[0]; // 色相 ( H / Hue        )。0 <= h <  360 の小数
    s = arr[1]; // 彩度 ( S / Saturation )。0 <= s <= 100 の小数
    v = arr[2]; // 明度 ( V / Value      )。0 <= v <= 255 の整数

    arr = col.hsl(); // HSL を取得

    h = arr[0]; // 色相 ( H / Hue        )。0 <= h <  360 の小数
    s = arr[1]; // 彩度 ( S / Saturation )。0 <= s <= 100 の小数
    l = arr[2]; // 輝度 ( L / Luminance  )。0 <= l <= 255 の小数

    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 を呼んでるだけです。