Web开发人员的基本色彩理论
你很难找到一堂没有挂在墙上的色轮的美术课。如果你上过美术课,你可能已经通过自己制作色轮的方式接触过颜料和调配颜料。
你应该已经学过原色和间色了。如果你小学毕业后继续学习美术,甚至可能学到三次色。
但是,除非您在高中或更高水平上学习过艺术,否则您可能没有意识到色轮是展示色彩理论、混合颜色的实践和特定颜色组合的研究的最简单方法。
但是色彩理论是什么?
简史:当爱德华·马奈、埃德加·德加和克劳德·莫奈(您可能听说过他们)等印象派画家开始尝试捕捉光线而不是完美的相似性时,色彩理论应运而生。
简而言之:这取决于人眼如何将光波转化为颜色。匹配的颜色具有相似或互补的光波。
色彩理论可以深入研究光波的科学原理,以及颜色为何呈现出不同的颜色。然而,就本文而言,我们将重点讨论以下问题:
- 为什么某些颜色要匹配?
- 我如何选择“正确”的颜色?
配色似乎是“要么有,要么没有”的事情。或者说,设计网页或应用程序时,最耗时、最痛苦的部分就是确定背景到底用哪种绿色。
无论您遇到什么与颜色相关的问题,都可以参考以下小抄:
第一级:单色
单色只是一种颜色的一种或多种色调。
在 WebDev 中:这是选择单个十六进制代码并使其变亮或变暗而不影响色调。
这是给网页着色最简单的方法。Facebook和Twitter等网站就充分利用了(大部分)单色的配色方案。黑色、白色和天蓝色,正是这种配色方案让这些社交媒体应用如此易于使用。
唯一的区别颜色来自用户的头像、链接和照片,这些颜色对于常客来说很容易识别,从而可以轻松地找到他们喜欢的帐户的帖子。
如果 Twitter 的网页上有更多的颜色,那么区分不同的帖子以及谁发布了什么内容就会变得更加困难。
通常,即使您想要多种颜色,最好也使用一种主颜色 - 作为背景颜色或主标题颜色。
专业提示:如果您的网页是单色的,请确保每种色调都易于区分。否则,如果用户无法阅读文字或区分网页元素,您的网页可能不够友好。
第二级:互补色
但是,如果你想要的不仅仅是不同深浅的橙色呢?如果你想让链接脱颖而出,但又不与导航栏或背景颜色冲突,该怎么办?
如果我们遵循基本的色彩理论,选择一种颜色来立即强调的最佳方法之一就是寻找一种互补色。
在色轮的正对面可以找到另一种颜色的互补色。
每种原色都对应一种间色作为其补色。记住要匹配哪些颜色的一个简单方法是,间色与它不使用的原色相匹配。例如:红色的补色是绿色,它由蓝色和黄色组成。
专业提示:一次添加一种颜色,并保持简洁。不要为了完整的彩虹色而牺牲干净易用的布局。否则,你可能会意外地模仿 90 年代的经典网站,就像这样。
升级
随着你对不断提升的设计技能越来越得心应手,不妨大胆挑战一下极限。色彩永远不应该成为一件令人畏惧的工作。要时刻留意那些能够巧妙运用色彩的开发人员和设计师。问问自己喜欢它什么,不喜欢它什么,以及原因。这就是你打造自己品味和品牌的方式。
WebDev Hack
创建颜色组合/调色板,并准备好它们的十六进制代码/RBG 编号。或者,如果您喜欢 SASS,可以将它们存储在文件中,以便在更大的项目中导入。尤其如果您的工作是创建结构,而不是外观(外观由其他人、客户或经理决定),那么只需将这些颜色视为使网站易于查看的占位符即可。
只需确保:
- 一切都是可读的。
- 链接、标题以及任何您想要强调的内容显然与纯文本不同。
- 用户可以轻松辨别网页的不同部分(即导航栏、主要内容、单独的文章等)。
在线工具
感谢Doug R. Thomas, Esq.提供以下链接:
- Color.Adobe.com
- WebAIM - 颜色对比度检查器- 确保文本在背景下可读。
- Coblis — 色盲模拟器- 使用色盲过滤器测试布局截图,以确保所有受众都能阅读您的内容。
继续阅读
希望读完这篇文章后,为您的网站、页面或应用选择颜色或调色板不再那么困难。如果您对此主题感兴趣,我强烈建议您阅读更多相关内容。我们只是略微介绍了一些皮毛,但您可以深入了解色相、阴影等等。
归根结底,色彩的选择没有“错误”的答案,尤其是在为自己打造项目时。很多人认为品味是与生俱来的,但实际上,它需要从成功的设计中汲取灵感,尝试不同的搭配,最终找到最适合你和你品牌的方案。祝你好运,尽情发挥你的创造力吧!
文章来源:https://dev.to/nikacodes/basic-color-theory-for-web-developers-15a0