カテゴリー:
色変換
閲覧数:746 配信日:2016-06-20 09:53
方式1
彩度S範囲0～255として計算
※彩度S範囲0～255が前提。これ以外の場合には別途この範囲へ手動変換する必要があり
・収束値 CNT(＝L)で条件分岐
収束値 CNT = (MAX + MIN) ÷ 2
収束値 CNTが127以下の場合 彩度 S = (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - MIN) ÷ (510 - MAX - MIN)
収束値 CNTが127以下の場合 彩度 S = (MAX - MIN) ÷ (MAX + MIN)
収束値 CNTが128以上の場合 彩度 S = (MAX - MIN) ÷ (510 - MAX - MIN)
収束値 CNT = (MAX + MIN) ÷ 2
収束値 CNTが127以下の場合 彩度 S = (MAX/255 - MIN/255) ÷ (MAX/255 + MIN/255)
収束値 CNTが128以上の場合 彩度 S = (MAX/255 - MIN/255) ÷ (2 - MAX/255 - MIN/255)
収束値 CNTが127以下の場合 彩度 S = (MAX/255 - MIN/255) ÷ (MAX/255 + MIN/255)
収束値 CNTが128以上の場合 彩度 S = (MAX/255 - MIN/255) ÷ (2 - MAX/255 - MIN/255)
JS
・RGB ⇔ HSL 1
・RGB ⇔ HSL 2
・RGB ⇔ HSL 3
方式2
彩度範囲0～1として計算
・Lで条件分岐
L = (MAX + MIN) / 2;
if (L > 0.5) {
S = MAX - MIN / (2 - MAX - MIN);
} else {
S = MAX - MIN / (MAX + MIN);
}
if (L > 0.5) {
S = MAX - MIN / (2 - MAX - MIN);
} else {
S = MAX - MIN / (MAX + MIN);
}
JS
・16進数カラーコード → HSL
・16進数カラーコード → RGB ／ HSL
・16進数カラーコード → RGB ／ HSL 2
・HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB
・HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB
・表色系の相互変換
・Chroma.js
理解できない
・マウスでクリックすると、セピア画像へ変換
・マウスで画像をクリックすると、青写真風へ変換
・colorPicker and colors
最終的に
RGB → HSL 彩度S 参考にするなら
・HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB
・コード全体が短いため確認しやすい
※該当変換コード内容自体はどれもあまり変わらない