<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Color Blender</title>
<style type="text/css">
body {
background: white;
color: black;
}
form {
margin: 0;
}
h1 {
font-family: Arial, sans-serif;
line-height: 0.85em;
border-bottom: 2px solid;
margin-bottom: 0.33em;
padding-bottom: 0;
}
#main {
border-bottom: 1px solid;
padding-bottom: 0.5em;
}
#uicell {
width: 25em;
}
#uicell th {
width: 6em;
text-align: right;
padding-right: 0.5em;
border: 1px solid black;
border-width: 0 1px 1px 0;
}
#uicell td {
padding: 0 0 0 0.5em;
}
#uicell td.pal {
padding: 0 3em;
}
#uicell #gobuttons td {
height: 1.5em;
}
input,
#input a {
font: 0.85em "Andale Mono", Courier, monospace;
}
#input,
#output {
margin: 0 0 1em;
}
#input td {
white-space: nowrap;
}
#input a {
border: 2px outset silver;
background: silver;
padding: 1px 0.25em;
cursor: pointer;
}
#input .coltype {
background: #EEE;
border-style: inset;
}
#output input {
border: 2px solid white;
border-width: 0 2px;
}
#output td.text {
border-bottom: 1px dotted silver;
}
#watercell {
width: 75px;
background: silver;
padding: 0;
}
#grid {
background: black;
border: 1px solid black;
border-width: 0 1px 1px 0;
margin: 5px 4px;
}
#grid td {
height: 11px;
width: 11px;
padding: 0;
line-height: 11px;
}
#grid td a {
display: block;
height: 10px;
width: 10px;
line-height: 10px;
border: 1px solid black;
border-width: 1px 0 0 1px;
}
#textcell p {
margin: 0;
padding: 0 1em 1em 1.5em;
}
#footer {
color: #999;
font: italic 75% sans-serif;
}
#footer p {
margin: 0 0 1em 0;
}
#footer img {
width: 2em;
float: right;
margin: 0 0 0.5em 2em;
}
</style>
<script type="text/javascript">
// Thanks to Steve Champeon (hesketh.com) for explaining the math in such a way that I could
// understand it and create this tool
// Thanks to Roberto Diez for the idea to create the "waterfall" display
// Thanks to the Rhino book, I was able to (clumsily) set up the Color object
// v1.0 (20030213) initial release
// v1.1 (20030221) added rgbd and rgbp value types
// v1.2 (20030511) added "waterfall" display of "web-safe" colors
// v1.3 (20030514) single-page structure for easy local saves; CC license
// v1.4 (20150321) added URL fragment ID storing of colors, steps, type
// v1.4.1 (20150322) fixed RGB/rgb parsing error
var cursor = 0;
var colType = 'hex';
var base = 16;
var ends = new Array(new Color, new Color);
var step = new Array(3);
var palette = new Array(new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color,
new Color, new Color, new Color, new Color);
function GetElementsWithClassName(elementName, className) {
var allElements = document.getElementsByTagName(elementName);
var elemColl = new Array();
for (i = 0; i < allElements.length; i++) {
if (allElements[i].className == className) {
elemColl[elemColl.length] = allElements[i];
}
}
return elemColl;
}
function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
this.coll = new Array(r, g, b);
this.valid = cVerify(this.coll);
this.text = cText(this.coll);
this.bg = cText(this.coll);
}
function cVerify(c) {
var valid = 'n';
if ((!isNaN(c[0])) && (!isNaN(c[1])) && (!isNaN(c[2]))) {
valid = 'y'
}
return valid;
}
function cText(c, t) {
var result = '';
var d = 1;
if (t) {
var cT = t;
} else cT = colType;
if (cT == 'hex') var base = 16;
if (cT == 'rgbp') {
d = 2.55
}
for (k = 0; k < 3; k++) {
val = Math.round(c[k] / d);
piece = val.toString(base);
if (cT == 'hex' && piece.length < 2) {
piece = '0' + piece;
}
if (cT == 'rgbp') {
piece = piece + '%'
};
if (cT != 'hex' && k < 2) {
piece = piece + ',';
}
result = result + piece;
}
if (cT == 'hex') {
result = '#' + result.toUpperCase();
} else {
result = 'rgb(' + result + ')';
}
return result;
}
function colorParse(c, t) {
var m = 1;
c = c.toUpperCase();
col = c.replace('RGB', '').replace(/[\#\(]*/i, '');
if (t == 'hex') {
if (col.length == 3) {
a = col.substr(0, 1);
b = col.substr(1, 1);
c = col.substr(2, 1);
col = a + a + b + b + c + c;
}
var num = new Array(col.substr(0, 2), col.substr(2, 2), col.substr(4, 2));
var base = 16;
} else {
var num = col.split(',');
var base = 10;
}
if (t == 'rgbp') {
m = 2.55
}
var ret = new Array(parseInt(num[0], base) * m, parseInt(num[1], base) * m, parseInt(num[2], base) * m);
return (ret);
}
function updateHash() {
if (ends[0].valid == 'y') c0 = cText(ends[0].coll, 'hex').substring(1);
else c0 = '';
if (ends[1].valid == 'y') c1 = cText(ends[1].coll, 'hex').substring(1);
else c1 = '';
st = document.getElementById('steps').value;
obj = GetElementsWithClassName('a', 'coltype');
ty = obj[0].id;
hashstr = '#' + c0 + ':' + c1 + ':' + st + ':' + ty;
window.location.hash = hashstr;
}
function colorPour(pt, n) {
var textObj = document.getElementById(pt + n.toString());
var colObj = document.getElementById(pt.substring(0, 1) + n.toString());
if (pt == 'col') {
temp = ends[n]
} else {
temp = palette[n]
}
if (temp.valid == 'y') {
textObj.value = temp.text;
colObj.style.backgroundColor = temp.bg;
}
}
function colorStore(n) {
var inVal = 'col' + n.toString();
var inCol = document.getElementById(inVal).value;
var c = colorParse(inCol, colType);
ends[n] = new Color(c[0], c[1], c[2]);
if (ends[n].valid == 'y') {
colorPour('col', n)
}
}
function stepCalc() {
var steps = parseInt(document.getElementById('steps').value) + 1;
step[0] = (ends[1].r - ends[0].r) / steps;
step[1] = (ends[1].g - ends[0].g) / steps;
step[2] = (ends[1].b - ends[0].b) / steps;
}
function mixPalette() {
var steps = parseInt(document.getElementById('steps').value);
var count = steps + 1;
palette[0] = new Color(ends[0].r, ends[0].g, ends[0].b);
palette[count] = new Color(ends[1].r, ends[1].g, ends[1].b);
for (i = 1; i < count; i++) {
var r = (ends[0].r + (step[0] * i));
var g = (ends[0].g + (step[1] * i));
var b = (ends[0].b + (step[2] * i));
palette[i] = new Color(r, g, b);
}
for (j = count + 1; j < 12; j++) {
palette[j].text = '';
palette[j].bg = 'white';
}
}
function drawPalette() {
stepCalc();
mixPalette();
for (i = 0; i < 12; i++) {
colorPour('pal', i);
}
updateHash();
}
function setCursor(n) {
cursor = n;
var obj1 = document.getElementById('col0');
var obj2 = document.getElementById('col1');
obj1.style.backgroundColor = '';
obj2.style.backgroundColor = '';
if (cursor >= 0 && cursor <= 1) {
document.getElementById('col' + cursor).style.backgroundColor = '#FF9';
}
}
function colorIns(c) {
var obj = document.getElementById('col' + cursor);
var result = colorParse(c, 'hex');
ends[cursor] = new Color(result[0], result[1], result[2]);
obj.value = ends[cursor].text;
if (ends[cursor].valid == 'y') {
colorPour('col', cursor)
}
updateHash();
}
function setType(inp) {
colType = inp;
if (inp == 'hex') {
base = 16;
} else {
base = 10;
}
for (i = 0; i < 2; i++) {
var obj = document.getElementById('col' + i);
if (ends[i].valid == 'y') {
ends[i] = new Color(ends[i].r, ends[i].g, ends[i].b);
obj.value = ends[i].text;
}
}
document.getElementById('hex').className = '';
document.getElementById('rgbd').className = '';
document.getElementById('rgbp').className = '';
document.getElementById(inp).className = 'coltype';
drawPalette();
}
function hashChange() {
init(1);
}
function init(inp) {
document.getElementById('steps').value = '0';
if (!inp) {
obj = GetElementsWithClassName('a', 'coltype');
inp = obj[0].id;
window.location.hash = '::1:' + colType;
}
for (i = 0; i < 2; i++) {
ends[i] = new Color;
document.getElementById('col' + i).value = '';
document.getElementById('c' + i).style.background = 'white';
}
for (j = 0; j < 12; j++) {
palette[j] = new Color;
document.getElementById('pal' + j).value = '';
document.getElementById('p' + j).style.background = 'white';
}
document.getElementById('col0').focus();
if (window.location.hash) {
hash = window.location.hash.substring(1);
vals = hash.split(":");
if (vals[0]) {
document.getElementById('col0').value = vals[0];
colorStore('0');
}
if (vals[1]) {
document.getElementById('col1').value = vals[1];
colorStore('1');
}
document.getElementById('steps').value = vals[2];
inp = vals[3];
if (vals[0] && vals[1]) drawPalette();
}
setType(inp);
}
</script>
</head>
<body onload="init('hex');">
<form onsubmit="return false;">
<h1>色彩混合器</h1>
<table id="main">
<tr valign="top">
<td id="uicell">
<table id="input">
<tr>
<th>格式</th>
<td colspan="2">
<a onclick="setType('hex');" id="hex" class="coltype">十六进制</a>
<a onclick="setType('rgbd');" id="rgbd">RGB</a>
<a onclick="setType('rgbp');" id="rgbp">RGB%</a>
</td>
</tr>
<tr>
<th id="l1">颜色1</th>
<td class="col"><input type="text" id="col0" size="19" onblur="colorStore('0');"
onfocus="setCursor(0);" /></td>
<td class="pal" id="c0"> </td>
</tr>
<tr>
<th id="l2">颜色2</th>
<td class="col"><input type="text" id="col1" size="19" onblur="colorStore('1');"
onfocus="setCursor(1);" /></td>
<td class="pal" id="c1"> </td>
</tr>
<tr>
<th>中点</th>
<td>
<select id="steps" onchange="updateHash();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr id="gobuttons">
<td></td>
<td>
<a onclick="drawPalette();">混合</a></td>
<td><a onclick="init(0);">清除</a></td>
</tr>
</table>
<table id="output">
<tr>
<th>调色板</th>
<td class="text"><input type="text" id="pal0" size="19" /></td>
<td class="pal" id="p0"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal1" size="19" /></td>
<td class="pal" id="p1"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal2" size="19" /></td>
<td class="pal" id="p2"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal3" size="19" /></td>
<td class="pal" id="p3"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal4" size="19" /></td>
<td class="pal" id="p4"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal5" size="19" /></td>
<td class="pal" id="p5"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal6" size="19" /></td>
<td class="pal" id="p6"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal7" size="19" /></td>
<td class="pal" id="p7"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal8" size="19" /></td>
<td class="pal" id="p8"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal9" size="19" /></td>
<td class="pal" id="p9"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal10" size="19" /></td>
<td class="pal" id="p10"> </td>
</tr>
<tr>
<td></td>
<td class="text"><input type="text" id="pal11" size="19" /></td>
<td class="pal" id="p11"> </td>
</tr>
</table>
</td>
<td id="watercell">
<script type="text/javascript">
var colors = new Array('00', '33', '66', '99', 'CC', 'FF');
document.write('<table cellspacing="0" id="grid">');
for (i = 5; i >= 0; i--) {
for (j = 5; j >= 0; j--) {
document.write('<tr>');
for (k = 5; k >= 0; k--) {
var col = colors[i] + colors[j] + colors[k];
document.write('<td style="background: #' + col + ';"><a href="javascript:colorIns(\'#' + col +
'\');"><\/a><\/td>');
}
document.write('<\/tr>');
}
}
document.write('<\/table>');
</script>
</td>
<td id="textcell">
<ul>
<li>选择一种颜色值格式，以您选择的格式输入两个有效的CSS颜色值，然后选择您想要看到的中点数。调色板将显示您输入的颜色以及所请求的中点颜色数量以及这些颜色的值。</li>
<li>所有数字均四舍五入到最接近的整数。</li>
<li>在“瀑布”显示中单击一个正方形将为突出显示的任何输入填充适当的值。</li>
<li>在值格式之间切换将转换任何适当的值。</li>
<li>“清除”删除所有值和颜色，但不更改当前值格式。</li>
<li>页面的URL随每次更改而更新，因此您可以共享或标记当前显示的颜色，混合步骤和值格式。</li>
<li>如果您想让Color Blender脱机使用，只需查看源并将其保存到硬盘中即可。</li>
</ul>
</td>
</tr>
</table>
</form>
<div id="footer">
<img alt="知识共享许可" border="0" src="01.jpg">
<p>
<br>
Color Blender已根据知识共享署名-相同方式共享1.0许可进行了许可。
</p>
<p>
提供此工具时不提供任何担保，保证或很多解释方式。请注意，使用此工具可能会或可能不会导致浏览器崩溃，锁定计算机，擦除硬盘驱动器或将您藏在“实用工具”文件夹中的那些顽皮照片通过电子邮件发送给母亲。如果您有任何不好的事情发生，请不要怪我，因为这实际上是外星人的错。本文中表达的代码仅是作者的代码，如果您了解我们的意思，那么他对JavaScript的了解也不是太快，因此，任何知道自己正在做的事情的人都可能会感到傻笑。不是飞行玩具。谢谢你来玩。插入硬币以继续。
</p>
</div>
</body>
</html>
浙公网安备 33010602011771号