`
happmaoo
  • 浏览: 4473007 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

极具“杀伤力”的网页调色板

阅读更多

在web站点设计中,对网页进行配色通常是设计师的直觉感受或者多次反复实验:例如对网页颜色主色彩的选择,考虑各种颜色的色调、饱和度,等等...,最终才能达到比较好的配色效果。
现在,网络上有一些专用于配色设计的调色板工具,对网页配色设计都很有价值。
个人觉得,比较好用、非常专业、同时对于网页设计师(更专注于网页配色)非常有帮助的一个在线免费工具 - 我很惊叹这是用Javascript写的:)
http://www.pixy.cz/apps/barvy/index-en.html

简要说明使用方法:
1. 选择基色
在配色前,你需要在左侧的调色板中先选择一个基色(Base color),选择基色也很有讲究,调色

版为我们划分了暖色(warm)和冷色(cold)两种色调,并依此进行了更精确的数值区分(直接对基色

微调按钮进行操作)。

2. 选择配色方案
在Scheme的选择菜单中可以选择多种方案进行配色,具体有:单色配色、对比色配色(基色加补色

)、可调整的对比色配色(可以调整Distance参数对补色进行微调)、双对比色(两个比较接近的

颜色及它们所对应的补色)、类似色(基色和它相接近的颜色)。

a. 单色配色方案(monochromatic):如果整个网页配色由一些单一颜色渐变组成,这个方案是不错

的选择。

b. 对比色配色(contrast):原理是为基色增加与其色差比较大的几种对比色。如果整个网页的色

彩反差比较大,并且形成反差的颜色数量不是很多,推荐用这种方案。

c. 可调整的对比色配色(soft contrast):参照b方案,可以进一步调整各对比色与基色的色差

,方法是调节Distance参数。

d. 双对比色(double contrast):两个比较接近的颜色及它们所对应的对比色(4个一组),为

基色增加一个相近颜色,同时调节出这两种颜色的对比色,如果将Distance调节至0,将只看到2个

一组的对比色,随着Distance的增加,会逐渐显现4个一组 - 两对对比色。

e. 类似色(analogic):与基色比较接近的各种颜色,推荐色彩比较柔和、反差不明显的网页使用

3.自定义基色的色调(Hue)、饱和度(Saturation)、亮度(Brightness)

对这些选项进行微调后,所配置的方案颜色会起到相应变化。

4.在最底部的select选择器中,你可以特别地为色盲设计的相应的配色方案.

5.选择WebColors后,使配出的颜色更符合网页用色!

6.除此之外,点击free editor按钮,进行自由配色。

接着,我再推荐一些调色版的相关链接,有兴趣的朋友可仔细琢磨一下:
http://www.colormatch.dk/
http://slayeroffice.com/tools/color_palette/
http://kohaistyle.com/scripts/quickcolor http://www.easyrgb.com/harmonies.php
http://www.stcsig.org/usability/topics/colorblind.html
http://color.twysted.net
http://www.coolhomepages.com/cda/color
http://www.masternewmedia.org/2003/04/30/

how_to_select_perfectly_matching_color_combinations.htm
http://dev.sessions.edu/ilu/ilu_1.html http://www.technetguru.com/design
http://www.mundidesign.com/webct
http://graphicdesign.about.com/library/color/blweb2.htm
http://www.pourpre.com/chromograf/en/
http://www.webwhirlers.com/colors/wizard.asp

最后, 如果你觉得我推荐的调色板好用或者还不错的话,请不要忘记在注释中评论。

分享到:
评论

相关推荐

    7个极具杀伤力的Linux命令大全

    ### 7个极具杀伤力的Linux命令详解 在日常使用Linux的过程中,了解并掌握一些潜在高风险的命令是非常重要的,这不仅能帮助我们避免误操作,还能加深对Linux系统内部机制的理解。本文将详细介绍七个极具破坏性的...

    7个极具杀伤性的Linux命令.php

    7个极具杀伤性的Linux命令 .php

    小心七个极具杀伤性的Linux系统命令

    本文将详细介绍七个具有极高破坏力的Linux系统命令,并解释其可能造成的严重后果,以便用户能更好地理解和防范。 1. rm -rf /* 这个命令用于删除文件或目录,其中-rf是递归(recursive)和强制(force)的缩写。这...

    初中语文文摘人生“早恋”的杀伤力

    这篇文章主要讲述了初中时期“早恋”带来的影响,以及这种社会现象在青少年心理和生活中的杀伤力。以下是一些关键知识点: 1. **早恋的社会观念**:文章中提到,当时“早恋”被视为如同“吸毒”一样的严重问题,...

    公路的过度杀伤力-威斯康星州高速公路上的大问题,即使驾驶下降-2013.5-外文-报告资料.pdf

    公路的过度杀伤力-威斯康星州高速公路上的大问题,即使驾驶下降-2013.5-外文-报告资料.pdf

    初中语文文摘生活跨界的杀伤力

    总结来说,跨界现象反映了现代社会的开放性和多元性,它打破了传统的行业壁垒,激发了人们的潜能,也为社会带来了新的活力和创造力。无论是对于个人成长,还是对于社会进步,跨界都具有深远的影响。

    市场杀伤力:让软文创作来延伸.doc

    软文的定义是介于新闻和广告之间的文本,它巧妙地融合了两者的特点,以看似中立的叙述方式传递产品的信息和价值,从而吸引消费者的注意力并影响其购买决策。 软文的核心价值在于其传播的贴近性和产品诉求的煽动性。...

    论文研究 - of的细胞毒性,抗菌和抗氧化性能。

    分别通过盐水虾杀伤力生物测定法,圆盘扩散法和DPPH自由基清除法测定细胞毒性,抗菌,抗氧化活性。 分离出的化合物被鉴定为类固醇(豆固醇),对Vero细胞系具有明显的细胞毒性作用。 粗提物及其馏分(CD8-CD12)在...

    电影网站源码模板php版v1.0

    源码是php的 941看电影网源码和其他电影网站模板不同之处, 网站播放视频无需安装任何播放器,打开页面就能播放!... 2、更具杀伤力的是网站不需要几十上百G的空间就可以发布电影!因为电影都是直接使用迅雷链

    1KB专杀工具

    【标题】:“1KB专杀工具”指的是针对特定的1KB大小的计算机病毒设计的清除软件,这种病毒可能被称为“暴风1号”。在信息技术领域,病毒是恶意软件的一种,它们通常通过网络传播,意图破坏用户的系统、窃取敏感信息...

    手机应用开发商:项目成功的十个要诀

    :究竟怎样才能打造一款极具杀伤力的手机应用呢?好创意、用心、正确的决策和大量的运气因素当然必不可少,但后来者也同样能够通过借鉴一些前人总结出的经验,推出一款出色的产品。在竞争日益激烈的手机应用市场中,...

    天基自由电子激光的杀伤力可能增加

    87年二月下旬,斯坦福大学的一个小组和TEW的科学家将一台自由电子激光器运转于可见光波长,证明天基激光杀伤力可能增加。

    Hello-Github-C64:你好世界-6502过度杀伤力版本

    你好世界-6502过度杀伤力版本 这只是一条简单的滚动消息,.ASM文件中的sprites affair事务已针对ACME交叉汇编器进行了格式化,可以从以及音乐的二进制文件下载该文件。 Sprite数据和Sprite数据在“二进制”中,而...

    电影源码 电影网站源码模板

    2、更具杀伤力的是网站不需要几十上百G的空间就可以发布电影!因为电影都是直接使用迅雷链接和电驴链接直接播放的。不需要存储视频文件。可以大大节省空间! 3、还有一大好处是可以实现点播功能!使用迅雷链接或电驴...

    分析小米手机的网络营销策略[汇编].pdf

    - **1999元定价**:1999元的价格对一款高配手机极具性价比,对目标用户极具杀伤力。不过,这样的定价策略没有留出降价空间,可能限制了未来的市场调整灵活性。 3. 促销与推广: - **情感与功能性诉求**:小米在...

    pistaccio:Aouth0 PusherReact过度杀伤力

    该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 ...met

    一种防止分水岭过分割的方法

    - **极大值点检测**:在二值图像中,极大值点通常位于目标区域内。因此,可以通过检测这些极大值点来进行标记,这一步骤有助于定位目标区域并避免过分割。 - **分水岭变换应用**:在完成预处理和目标区域定位之后,...

Global site tag (gtag.js) - Google Analytics