Skip to content

Instantly share code, notes, and snippets.

@Cartman0 Cartman0/Color.js
Last active Sep 10, 2015

Embed
What would you like to do?
rgb2hsl, hsl2rgbの色変換
'use strict';
class Color {
constructor(r, g, b) {
var r_int = parseInt(r);
var g_int = parseInt(g);
var b_int = parseInt(b);
this.r_ = r_int;
this.g_ = g_int;
this.b_ = b_int;
this.h_ = this._calcHue(r_int, g_int, b_int);
this.s_ = this._calcSaturation(r_int, g_int, b_int);
this.l_ = this._calcLightness(r_int, g_int, b_int);
}
// setter rgb
_setR(r) {
var r_int = parseInt(r);
this.r_ = r_int;
}
setR(r) {
var r_int = parseInt(r);
this._setR(r_int);
this.rgb2hsl(r_int, this.g_, this.b_);
}
_setG(g) {
var g_int = parseInt(g);
this.g_ = parseInt(g_int);
}
setG(g) {
var g_int = parseInt(g);
this._setG(g_int);
this.rgb2hsl(this.r_, g_int, this.b_);
}
_setB(b) {
var b_int = parseInt(b);
this.b_ = parseInt(b_int);
}
setB(b) {
var b_int = parseInt(b);
this._setB(b_int);
this.rgb2hsl(this.r_, this.g_, b_int);
}
setRGB(r, g, b) {
var r_int = parseInt(r);
var g_int = parseInt(g);
var b_int = parseInt(b);
this._setR(r_int);
this._setG(g_int);
this._setB(b_int);
this.rgb2hsl(r_int, g_int, b_int);
}
// getter rgb
getR() {
return this.r_;
}
getG() {
return this.g_;
}
getB() {
return this.b_;
}
toRGB() {
return 'rgb(' + this.r_ + ', ' + this.g_ + ', ' + this.b_ + ')';
}
toHEX() {
return '#' +
parseInt(this.r_).toString(16).replace(/^([0-9]|[a-f])$/, '0$&') +
parseInt(this.g_).toString(16).replace(/^([0-9]|[a-f])$/, '0$&') +
parseInt(this.b_).toString(16).replace(/^([0-9]|[a-f])$/, '0$&');
}
// setter hsl
_setH(h) {
this.h_ = parseInt(h);
}
setH(h) {
var h_int = parseInt(h);
this._setH(h_int);
this.hsl2rgb(h_int, this.s_, this.l_);
}
_setS(s) {
this.s_ = parseInt(s);
}
setS(s) {
var s_int = parseInt(s);
this._setS(s_int);
this.hsl2rgb(this.h_, s_int, this.l_);
}
_setL(l) {
this.l_ = parseInt(l);
}
setL(l) {
var l_int = parseInt(l);
this._setL(l_int);
this.hsl2rgb(this.h_, this.s_, l_int);
}
setHSL(h, s, l) {
var h_int = parseInt(h);
var s_int = parseInt(s);
var l_int = parseInt(l);
this._setH(h_int);
this._setS(s_int);
this._setL(l_int);
this.hsl2rgb(h_int, s_int, l_int);
}
// getter hsl
getH() {
return this.h_;
}
getS() {
return this.s_;
}
getL() {
return this.l_;
}
toHSL() {
return 'hsl(' + this.h_ + ', ' + this.s_ + '%, ' + this.l_ + '%)';
}
hsl2rgb(h_deg, s_percent, l_percent) {
var h_norm = h_deg / 360;
var s_norm = s_percent / 100;
var l_norm = l_percent / 100;
var m2;
if (l_norm < 0.5) {
m2 = l_norm * (s_norm + 1);
} else {
m2 = l_norm + s_norm - l_norm * s_norm;
}
var m1 = l_norm * 2 - m2;
var r_norm = this._hsl2rgb(m1, m2, h_norm + 1 / 3);
var g_norm = this._hsl2rgb(m1, m2, h_norm);
var b_norm = this._hsl2rgb(m1, m2, h_norm - 1 / 3);
this.r_ = parseInt(Math.round(r_norm * 255));
this.g_ = parseInt(Math.round(g_norm * 255));
this.b_ = parseInt(Math.round(b_norm * 255));
}
_hsl2rgb(m1, m2, h) {
var _h = h;
if (_h < 0) {
_h = _h + 1;
}
if (_h > 1) {
_h = _h - 1;
}
if (_h * 6 < 1) {
return m1 + (m2 - m1) * _h * 6;
}
if (_h * 2 < 1) {
return m2;
}
if (_h * 3 < 2) {
return m1 + (m2 - m1) * (2 / 3 - _h) * 6;
}
return m1;
}
_calcHueNorm(r, g, b) {
var color_arr = [r, g, b];
var h_norm = 0.0;
// 等しいとき
if ((color_arr[0] == color_arr[1]) && (color_arr[1] == color_arr[2])) {
h_norm = 0.0;
} else if ((color_arr[0] >= color_arr[1]) && (color_arr[0] >= color_arr[2])) {
// r最大の場合
h_norm = ((color_arr[1] - color_arr[2]) / (Math.max.apply(null, color_arr) - Math.min.apply(null, color_arr))) / 6;
} else if ((color_arr[1] >= color_arr[0]) && (color_arr[1] >= color_arr[2])) {
// g最大の場合
h_norm = ((color_arr[2] - color_arr[1]) / (Math.max.apply(null, color_arr) - Math.min.apply(null, color_arr))) / 6 + 1 / 3;
} else if ((color_arr[2] >= color_arr[0]) && (color_arr[2] >= color_arr[1])) {
// b最大の場合
h_norm = ((color_arr[0] - color_arr[1]) / (Math.max.apply(null, color_arr) - Math.min.apply(null, color_arr))) / 6 + 2 / 3;
}
// 求めたhueが 0以下なら1足す
if (h_norm < 0) {
h_norm += 1;
}
return h_norm;
}
_calcHue(r, g, b) {
return Math.round(this._calcHueNorm(r, g, b) * 360);
}
_calcSaturationNorm(r, g, b) {
var color = [r, g, b];
// 収束値CNTを求める
var max = Math.max.apply(null, color);
var min = Math.min.apply(null, color);
var cnt = (max + min) / 2;
var s = 0.0;
if (cnt < 127) {
s = (max - min) / (max + min);
} else if (510 <= (max + min)) {
return 0.0;
} else {
s = (max - min) / (510 - max - min);
}
// console.log('s; '+s);
return s;
}
_calcSaturation(r, g, b) {
return Math.round(this._calcSaturationNorm(r, g, b) * 100);
}
_calcLightnessNorm(r, g, b) {
var color = [r, g, b];
var max = Math.max.apply(null, color);
var min = Math.min.apply(null, color);
var l = (max + min) / 2;
l /= 255;
return l;
}
_calcLightness(r, g, b) {
return Math.round(this._calcLightnessNorm(r, g, b) * 100);
}
rgb2hsl(r, g, b) {
this.h_ = this._calcHue(r, g, b);
this.s_ = this._calcSaturation(r, g, b);
this.l_ = this._calcLightness(r, g, b);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.