概要
状態:-
閲覧数:2,488
投稿日:2016-06-20
更新日:2016-06-23
RGB → HSL 彩度S 計算方式の違い
方式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
・コード全体が短いため確認しやすい
※該当変換コード内容自体はどれもあまり変わらない
RGB → HSV 彩度S 計算方式の違い
円柱モデル
彩度：S＝(Max－Min)/Max
JS
・RGB ⇔ HSV 1
・RGB ⇔ HSV 2
・表色系の相互変換
・HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB
・HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB
・JSColor
・i-color
・Chroma.js
PHP
・RGB → HSV
円錐モデルにも対応
デフォルト(円錐モデルを指定しない場合)は、円柱モデル
JS
・RGB ⇔ HSV 3
PHP
・RGB ⇔ HSV 2
2種類のメソッドを用意
PHP
・PHP Color Utility Class
理解できない
・colorPicker and colors
・マウスでクリックすると、セピア画像へ変換
・マウスで画像をクリックすると、青写真風へ変換
最終的に
RGB → HSV 彩度S 参考にするなら
・表色系の相互変換
※円柱モデル内なら、該当変換コード自体はほとんど同じ