网页配色:如何巧用色彩打造动人心弦的网页设计

3、文本色——白色的文本与黑色的底色形成明显的对比，从整体配色方案上来看也非常搭调。另外和文字搭配的线条图标也采用了同样的白色，在色彩上采用了高度一致的方案，露头的文本暗示用户需要向下滚动。

总体上来说，整套设计方案还不错，中规中矩的黑白配，加上红色之后，就显得活泼起来了。由于红色的使用相当之可知，稍加点缀，不会显得过犹不及，这一切让整个配色脱颖而出。让整个配色脱颖而出。

棕色通常能给人以自然的感觉，但是这种色彩通常都不为男性所喜。但是在有的场合，棕色能让人产生可靠和安全的感觉，这个时候使用还是挺不错的。

作为一家著名的物流公司，UPS使用棕色能给用户一种强烈的可被依赖的感觉。

但是作为怀俄明州大学橄榄球队的队服的用色，这套配色方案被评为史上最差的设计方案。最有趣的地方在于，这套棕色的队服大家一致认为它非常的耐用，但是与此同时也 非常的难看。男性对于色彩的认知在这一设计上体现得淋漓尽致。

在女性用户这边，橙色也是相对不那么受欢迎的色彩，所以，如果你的客户是女性的话，尽量避免这一点。

当然，这些规则大都是一些指引性的条目，它们通常都有上下文和使用场景，色彩只有和谐搭配起来才会看起来漂亮而合用。

用现成的配色方案和调色板其实理所当然的事情，你并不需要为网页设计或者UI设计方案单独创造色轮。

Adobe Color CC – Adobe出品的配色工具，之前被称为Kuler。

Paletton – 这是一套为初学者准备的取色工具。

Flat UI Color Picker – 这是一套扁平化配色工具

Mudcube Color Sphere – 内置了一系列色彩主题，相应的配色都包含了相应的HEX代码。

Check My Colours – 这个工具是用来坚持前景和背景的色彩组合的，它能提供正确的对比度检测，确保色盲用户也能正常分辨色彩。

Color – 这个工具允许你用鼠标在屏幕上取色，设置饱和度，并且提供相应的HEX代码。

网络上有成千上网的网站，其中有许多不错的站点，但是绝大部分和优秀无关。不过下方的网站，正式优秀的那波中的一员，它曾荣获Awwwards 的每日最佳网站的头衔。

网站的背景色使用的是浅灰，同其中电动车的配色同系。整个页面设计简单，超大的字体和小巧的车体形成对比，传达出电动车小巧灵活的特性。作为中性色的灰色，让页面中其他的色彩更加鲜艳也更加显眼，对比明显，也赋予了页面以活力。同时，灰色的主色调，也强调了产品和品牌沉稳大气的一面。

巨大的Go，配色开朗活泼，渐变和鲜亮充分展现了设计的现代性。很重要的一点是，蓝色是男性和女性都非常喜欢的色彩，这一点使得网站是不针对性别进行区别的。灰色还带有克制和环保的特性，结合电动车小巧的设计，整个设计还在暗示产品的环保和安全的特性。

总体而言，这个页面的生活感和现代感和当代都市人的状态契合度非常高。

色彩是产品设计的重要部分，同时也是品牌设计中至关重要的一环。所以，在设计网站或者UI的时候，色彩传达的意义必须同品牌契合，将品牌故事和意义 融入到设计到中来。通常情况下，设计师会直接从品牌的LOGO或者品牌设计指南来取色，尽管这样会有局限，但是这确实可以让事情变得更简单。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!