- ベストアンサー
カラー表記の足し算プログラム
color=new Array(2); color[0]="blue";color[1]="yellow" document.bgColor=color[0]+color[1]; 例をあげましたが、このプログラムだと黒になってしまいます。 緑にするにはどうやったらいいのでしょうか？ またどんな色でも対応できるようなプログラムはどう作成したらよいのでしょうか。 よろしくお願いいたします。
- nobolk
- お礼率41% (12/29)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ジョークのつもりだったのですが^^; 最初のビット演算はまずかったよね～！今気づいた！ なので3色足して平均値にするってのはどうでしょう？ もちろん、たくさん色を足せば、グレーに近づくだけなのですが？ ちょっと利用価値が見出せないプログラムですよ！ 色の名前のチェックはしていないのでお間違いなく。 function mixColor(cname0, cname1, cname2) { var c0 = colorName2RGB(cname0); var c1 = colorName2RGB(cname1); var c2 = colorName2RGB(cname2); var r = (c0[0] + c1[0] + c2[0]) / 3 |0; var g = (c0[1] + c1[1] + c2[1]) / 3 |0; var b = (c0[2] + c1[2] + c2[2]) / 3 |0; return 'rgb('+r+','+g+','+b+')'; }
その他の回答 (2)
ジョークのつもり^^; もちろん、青と黄色はグレーになる <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>色をごちゃまぜ</title> <body> <script type="text/javascript"> document.body.style.backgroundColor = mixColor('blue','red'); function mixColor(cname0, cname1) { var c0 = colorName2RGB(cname0); var c1 = colorName2RGB(cname1); var r = (c0[0] | c1[0]) / 2 |0; var g = (c0[1] | c1[1]) / 2 |0; var b = (c0[2] | c1[2]) / 2 |0; return 'rgb('+r+','+g+','+b+')'; } function colorName2RGB (cname) { var s = ',aliceblue,#F0F8FFantiquewhite,#FAEBD7,aqua,#00FFFF,aquamarine,#7FFFD4,azure,#F0FFFF,beige,#F5F5DC,bisque,#FFE4C4,black,#000000,blanchedalmond,#FFEBCD,blue,#0000FF,blueviolet,#8A2BE2,brass,#B5A642,brown,#A52A2A,burlywood,#DEB887,cadetblue,#5F9EA0,chartreuse,#7FFF00,chocolate,#D2691E,coolcopper,#D98719,copper,#BF00DF,coral,#FF7F50,cornflower,#BFEFDF,cornflowerblue,#6495ED,cornsilk,#FFF8DC,crimson,#DC143C,cyan,#00FFFF,darkblue,#00008B,darkbrown,#DA0B00,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,feldsper,#FED0E0,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,lightgreen,#90EE90,lightgrey,#D3D3D3,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,#9370DB,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,#DB7093,papayawhip,#FFEFD5,peachpuff,#FFDAB9,peru,#CD853F,pink,#FFC0CB,plum,#DDA0DD,powderblue,#B0E0E6,purple,#800080,red,#FF0000,richblue,#0CB0E0,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'; var c = s.match(new RegExp(','+cname+',#(.{2})(.{2})(.{2})','i')); return [parseInt('0x'+c[1]),parseInt('0x'+c[2]),parseInt('0x'+c[3])]; } </script>
補足
回答ありがとうございます azure - honeydew + moccasinの場合 つまり三色混ぜた場合 プログラムはどうなるのでしょう。 function mixColor(cname0, cname1, cname2) { var c0 = colorName2RGB(cname0); var c1 = colorName2RGB(cname1); var c2 = colorName2RGB(cname2); ↓ここにC2[0],C2[1],C2[2]を入れてやってみたのですが 背景はWhiteになりました。 var r = (c0[0] | c1[0]) / 2 |0; var g = (c0[1] | c1[1]) / 2 |0; var b = (c0[2] | c1[2]) / 2 |0; return 'rgb('+r+','+g+','+b+')'; } 減算の場合でかつ3種類混ぜるとどうなるのか 再度教えていただけないでしょうか。
- fujillin
- ベストアンサー率61% (1594/2576)
"blue"、"yellow"などは単なる色名なので、それで計算しようとしても無理。 ちなみに、color[0]+color[1]は、単純に"blueyellow"になっているはず。 色名からrgbに分解して計算する必要がありますが、bule + yellow = greenというのは減色混合の考えなので、rgbに分解しただけでは単純には計算できないと思われます。 加色混合、減色混合、中間混色などや、RGB、CMYK、色変換あたりをキーにして検索してみてください。
お礼
ありがとうございます。 無事解決しました。 RGBについて少しだけ詳しくなりました。