`

颜色搭配器

360C#C++CJavaScript 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>颜色搭配器</TITLE>
  <META http-equiv=Content-Type content="text/html; charset=utf-8">
  <META content="MSHTML 6.00.5730.13" name=GENERATOR>
  <STYLE type=text/css>
BODY {
 FONT-SIZE: 9pt;
 WORD-BREAK: break-all;
 FONT-FAMILY: "Tahoma", "Arial", "新宋体", "宋体";
 MARGIN-TOP: 15px;
 MARGIN-BOTTOM: 15px
 MARGIN-left: 30px;
 MARGIN-top: 30px
 FONT: 11px tahoma;
 COLOR: #555555;
 background-color:#e6e6e6;
}

.s {
 BORDER-RIGHT: 1px inset;
 BORDER-TOP: 1px inset;
 BORDER-LEFT: 1px inset;
 WIDTH: 50px;
 BORDER-BOTTOM: 1px inset;
}

.s2 {
 BORDER-RIGHT: 1px outset;
 BORDER-TOP: 1px outset;
 LEFT: 1px;
 BORDER-LEFT: 1px outset;
 WIDTH: 19px;
 BORDER-BOTTOM: 1px outset;
 POSITION: absolute;
 TOP: 1px;
 HEIGHT: 19px;
 BACKGROUND-COLOR: #e6e6e6;
}

.t2 {
 FONT: bold 36px verdana;
}
</STYLE>
  <SCRIPT language=JavaScript>
  var mover = moveg = moveb = moveh = 0;
var hs = new Object();
var rg = new Object();
rg.r = rg.g = rg.b = 0;
function click(x, s) {
 if (x < 10) {
  x = 10
 };
 if (x > 265) {
  x = 265
 }
 x -= 10;
 eval("h" + s + ".style").left = x + 1;
 eval("rg." + s + "=" + x);
 rg2hs(rg);
 ud("0", rg);
 sw.style.backgroundColor = "rgb(" + rg.r + "," + rg.g + "," + rg.b + ")";
 dom();
}
function bclick(s) {
 x = window.event.offsetX + eval("h" + s + ".style.pixelLeft-1");
 click(x, s);
}
function sc(s) {
 x = window.event.offsetX;
 click(x, s);
}
function movee(s) {
 eval("move" + s + "=0")
}
function rc(x, m) {
 if (x > m) {
  return m
 }
 if (x < 0) {
  return 0
 } else {
  return x
 }
}
function rg2hs(rg) {
 m = rg.r;
 if (rg.g < m) {
  m = rg.g
 };
 if (rg.b < m) {
  m = rg.b
 };
 v = rg.r;
 if (rg.g > v) {
  v = rg.g
 };
 if (rg.b > v) {
  v = rg.b
 };
 value = 100 * v / 255;
 delta = v - m;
 if (v == 0.0) {
  hs.s = 0
 } else {
  hs.s = 100 * delta / v
 };
 if (hs.s == 0) {
  hs.h = 0
 } else {
  if (rg.r == v) {
   hs.h = 60.0 * (rg.g - rg.b) / delta
  } else if (rg.g == v) {
   hs.h = 120.0 + 60.0 * (rg.b - rg.r) / delta
  } else if (rg.b = v) {
   hs.h = 240.0 + 60.0 * (rg.r - rg.g) / delta
  }
  if (hs.h < 0.0) {
   hs.h = hs.h + 360.0
  }
 }
 hs.v = Math.round(value);
 hs.h = Math.round(hs.h);
 hs.s = Math.round(hs.s);
 return (true);
}
function rg2html(z) {
 return "#" + d2h(z.r) + d2h(z.g) + d2h(z.b);
}
function d2h(d) {
 hch = "0123456789ABCDEF";
 a = d % 16;
 b = (d - a) / 16;
 return hch.charAt(b) + hch.charAt(a);
}
function c2r(d) {
 k = window.event.srcElement.style.backgroundColor;
 j = (k.substr(4, k.indexOf(")") - 4)).split(",");
 click(parseInt(j[0]) + 10, "r");
 click(parseInt(j[1]) + 10, "g");
 click(parseInt(j[2]) + 10, "b");
}
function h2r(hs) {
 var rg = new Object();
 if (hs.s == 0) {
  rg.r = rg.g = rg.b = Math.round(hs.v * 2.55);
  return rg;
 }
 hs.s = hs.s / 100;
 hs.v = hs.v / 100;
 hs.h /= 60;
 i = Math.floor(hs.h);
 f = hs.h - i;
 p = hs.v * (1 - hs.s);
 q = hs.v * (1 - hs.s * f);
 t = hs.v * (1 - hs.s * (1 - f));
 switch (i) {
  case 0 :
   rg.r = hs.v;
   rg.g = t;
   rg.b = p;
   break;
  case 1 :
   rg.r = q;
   rg.g = hs.v;
   rg.b = p;
   break;
  case 2 :
   rg.r = p;
   rg.g = hs.v;
   rg.b = t;
   break;
  case 3 :
   rg.r = p;
   rg.g = q;
   rg.b = hs.v;
   break;
  case 4 :
   rg.r = t;
   rg.g = p;
   rg.b = hs.v;
   break;
  default :
   rg.r = hs.v;
   rg.g = p;
   rg.b = q;
 }
 rg.r = Math.round(rg.r * 255);
 rg.g = Math.round(rg.g * 255);
 rg.b = Math.round(rg.b * 255);
 return rg;
}
function ps(x) {
 document
   .write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'
     + x + '" onClick="c2r()" title="点击选择为主颜色"></div></td>');
}
function ph(x) {
 document.write('<td><div class=t id="hc' + x + '">#000000</div></td>');
}
function ud(x, c) {
 eval("sw" + x).style.backgroundColor = "rgb(" + c.r + "," + c.g + "," + c.b
   + ")";
 eval("hc" + x).innerHTML = rg2html(c)
}
function pl(t, c, l) {
 document
   .write('<div style="position:absolute;left:30;top:'
     + t
     + ';background-color:black"><div class=s style="width:276;height:21;background-color:'
     + c
     + ';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'
     + l + '=1;sc(\'' + l + '\');" onMouseMove="if(move' + l
     + '==1){sc(\'' + l + '\');}"></div><div class=s2 id=h' + l
     + ' onMouseDown="move' + l + '=1;bclick(\'' + l
     + '\');" onMouseUp="movee(\'' + l
     + '\');" onMouseMove="if(move' + l + '==1){bclick(\'' + l
     + '\');}"></div></div>')
}
function dom() {
 z = new Object();
 y = new Object();
 yx = new Object();
 y.s = hs.s;
 y.h = hs.h;
 if (hs.v > 70) {
  y.v = hs.v - 30
 } else {
  y.v = hs.v + 30
 };
 z = h2r(y);
 ud("1", z);
 if ((hs.h >= 0) && (hs.h < 30)) {
  yx.h = y.h = hs.h + 20;
  yx.s = y.s = hs.s;
  y.v = hs.v;
  if (hs.v > 70) {
   yx.v = hs.v - 30
  } else {
   yx.v = hs.v + 30
  }
 }
 if ((hs.h >= 30) && (hs.h < 60)) {
  yx.h = y.h = hs.h + 150;
  y.s = rc(hs.s - 30, 100);
  y.v = rc(hs.v - 20, 100);
  yx.s = rc(hs.s - 70, 100);
  yx.v = rc(hs.v + 20, 100);
 }
 if ((hs.h >= 60) && (hs.h < 180)) {
  yx.h = y.h = hs.h - 40;
  y.s = yx.s = hs.s;
  y.v = hs.v;
  if (hs.v > 70) {
   yx.v = hs.v - 30
  } else {
   yx.v = hs.v + 30
  }
 }
 if ((hs.h >= 180) && (hs.h < 220)) {
  yx.h = hs.h - 170;
  y.h = hs.h - 160;
  yx.s = y.s = hs.s;
  y.v = hs.v;
  if (hs.v > 70) {
   yx.v = hs.v - 30
  } else {
   yx.v = hs.v + 30
  }
 }
 if ((hs.h >= 220) && (hs.h < 300)) {
  yx.h = y.h = hs.h;
  yx.s = y.s = rc(hs.s - 60, 100);
  y.v = hs.v;
  if (hs.v > 70) {
   yx.v = hs.v - 30
  } else {
   yx.v = hs.v + 30
  }
 }
 if (hs.h >= 300) {
  if (hs.s > 50) {
   y.s = yx.s = hs.s - 40
  } else {
   y.s = yx.s = hs.s + 40
  }
  yx.h = y.h = (hs.h + 20) % 360;
  y.v = hs.v;
  if (hs.v > 70) {
   yx.v = hs.v - 30
  } else {
   yx.v = hs.v + 30
  }
 }
 z = h2r(y);
 ud("2", z);
 z = h2r(yx);
 ud("3", z);
 y.h = 0;
 y.s = 0;
 y.v = 100 - hs.v;
 z = h2r(y);
 ud("4", z);
 y.h = 0;
 y.s = 0;
 y.v = hs.v;
 z = h2r(y);
 ud("5", z);
}
  </SCRIPT>
 </HEAD>
 <BODY onmouseup="mover=moveg=moveb=0;">
  <DIV style="WIDTH: 400px">
   <SPAN class="t2">颜色搭配器</SPAN>
   <BR>
   <BR>
   该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色
   （你也可以点击后边的5个色块，将该色设为主色，得到另一个配搭方案）！
   接下来你只需复制对应颜色的色标（如：#E66000）
   到你需要设置的地方就ok拉,做整体UI搭配的时候就有了理论基础拉，哈哈！
   <BR>
   <BR>
   <B>我喜欢的主色调:<BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>
    <BR>下面是6种搭配的颜色:
  </DIV>
  <SCRIPT>pl(170,"red","r");pl(200,"green","g");pl(230,"blue","b")</SCRIPT>
  <DIV class="s" id="sw"
   style="LEFT: 316px; WIDTH: 82px; POSITION: absolute; TOP: 170px; HEIGHT: 81px; BACKGROUND-COLOR: black"></DIV>
  <DIV style="LEFT: 20px; POSITION: absolute; TOP: 290px">
   <TABLE cellSpacing="10" cellPadding="0">
    <TBODY>
     <TR>
      <SCRIPT>ps(0);ps(1);ps(2);ps(3);ps(4);ps(5);</SCRIPT>
     </TR>
     <TR>
      <SCRIPT>ph(0);ph(1);ph(2);ph(3);ph(4);ph(5);</SCRIPT>
     </TR>
    </TBODY>
   </TABLE>
  </DIV>
 </BODY>
</HTML>

分享到：
| 如何让iframe透明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    2010 ps颜色搭配器

    总的来说，了解并熟练掌握Photoshop 2010的颜色搭配器不仅能够提高设计效率，还能确保设计作品具有专业且引人注目的色彩搭配。通过不断实践和尝试，设计师可以发掘出更多个性化的色彩方案，从而在众多设计中脱颖而出...

    颜色搭配器，调出你喜欢的颜色！

    颜色搭配在设计领域中起着至关重要的作用，它能够影响作品的整体视觉效果，传达特定的情感，甚至引导用户的注意力..."颜色搭配器.mht"这样的资源为用户提供了探索和实践色彩搭配的平台，是提高色彩应用技巧的有效途径。

    网页制作者颜色搭配器

    网页制作者颜色搭配器是一种非常实用的工具，它专为网页设计师设计，旨在简化颜色选择过程，提升网页设计效率和视觉效果。颜色搭配是网页设计中的关键环节，它能够直接影响到用户对网站的第一印象和整体体验。良好的...

    最好用的色彩搭配器对美工设计很有用

    一个优秀的色彩搭配器是设计师不可或缺的工具，它可以帮助设计师轻松地创建出协调且富有创意的配色方案。"最好用的色彩搭配器"无疑是为了满足设计师对高效、精准配色的需求。 色彩搭配器的核心功能通常包括以下几个...

    颜色搭配器 （html）版 ，配色的好助手

    总的来说，颜色搭配器（HTML版）是一个强大的工具，它结合了HTML、CSS和JavaScript的技术，使得网页设计者能够在没有专业图形设计软件的情况下也能轻松地进行色彩搭配。无论你是初学者还是经验丰富的设计师，熟练...

    Javascript颜色搭配器

    颜色搭配器用javascript写的，感觉不错；可以看一看

    颜色搭配器5464565

    颜色搭配器5464565463452456456546546

    网页颜色搭配器。很实用的哟、

    这是一款可以在网页制作中搭配网页主色调的颜色搭配器。

    各种色彩搭配-色彩搭配手册

    在“各种色彩搭配-色彩搭配手册”中，我们将会深入探讨色彩理论，学习如何通过色彩搭配来提升设计作品的吸引力和专业性。 色彩理论是建立在色彩心理学、光学原理以及艺术传统基础上的学科。它主要研究颜色如何相互...

    颜色搭配器-该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色

    该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色（你也可以点击后边的5个色块，将该色设为主色，得到另一个配搭方案）！接下来你只需复制对应颜色的色标（如：#E66000）到“自定义颜色”中即可拥有一个...

    颜色搭配器htm源码

    该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色（你也可以点击后边的5个色块，将该色设为主色，得到另一个配搭方案）！接下来你只需复制对应颜色的色标（如：#E66000）到“自定义颜色”中即可拥有一个...

    css 颜色搭配技巧

    ### CSS颜色搭配技巧详解 ...掌握以上提到的颜色搭配技巧和色彩象征，可以帮助设计师更好地完成各种设计任务。在实际操作过程中，还需要根据具体的设计需求和个人创意来进行灵活调整，以达到最佳的设计效果。

    超全面专业的图彩颜色搭配资料 颜色搭配 色卡

    颜色之间的相互关系和组合形成了色彩搭配的基础。 在配色.doc文档中，可能详细介绍了不同的配色原则，如互补色搭配（位于色轮相对位置的颜色，如红与绿、蓝与橙）、类比色搭配（相邻或相近的颜色，如红、橙、黄）...

    最舒服的颜色搭配+色卡

    在网页设计领域，色彩搭配是至关重要的一个环节，它直接影响着用户的视觉体验和情感感知。一个优秀的颜色搭配能够提升网站的美观度，增强品牌形象，同时也能引导用户更好地理解和使用网站功能。"最舒服的颜色搭配+...

    色彩搭配组合专用表

    色彩搭配是视觉艺术中至关重要的一个环节，它不仅关乎到作品的美观，还能够传达情感、营造氛围。在艺术创作，尤其是绘画中，正确的色彩搭配能够使作品更具吸引力，更能打动观众的心。"色彩搭配组合专用表"为初学者...

    颜色搭配，最舒服的颜色搭配

    颜色搭配有多种方式，如单色调搭配（使用同一颜色的不同深浅）、类似色调搭配（选择相近的颜色）、互补色调搭配（位于色轮对立面的颜色，如红与绿）、分割互补色调搭配（互补色的两个邻色）等。每种搭配都有其独特的...

Magicbox
Global site tag (gtag.js) - Google Analytics