JSで10進数と16進数の相互変換
作成日:2018-07-25, 更新日:2018-07-25
基本
10進数を16進数、16進数を10進数にする
10進数を16進数にする
function to16From10(i){
i = i - 0;
if(0<=i && i<=9) return i;
if(i == 10) return "A";
if(i == 11) return "B";
if(i == 12) return "C";
if(i == 13) return "D";
if(i == 14) return "E";
if(i == 15) return "F";
}
16進数を10進数にする
function to10From16(s){
if(s.match(/[0-9]/i)) return s - 0;
if(s.match(/A/i)) return 10;
if(s.match(/B/i)) return 11;
if(s.match(/C/i)) return 12;
if(s.match(/D/i)) return 13;
if(s.match(/E/i)) return 14;
if(s.match(/F/i)) return 15;
}
彩度を下げたい
指定した色の彩度を下げたい・・・ということで、そもそも「彩度を下げる」とはどういうことか、そして、どうすれば彩度が下がるのかを考えてみた。
・「彩度を下げる」は「グレーに近づけていく」というコト。
・「彩度を下げる」にはRGBの各要素の最大値と最小値の真ん中の値にする。
「#8FC93C」を彩度を落として完全にグレーにする
まずRGBの各要素の最大値と最小値を調べる。
・最大値はG=C9
・最小値はB=3C
最大値と最小値の真ん中の値
▼計算式
（最大値と最小値の真ん中）＝（最大値-最小値）/2+最小値
▼「#8FC93C」の場合
（最大値と最小値の真ん中）＝（C9-3C）/2+3C
▼「10進数」で計算。
＝（201-60）/2+60＝130.5＝131
▼「131」を16進数に戻す。
＝83
よって、
「RGB＝#838383」が彩度を落とした色になる。
「#8FC93C」を彩度を落として、元の色とグレーの中間の色にしたい
・「#8FC93C」をグレーにすると「#838383」
・欲しいのは「#8FC93C」と「#838383」の中間の色。
つまり
・「R：8F→83」の中間の色：89
・「G：C9→83」の中間の色：A6
・「B：3C→83」の中間の色：60
彩度を上げたい
彩度を下げる場合はグレーにすればいいんだけど・・・上げる場合は白にすれば良いってわけじゃない。
以下は、個人的なメモ。
要は・・・色相環の色にする。
色相環の色：RGBの内、
・少なくとも一つが0
・少なくとも一つが255
の二つの条件を満たす色
彩度をあげるには
RGBの
・もっとも低い値を0
・もっとも高い値を255
にすれば良い。
「Photoshopでの彩度をあげる」は
・もっとも低い値と0の差の絶対値と
・もっとも高い値と255の差の絶対値
を比較して値の小さい方を加える・引く
例）R=50、G=100、B=210
・もっとも低い値「R=50」
・もっとも高い値「B=210」
▼(R：50-0)の絶対値と(B：210-255)の絶対値を比較
・(R：50-0)の絶対値：50
・(B：210-255)の絶対値：45
絶対値の小さいほうを使う：45
▼「R=50、G=100、B=210」の彩度をあげる場合
・R=50 → -45する
・G=100 → 何もしない
・B=210 → +45する
→「R=5、G=100、B=255」となる。
色コードの変換をしたい
任意の色の反転色や薄めた色が欲しくて、クラス化。
(function($) {
$.extend({
to10from16: function(s){
/// <summary>
/// 16進数（0～F）を10進数（0～16）にする
/// </summary>
if(s.match(/[0-9]/i)) return s - 0;
if(s.match(/A/i)) return 10;
if(s.match(/B/i)) return 11;
if(s.match(/C/i)) return 12;
if(s.match(/D/i)) return 13;
if(s.match(/E/i)) return 14;
if(s.match(/F/i)) return 15;
},
to16from10: function(i){
/// <summary>
/// 10進数（0～16）を16進数（0～F）にする
/// </summary>
i = i - 0;
if(0 <= i && i <= 9) return i;
if(i == 10) return "A";
if(i == 11) return "B";
if(i == 12) return "C";
if(i == 13) return "D";
if(i == 14) return "E";
if(i == 15) return "F";
},
to16ForColCode: function(obj){
/// <summary>
/// 10進数の色コードを16進数（0～255）に変換して配列で返す
/// </summary>
var chk_i = obj;
if(chk_i - 0 > 255)obj = "255";
if(chk_i - 0 < 0)obj = "0";
var r1 = obj - 0;
var r1_10 = Math.floor(r1 / 16);
var r1_1 = r1 - (r1_10 * 16);
var rtnColor = "" + $.to16from10(r1_10) + $.to16from10(r1_1);
return rtnColor;
},
getAryTo10ForColCode: function(inputColor){
/// <summary>
/// 16進数の色コードを10進数に変換して配列で返す
/// </summary>
var RGB10 = new Array;
var RGB16 = new Array;
//#123456の場合、[0]=12,[1]=34,[2]=56
RGB16.push(inputColor.substring(1,3));
RGB16.push(inputColor.substring(3,5));
RGB16.push(inputColor.substring(5));
for(colorNum=0; colorNum<RGB16.length; colorNum++){
var col1 = $.to10from16(RGB16[colorNum].substring(0,1));
var col2 = $.to10from16(RGB16[colorNum].substring(1));
var col1 = col1 * 16;
var col3 = col1 - 0 + col2;
RGB10.push(col3);
}
return RGB10;
},
getAryTo16ForColCode: function(inputColor){
/// <summary>
/// 10進数の色コード(配列)を16進数に変換
/// </summary>
var RGB16 = new Array;
var colorCode = 0;
for(colorNum=0; colorNum<inputColor.length; colorNum++){
if(inputColor[colorNum]>255){
colorCode = 255;
}
else if(inputColor[colorNum]<0){
colorCode = 0;
}
else{
colorCode = inputColor[colorNum];
}
var r1 = colorCode - 0;
var r1_10 = Math.floor(r1 / 16);
var r1_1 = r1 - (r1_10 * 16);
var rtnColor = "" + $.to16from10(r1_10) + $.to16from10(r1_1);
RGB16.push(rtnColor);
}
return RGB16;
},
reverseColor: function(Reverse){
/// <summary>
/// 反転色
/// </summary>
// RGBをそれぞれ10進数に変換
var aryCol10 = $.getAryTo10ForColCode(Reverse);
var rR = $.to16ForColCode(Math.round(255 - aryCol10[0]));
var rG = $.to16ForColCode(Math.round(255 - aryCol10[1]));
var rB = $.to16ForColCode(Math.round(255 - aryCol10[2]));
var rColor = "#" + rR + rG + rB;
return rColor;
},
thinnedColor: function(inputColor, colorDensity){
/// <summary>
/// 指定された色を薄める
///
/// - colorDensity: 濃度の割合（30％にしたいなら「70」）
/// </summary>
// RGBをそれぞれ10進数に変換
var aryCol10 = $.getAryTo10ForColCode(inputColor);
var rR = $.to16ForColCode( Math.round((255 - aryCol10[0]) * colorDensity / 100 + aryCol10[0]) );
var rG = $.to16ForColCode( Math.round((255 - aryCol10[1]) * colorDensity / 100 + aryCol10[1]) );
var rB = $.to16ForColCode( Math.round((255 - aryCol10[2]) * colorDensity / 100 + aryCol10[2]) );
var rColor = "#" + rR + rG + rB;
return rColor;
},
getDownChroma: function(intCol, mdlCol, dwnLevel) {
// 彩度を下げる（dwnLevel=1で無彩色）
var rstCol;
if( intCol <= mdlCol ){
rstCol = ( mdlCol - intCol ) * dwnLevel + intCol;
}
else{
rstCol = ( intCol - mdlCol ) * dwnLevel - intCol;
}
return Math.abs( Math.round(rstCol) );
},
downChroma: function(defCol, dwnLevel){
var eleCol = $.getAryTo10ForColCode(defCol);
var fstCol = eleCol[0];
// 最大値
var maxCol = fstCol;
for(var i=1; i<eleCol.length; i++){
if( maxCol < eleCol[i] ){
maxCol = eleCol[i];
}
}
// 最小値
var minCol = fstCol;
for(var i=1; i<eleCol.length; i++){
if( eleCol[i] < minCol ){
minCol = eleCol[i];
}
}
var midCol = Math.abs( Math.round((maxCol-minCol)/2+minCol) );
var tmpCol = '#';
for (var i in eleCol) {
tmpCol += $.to16ForColCode( $.getDownChroma(eleCol[i], midCol, dwnLevel) );
}
return tmpCol;
}
});
})(jQuery);
var oriCol = "#0330ff";
var Density = 70; //濃度の割合：30％なら70
var chgCol1 = $.thinnedColor(oriCol, Density); // 色を薄める
var chgCol2 = $.reverseColor(oriCol); // 反転色
var dwnLevel = 0.5;
var chgCol = $.downChroma(oriCol, dwnLevel); // 彩度を落とした色