カラー表記の足し算プログラム

解決済

質問者：nobolk
質問日時：2009/02/12 18:40
回答数：3件

color=new Array(2);
color[0]="blue";color[1]="yellow"

document.bgColor=color[0]+color[1];

例をあげましたが、このプログラムだと黒になってしまいます。
緑にするにはどうやったらいいのでしょうか？
またどんな色でも対応できるようなプログラムはどう作成したらよいのでしょうか。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： _pipi_
回答日時：2009/02/13 07:06

ジョークのつもりだったのですが^^;

最初のビット演算はまずかったよね～！今気づいた！
なので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+')';
}

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
無事解決しました。
RGBについて少しだけ詳しくなりました。

通報する

お礼日時：2009/02/14 21:20

No.2

回答者： _pipi_
回答日時：2009/02/12 20:56

ジョークのつもり^^;

もちろん、青と黄色はグレーになる

<!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種類混ぜるとどうなるのか
再度教えていただけないでしょうか。

補足日時：2009/02/13 04:41

通報する

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/02/12 20:30

"blue"、"yellow"などは単なる色名なので、それで計算しようとしても無理。

ちなみに、color[0]+color[1]は、単純に"blueyellow"になっているはず。

色名からrgbに分解して計算する必要がありますが、bule + yellow = greenというのは減色混合の考えなので、rgbに分解しただけでは単純には計算できないと思われます。

加色混合、減色混合、中間混色などや、RGB、CMYK、色変換あたりをキーにして検索してみてください。