颜色搭配器

最新推荐文章于 2022-11-20 04:29:54 发布
最新推荐文章于 2022-11-20 04:29:54 发布
阅读量110 收藏
点赞数
分类专栏： 前端开发-javascript 文章标签： 360 C# C++ C JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7451/article/details/82032008
版权

<!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 οnmοuseup="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>

iteye_7451
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
颜色搭配器 （html）版 ，配色的好助手
07-01
颜色搭配器 （html）版 ，配色的好助手
颜色搭配器-该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色
02-21
该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色（你也可以点击后边的5个色块，将该色设为主色，得到另一个配搭方案）！接下来你只需复制对应颜色的色标（如：#E66000）到“自定义颜色”中即可拥有一个全新的Mypoco漂亮皮肤！
颜色搭配器，调出你喜欢的颜色！
11-27
颜色搭配器，调出你喜欢的颜色！ 颜色搭配器，调出你喜欢的颜色！
Arcgis使用教程（十）ARCGIS地图制图之基于颜色搭配器的地图颜色配色
热门推荐
soderayer的博客
04-15 1万+
1.颜色搭配器选择 直接在网上搜索颜色搭配网站 1）颜色搭配网站 选择蓝紫色为基色，自动配置为7中不同颜色 配色方案有几种，这里就默认为单色 2.根据颜色搭配器色调修改地图颜色 鼠标双击以下颜色框，弹出颜色选择器. 点击Fill Color右边的颜色框： 点击More Color打开颜色选择器进行颜色设置 颜色模型有CMYK\HSV\RGB三种。 对上面5中地图要素类型选取5种颜色： 这里就选择前面5种吧： 330099、8866CC、BFACE6、392
网页颜色搭配表及颜色搭配技巧
nukix
11-20 1403
本文主要介绍网页颜色的一些搭配技巧， 只提供建议。
色彩搭配
hzp666的博客
04-11 1650
颜色搭配：http://www.icoa.cn/a/512.html 渐变色:http://www.mgzxzs.com/tmtbzxjc/2366.html ================================================================== 做设计的朋友，特别是新手，很难掌握色彩的搭配。比如我自己就有时候调的颜色感觉不太舒服。从...
html 颜色五光十色,页面色彩搭配基础知识.PDF
weixin_39617318的博客
06-29 460
页面色彩搭配基础知识.PDF第 本章导读每个人都生活在五光十色的色彩环境中，难以想象没有色彩的世界将是一个什么样子。人们除了享受到自然界的缤纷色彩之外，也正在运用各种色彩美化着生活。本章介绍与网页色彩相关的基础知识，包括什么是色彩的原理、色彩的分类、色彩的三要素和色彩5 模式，以及色调分析。章 技术要点页面色彩 ◆ 色彩的原理◆ 色彩的分类搭配基础 ◆ ...
UI-网页设计-色彩搭配
水滴的专栏
11-25 1502
色彩
2010 ps颜色搭配器
08-31
2010 ps颜色搭配器2010 ps颜色搭配器2010 ps颜色搭配器
经典配色软件（颜色搭配）
02-22
可以帮住网站开发人员进行配色，帮你跳出和谐相配的颜色！
网页颜色的搭配技巧
lu_tu_zhong的专栏
07-02 2177
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。       一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使
好看的颜色搭配
半夏微凉的博客
07-06 915
Python plot 颜色搭配
效果图色彩与色彩搭配原理
w4v6nz6n的博客
02-25 282
效果图制作有一些基本的相关知识，比如色彩、灯光、投影、构图和一些常见的设计风格，掌握这些对将效果图做的更“美”有很大帮助，今天我们就来了解下效果图基本知识点：色彩与色彩搭配。 色彩 色彩是室内设计中最重要的元素之一，按照其基本属性主要分为色相、明度与纯度。 1.色相 色相是指颜色的基本相貌，它是色彩的首要特性。基本色相包括：红、橙、黄、绿、蓝、紫。在这些基本色相中再加入中间色，便构成24个色相的色相环，如下所示。 2.明度 明度是指色彩的明亮程度。明度不仅表现为物体的明暗程度.
html颜色设计,网页设计中经典色彩搭配方案
weixin_35046650的博客
06-09 3119
在品牌设计配色方案当中，有写颜色搭配可称之为经典搭配。今天我们主要分享以黑色为主，分别推荐黑色与金色、黑色与白色、黑色与红色、黑色与黄色四组经典配色方案。通过一些品牌VI设计、网页设计等作品来讲解。黑色与金色搭配 / Web Design Black & Gold-黑色与金色搭配，更奢华，更大气，更有古朴文化气息。品牌设计 / 工作识别系统品牌设计 / 工作识别系统品牌网页设计 / 婚纱行...
|在线色彩搭配器|
俊哥
09-08 1036
1。 Color scheme 汉化版 链接地址：http://www.cnhyy.com/color/ 简单介绍：在众多色彩搭配器中..我最喜欢的一个..原因是颜色全面..搭配种类详细..操作很简单..! 2。颜色搭配器 链接地址：http://my.poco.cn
table tr 拖动排序插件jquery.tablednd.js
快乐向日葵
07-30 2152
&lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://isocra.com/js/jquery.tablednd.js"&gt;&lt;/script&gt; &a
如何判断鼠标滚轮在动以及滚动方向
快乐向日葵
01-14 1572
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function handle(delta) {    var s = delta + ": ";    if (delta &lt;0)        s += "您在向下滚……";    else        s += "您在向上滚……";   
matplotlib颜色搭配
最新发布
04-03
Matplotlib有许多不同的颜色搭配，包括以下几种: 1. 颜色名称:可以使用颜色名称来指定颜色，如'red'、'green'、'blue'等。 2. RGB值:可以使用RGB值来指定颜色，如(1,0,0)代表红色，(0,1,0)代表绿色，(0,0,1)代表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值