简单易用线上调色工具|Color Scheme Designer|完整、专业

  • A+
所属分类:[图文设计]

虽然我不是专业的视觉设计人员,但是我能想像「配色」的工作在这个领域里所占的地位是多么的重要。因为人类的眼睛对颜色是敏感的,不同的颜色会让人产生不同的心理感受(也就是视觉),所以在一个视觉设计的作品当中,颜色的搭配是可以传答出各种不同的讯息给欣赏的人们。

就拿网页设计来说,网页配色的好坏能影响造访者对这个网页的观感,甚至还能起到是否愿意留下来继续浏览网页的关键作用。但是在成千上万的颜色里,如何选出合适的搭配并不是一件简单的事。就好像画家会在调色盘上面尝试各种颜色的组合,在电脑世界里,也有所谓的调色、配色工具帮助视觉设计人员完成配色的工作。

Color Scheme Designer 是一个免费的线上调色工具,而且不需注册就能使用。它主要是以色环的方式让使用者选择颜色,然后再加上六种不同的配色方案,让使用者可以很容易地调出令人赏心悦目的配色。另外它还能让使用者预览将配色套用在网页上的效果,以及汇出HTML 色码、Photoshop 色票档、随机配色、色盲模拟等功能。

网站地址:http://colorschemedesigner.com/

六种配色方案:

  • Monochromatic(单色配色):以单一颜色做为基础色,再以饱合度、亮度变化出其它搭配的色。因为是属于同一个色系,所以这种配色法较能调配出舒适的色彩感受。
  • Complementary(互补色配色):以主色以及在色环对面的补色调出对比效果明显的配色。
  • Triad(三分色配色):以一个主色以及在色环对面的两个补色组成较为柔合的对比效果。
  • Tetrad(四分色配色):以两个主色以及在色环对面的两个补色营造出一种强烈的视觉效果。
  • Analogic(类似色配色):以一个主色以及在它两旁等距的两个补色调配出给人优雅、简洁的色彩感觉。
  • Accented Analogic(互补类似色配色):以三个类似色为基础,再加上色环对面的一个对比色构成一种既不失优雅又能强调重点的有效配色法。

Color Scheme Designer 使用介绍:

选择配色方案:在左上角选择一个配色方案,依照所选方案的不同,在色环上会有不同数量的圆点,我们可以利用滑鼠拖动圆点改变它们在色环的位置。在色环右边会即时呈现配色的预览图,在预览图的下面有「Light page example(明亮)」以及「Dark page example(暗沉)」可以让我们「模拟」网页套用这个配色之后所产生的效果▼

ColorSchemeDesigner.01_thumb.png

预览网页配色:在网页里面点一下可以交换补色(如果有两个以上的补色)▼

ColorSchemeDesigner.02_thumb.png

调整配色:在色环上选好色调之后,我们可以在「Adjust Scheme」调整颜色的「亮度」和「饱合度」,或是利用「Preset」下拉选单选择一个预设值,像是「Max Contrast」为最高对比的配色;「Pastel」则是粉色配色等▼

ColorSchemeDesigner.03_thumb.png

颜色列表:在「Color List」会列出目前配色的所有颜色加上对应的HTML色码▼

ColorSchemeDesigner.04_thumb.png

汇出色票:右上角的「Export」功能表可以让我们将目前的配色汇出成各种格式的色码表,其中包括Photoshop的ACO色票档和GIMP的GPL色票档▼

ColorSchemeDesigner.05_thumb.png

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: