RGB to HEX
Перетворення моделі кольору RGB у Hex (hexadecimal) в JavaScript:
function rgbToHex(r,g,b){
function numberToHex(n){
var res=n.toString(16);
if(res.length==1)res='0'+res;
return res;
};
return '#'+numberToHex(r)+numberToHex(g)+numberToHex(b);
}
alert( rgbToHex(255,255,255) );
function RGBtoHEX(r,g,b){
return "#"+((1 << 24)+(r << 16)+(g << 8) + b).toString(16).slice(1);
}
alert( RGBtoHEX(255,255,255) );
RGB to HSL
Конвертація кольору RGB у HSL (Hue Saturation Lightness) в JavaScript.
function rgbToHsl(r, g, b){
if(arguments.length==1){
var reg=r.match(/\d+/g);
r=+reg[0];
g=+reg[1];
b=+reg[2];
}
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l=(max+min)/2;
if(max==min){
h=s=0;
}else{
var d=max-min;
s=l>0.5?d/(2-max-min):d/(max+min);
switch(max){
case r:
h=(g-b)/d+(g<b?6:0);
break;
case g:
h=(b-r)/d+2;
break;
case b:
h=(r-g)/d+4;
break;
}
h/=6;
}
h=Math.round(360*h);
s=Math.round(s*100);
l=Math.round(l*100);
if(arguments.length==1){
return 'hsl('+h+','+s+'%,'+l+'%)';
}else
return [h, s, l];
}
alert( rgbToHsl(255,10,60) ); // [348, 100, 52]
alert( rgbToHsl('rgb(255,10,60') ); // "hsl(348, 100, 52)"
RGB to HSV
Конвертація моделі кольору RGB у HSV (Hue Saturation Value) в JavaScript
function rgbToHsv(r, g, b){
if(arguments.length==1){
var reg=r.match(/\d+/g);
r=+reg[0];
g=+reg[1];
b=+reg[2];
}
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, v=max;
var d=max-min;
s=max == 0 ? 0 : d / max;
if(max==min){
h=0;
}else{
switch(max){
case r:
h=(g-b)/d+(g<b?6:0);
break;
case g:
h=(b-r)/d+2;
break;
case b:
h=(r-g)/d+4;
break;
}
h/=6;
}
h=Math.round(360*h);
s=Math.round(s*100);
v=Math.round(v*100);
if(arguments.length==1){
return 'hsv('+h+','+s+'%,'+v+'%)';
}else
return [h, s, v];
}
alert( rgbToHsv(255,10,60) ); // [348, 97, 70]
alert( rgbToHsv('rgb(255,10,60') ); // "hsv(348, 97, 70)"
RGB to CMYK
Конвертація моделі кольору RGB у CMYK (Cyan Magenta Yellow blacK) в JavaScript
function rgbToCmyk(r,g,b){
if(arguments.length==1){
var reg=r.match(/\d+/g);
r=+reg[0];
g=+reg[1];
b=+reg[2];
}
var c,m,y,k;
c = m = y = k = 0;
if(r==0 && g==0 && b==0){
k = 1;
}
else{
r=1-(r/255);
g=1-(g/255);
b=1-(b/255);
var min=Math.min(r,g,b);
c=(r-min)/(1-min)*100;
m=(g-min)/(1-min)*100;
y=(b-min)/(1-min)*100;
k=min*100;
}
if(c>0)c=c.toFixed(2);
if(m>0)m=m.toFixed(2);
if(y>0)y=y.toFixed(2);
if(arguments.length==1)
return 'cmyk('+c+'%,'+m+'%,'+y+'%,'+k+'%)';
else
return [c,m,y,k];
}
alert( rgbToCmyk(255,10,60) ); // [0,96.08,76.74,0]
alert( rgbToCmyk('rgb(255,10,60)') ); //"cmyk(0%,96.08%,76.47%,0%)"
RGB to XYZ
Конвертація моделі кольору RGB у XYZ в JavaScript.
function rgbToXyz(r,g,b){
if(arguments.length==1){
var reg=r.toString().match(/\d+/g);
r=+reg[0];
g=+reg[1];
b=+reg[2];
}
r=r/255;
g=g/255;
b=b/255;
r=r>0.04045?Math.pow(((r+0.055)/1.055),2.4):(r/12.92);
g=g>0.04045?Math.pow(((g+0.055)/1.055),2.4):(g/12.92);
b=b>0.04045?Math.pow(((b+0.055)/1.055),2.4):(b/12.92);
var x=((r*0.4124)+(g*0.3576)+(b*0.1805))*100,
y=((r*0.2126)+(g*0.7152)+(b*0.0722))*100,
z=((r*0.0193)+(g*0.1192)+(b*0.9505))*100;
x=x.toFixed(2);
y=y.toFixed(2);
z=z.toFixed(2);
if(arguments.length==1)
return 'xyz('+x+','+y+','+z+')';
else
return [x,y,z];
}
alert( rgbToXyz(255,10,60) ); //[42.16,21.80,6.26]
alert( rgbToXyz('rgb(255,10,60)') ); // 'xyz(42.16,21.80,6.26)'
RGB to LAB
Конвертація моделі кольору RGB в LAB (CIELAB) у JavaScript.
function rgbToLab(r,g,b){
if(arguments.length==1){
var reg=r.match(/\d+/g);
r=+reg[0];
g=+reg[1];
b=+reg[2];
}
r=r/255;
g=g/255;
b=b/255;
r=r>0.04045?Math.pow(((r+0.055)/1.055),2.4):(r/12.92);
g=g>0.04045?Math.pow(((g+0.055)/1.055),2.4):(g/12.92);
b=b>0.04045?Math.pow(((b+0.055)/1.055),2.4):(b/12.92);
var x=((r*0.4124)+(g*0.3576)+(b*0.1805))*100,
y=((r*0.2126)+(g*0.7152)+(b*0.0722))*100,
z=((r*0.0193)+(g*0.1192)+(b*0.9505))*100,
l,a,b;
x/=95.047;
y/=100;
z/=108.883;
x=x>0.008856?Math.pow(x,1/3):(7.787*x)+(16/116);
y=y>0.008856?Math.pow(y,1/3):(7.787*y)+(16/116);
z=z>0.008856?Math.pow(z,1/3):(7.787*z)+(16/116);
l=((116*y)-16).toFixed(2);
a=(500*(x-y)).toFixed(2);
b=(200*(y-z)).toFixed(2);
if(arguments.length==1)
return "lab("+l+","+a+","+b+")";
else
return [l,a,b];
}
alert( rgbToLab(255,10,60) ); //[53.82, 80.40, 43.18]
alert( rgbToLab('rgb(255,10,60)')); //'lab(54.82,80.40,43.18)'
HSL to RGB
Конвертація моделі кольору HSL в RGB у JavaScript.
function hslToRgb(h,s,l){
if(arguments.length==1){
var reg=h.match(/\d+/g);
h=+reg[0];
s=+reg[1];
l=+reg[2];
}
h=h/360;
s=s/100;
l=l/100;
var t1,t2,t3,val;
if(s===0){
val=l*255;
h=s=l=val;
}
else{
if(l<0.5){
t2=l*(1+s);
}else{
t2=l+s-l*s;
}
t1=2*l-t2;
var rgb=[0,0,0];
for(var i=0;i<3;i++){
t3=h+1/3*-(i-1);
if(t3<0){
t3++;
}
if(t3>1){
t3--;
}
if(6*t3<1){
val=t1+(t2-t1)*6*t3;
} else if(2*t3<1){
val=t2;
} else if(3*t3<2){
val=t1+(t2-t1)*(2/3-t3)*6;
} else {
val=t1;
}
rgb[i]=(val*255).toFixed(0); // 0 знаків після коми результат
}
}
if(arguments.length==1)return 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
else return rgb;
}
alert( hslToRgb(260,67,22) ); // [44,19,94]
alert( hslToRgb('hsl(260,67,22)') ); // rgb(44,19,94)
HSL to HSV
Конвертація моделі кольору HSL в HSV на JavaScript.
function hslToHsv(h,s,l){
if(arguments.length==1){
var reg=h.toString().match(/\d+/g);
h=+reg[0];
s=+reg[1];
l=+reg[2];
}
s=s/100;
l=l/100;
var smin = s;
var lmin = Math.max(l,0.01);
var sv,v;
l*=2;
s*=(l<=1)?l:2-l;
smin*=lmin<=1?lmin:2-lmin;
v=(l+s)/2;
sv=l===0?(2*smin)/(lmin+smin):(2*s)/(l+s);
h=h.toFixed(2);
sv=(sv*100).toFixed(2);
v=(v*100).toFixed(2);
if(arguments.length==1)return 'hsv('+h+','+sv+','+v+')';
return [h, sv, v];
}
alert( hslToHsv(56,56,56) ); // [56.00,61.11,80.64]
alert( hslToHsv('hsl(56,56,56)') ); // "hsv(56.00,61.11,80.64)"
CMYK to RGB
Конвертація моделі кольору CMYK в RGB у JavaScript
function cmykToRgb(c,m,y,k){
if(arguments.length==1){
var reg=c.toString().match(/\d+/g);
c=+reg[0];
m=+reg[1];
y=+reg[2];
k=+reg[3];
}
c=c/100;
m=m/100;
y=y/100;
k=k/100;
var r=Math.round((1-Math.min(1,c*(1-k)+k))*255),
g=Math.round((1-Math.min(1,m*(1-k)+k))*255),
b=Math.round((1-Math.min(1,y*(1-k)+k))*255);
if(arguments.length==1)return 'rgb('+r+','+g+','+b+')';
return [r,g,b];
}
alert( cmykToRgb(80,50,50,30) ); // [36,89,89]
alert( cmykToRgb('cmyk(80,50,50,30)') ); // "rgb(36,89,89)"
XYZ to RGB
Конвертація моделі кольору XYZ в RGB у JavaScript.
function xyzToRgb(x,y,z){
if(arguments.length==1){
var reg=x.toString().match(/\d+/g);
x=+reg[0];
y=+reg[1];
z=+reg[2];
}
x=x/100;
y=y/100;
z=z/100;
var r,g,b;
r=(x*3.2406)+(y*-1.5372)+(z*-0.4986);
g=(x*-0.9689)+(y*1.8758)+(z*0.0415);
b=(x*0.0557)+(y*-0.2040)+(z*1.0570);
r=r>0.0031308?((1.055*Math.pow(r,1.0/2.4))-0.055):r*12.92;
g=g>0.0031308?((1.055*Math.pow(g,1.0/2.4))-0.055):g*12.92;
b=b>0.0031308?((1.055*Math.pow(b,1.0/2.4))-0.055):b*12.92;
r=parseInt(Math.min(Math.max(0,r),1)*255);
g=parseInt(Math.min(Math.max(0,g),1)*255);
b=parseInt(Math.min(Math.max(0,b),1)*255);
if(arguments.length==1)return "rgb("+r+","+g+","+b+")";
else return [r,g,b];
}
alert( xyzToRgb(10,50,60) ); // [0,239,193]
Hex to RGB
Конвертація Hex в RGB у JavaScript
function hexToRGB(h){
var match=h.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
if (!match) {
return [0, 0, 0];
}
var colorString=match[0];
if (match[0].length===3){
colorString = colorString.split('').map(function(char){
return char+char;
}).join('');
}
var n=parseInt(colorString, 16);
var r=(n >> 16) & 0xFF;
var g=(n >> 8) & 0xFF;
var b=n & 0xFF;
return [r,g,b];
}
alert( hexToRGB('#ffffff') ); // [255,255,255]
Hex to CMYK
Конвертація hex у CMYK в JavaScript
function hexToCMYK(hex){
var C=0,M=0,Y=0,K=0;
hex=(hex.charAt(0)=="#")?hex.substring(1,7):hex;
var r=parseInt(hex.substring(0,2),16);
var g=parseInt(hex.substring(2,4),16);
var b=parseInt(hex.substring(4,6),16);
if(r==0 && g==0 && b==0){
K = 1;
}
else{
C=1-(r/255);
M=1-(g/255);
Y=1-(b/255);
var minCMY=Math.min(C,M,Y);
C=(C-minCMY)/(1-minCMY);
M=(M-minCMY)/(1-minCMY);
Y=(Y-minCMY)/(1-minCMY);
K=minCMY;
}
C=C*100;
M=M*100;
Y=Y*100;
K=K*100;
return [C==0?0:C.toFixed(2),M==0?0:M.toFixed(2),Y==0?0:Y.toFixed(2),K==0?0:K.toFixed(2)];
}
alert( hexToCMYK('#3d3f3d') );
Color to Hex
Перетворення кольору у hex-колір. Функція colorToHex приймає такі параметри: назва кольору, RGB формат як у числах так і у рядку, скорочений hex. Якщо не вдолося перетворити тоді повертає null.
function colorToHex(color){
function numberToHex(n){
n=parseInt(n);
if(isNaN(n))n=0;
var res=n.toString(16);
if(res.length==1)res='0'+res;
return res;
};
if(arguments.length==3)return '#'+numberToHex(arguments[1])+numberToHex(arguments[2])+numberToHex(arguments[3]);
color=color.toString().toLowerCase();
if(color==undefined || color=='')return '#000000';
var colorName={"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#0ffff","aquamarine":"#7fffd4","azure":"#f0ffff", "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887", "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff", "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f", "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1", "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff", "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff", "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f", "honeydew":"#f0fff0","hotpink":"#ff69b4", "indianred ":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c", "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2", "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de", "lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6", "magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee", "mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5", "navajowhite":"#ffdead","navy":"#000080", "oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6", "palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080", "rebeccapurple":"#663399","red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1", "saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4", "tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0", "violet":"#ee82ee", "wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5", "yellow":"#ffff00","yellowgreen":"#9acd32"};
if(colorName[color]!=undefined)return colorName[color];
if(color.indexOf('rgb')>-1){
var reg=color.match(/\d+/g);
return '#'+numberToHex(reg[0])+numberToHex(reg[1])+numberToHex(reg[2]);
}
if(color.indexOf('#')>-1){
color=color.replace('#','');
if(color.length==3)color=color[0]+color[0]+color[1]+color[1]+color[2]+color[2];
var r=parseInt(color.substring(0,2),16),
g=parseInt(color.substring(2,4),16),
b=parseInt(color.substring(4,6),16);
return '#'+numberToHex(r)+numberToHex(g)+numberToHex(b);
}
return null;
}
alert( colorToHex('red') );
console.log( colorToHex(45,56,79) );
console.log( colorToHex('rgb(67,78,90)') );
console.log( colorToHex('#fff') );
Color to RGB
Перетворюємо колір у RGB модель за допомогою браузера. Функція colorToRGB приймає будь який формат кольору у вигляді рядку який підтримує браузер.
function colorToRGB(color){
var el=document.createElement('div');
el.style.color=color.toString();
var res= getComputedStyle(el)['color'];
if(res.indexOf('rgba')>-1){
var reg=res.match(/\d+/g);
return 'rgb('+reg[0]+','+reg[1]+','+reg[2]+')';
}
return res;
}
alert( colorToRGB('rgba(3,76,6,0.8)') );
alert( colorToRGB('hsl(64,67%,25%)') );
Колір to колір RTF
Конвертація моделі кольору RGB, hex у формат кольору RTF документа.
function colorToRtf(h){
if(h==undefined || h=='')h='000000';
if(h.indexOf('rgb')>-1){
var reg=h.match(/\d+/g);
return '\\red'+reg[0]+'\\green'+reg[1]+'\\blue'+reg[2]+';';
}
var colorName={"aliceblue":"f0f8ff","antiquewhite":"faebd7","aqua":"0ffff","aquamarine":"7fffd4","azure":"f0ffff", "beige":"f5f5dc","bisque":"ffe4c4","black":"000000","blanchedalmond":"ffebcd","blue":"0000ff","blueviolet":"8a2be2","brown":"a52a2a","burlywood":"deb887", "cadetblue":"5f9ea0","chartreuse":"7fff00","chocolate":"d2691e","coral":"ff7f50","cornflowerblue":"6495ed","cornsilk":"fff8dc","crimson":"dc143c","cyan":"00ffff", "darkblue":"00008b","darkcyan":"008b8b","darkgoldenrod":"b8860b","darkgray":"a9a9a9","darkgreen":"006400","darkkhaki":"bdb76b","darkmagenta":"8b008b","darkolivegreen":"556b2f", "darkorange":"ff8c00","darkorchid":"9932cc","darkred":"8b0000","darksalmon":"e9967a","darkseagreen":"8fbc8f","darkslateblue":"483d8b","darkslategray":"2f4f4f","darkturquoise":"00ced1", "darkviolet":"9400d3","deeppink":"ff1493","deepskyblue":"00bfff","dimgray":"696969","dodgerblue":"1e90ff", "firebrick":"b22222","floralwhite":"fffaf0","forestgreen":"228b22","fuchsia":"ff00ff", "gainsboro":"dcdcdc","ghostwhite":"f8f8ff","gold":"ffd700","goldenrod":"daa520","gray":"808080","green":"008000","greenyellow":"adff2f", "honeydew":"f0fff0","hotpink":"ff69b4", "indianred ":"cd5c5c","indigo":"4b0082","ivory":"fffff0","khaki":"f0e68c", "lavender":"e6e6fa","lavenderblush":"fff0f5","lawngreen":"7cfc00","lemonchiffon":"fffacd","lightblue":"add8e6","lightcoral":"f08080","lightcyan":"e0ffff","lightgoldenrodyellow":"fafad2", "lightgrey":"d3d3d3","lightgreen":"90ee90","lightpink":"ffb6c1","lightsalmon":"ffa07a","lightseagreen":"20b2aa","lightskyblue":"87cefa","lightslategray":"778899","lightsteelblue":"b0c4de", "lightyellow":"ffffe0","lime":"00ff00","limegreen":"32cd32","linen":"faf0e6", "magenta":"ff00ff","maroon":"800000","mediumaquamarine":"66cdaa","mediumblue":"0000cd","mediumorchid":"ba55d3","mediumpurple":"9370d8","mediumseagreen":"3cb371","mediumslateblue":"7b68ee", "mediumspringgreen":"00fa9a","mediumturquoise":"48d1cc","mediumvioletred":"c71585","midnightblue":"191970","mintcream":"f5fffa","mistyrose":"ffe4e1","moccasin":"ffe4b5", "navajowhite":"ffdead","navy":"000080", "oldlace":"fdf5e6","olive":"808000","olivedrab":"6b8e23","orange":"ffa500","orangered":"ff4500","orchid":"da70d6", "palegoldenrod":"eee8aa","palegreen":"98fb98","paleturquoise":"afeeee","palevioletred":"d87093","papayawhip":"ffefd5","peachpuff":"ffdab9","peru":"cd853f","pink":"ffc0cb","plum":"dda0dd","powderblue":"b0e0e6","purple":"800080", "rebeccapurple":"663399","red":"ff0000","rosybrown":"bc8f8f","royalblue":"4169e1", "saddlebrown":"8b4513","salmon":"fa8072","sandybrown":"f4a460","seagreen":"2e8b57","seashell":"fff5ee","sienna":"a0522d","silver":"c0c0c0","skyblue":"87ceeb","slateblue":"6a5acd","slategray":"708090","snow":"fffafa","springgreen":"00ff7f","steelblue":"4682b4", "tan":"d2b48c","teal":"008080","thistle":"d8bfd8","tomato":"ff6347","turquoise":"40e0d0", "violet":"ee82ee", "wheat":"f5deb3","white":"ffffff","whitesmoke":"f5f5f5", "yellow":"ffff00","yellowgreen":"9acd32"};
if(colorName[h]!=undefined)h=colorName[h];
h=h.replace('#','');
var r=parseInt(h.substring(0,2),16),
g=parseInt(h.substring(2,4),16),
b=parseInt(h.substring(4,6),16);
return '\\red'+r+'\\green'+g+'\\blue'+b+';';
}
alert( colorToRtf('#3d3d3a') );