Web开发人员的基本色彩理论

2025-05-25

Web开发人员的基本色彩理论

你很难找到一堂没有挂在墙上的色轮的美术课。如果你上过美术课,你可能已经通过自己制作色轮的方式接触过颜料和调配颜料。

你应该已经学过原色和间色了。如果你小学毕业后继续学习美术,甚至可能学到三次色。

但是,除非您在高中或更高水平上学习过艺术,否则您可能没有意识到色轮是展示色彩理论、混合颜色的实践和特定颜色组合的研究的最简单方法。

但是色彩理论是什么?

简史:当爱德华·马奈、埃德加·德加和克劳德·莫奈(您可能听说过他们)等印象派画家开始尝试捕捉光线而不是完美的相似性时,色彩理论应运而生。

莫奈的干草堆

简而言之:这取决于人眼如何将光波转化为颜色。匹配的颜色具有相似或互补的光波。

色彩理论可以深入研究光波的科学原理,以及颜色为何呈现出不同的颜色。然而,就本文而言,我们将重点讨论以下问题:

  • 为什么某些颜色要匹配?
  • 我如何选择“正确”的颜色?

配色似乎是“要么有,要么没有”的事情。或者说,设计网页或应用程序时,最耗时、最痛苦的部分就是确定背景到底用哪种绿色。

无论您遇到什么与颜色相关的问题,都可以参考以下小抄:

第一级:单色

单色只是一种颜色的一种或多种色调。

在 WebDev 中:这是选择单个十六进制代码并使其变亮或变暗而不影响色调。

这是给网页着色最简单的方法。Facebook和Twitter等网站充分利用了(大部分)单色的配色方案。黑色、白色和天蓝色,正是这种配色方案让这些社交媒体应用如此易于使用。

唯一的区别颜色来自用户的头像、链接和照片,这些颜色对于常客来说很容易识别,从而可以轻松地找到他们喜欢的帐户的帖子。

如果 Twitter 的网页上有更多的颜色,那么区分不同的帖子以及谁发布了什么内容就会变得更加困难。

通常,即使您想要多种颜色,最好也使用一种主颜色 - 作为背景颜色或主标题颜色。

专业提示:如果您的网页是单色的,请确保每种色调都易于区分。否则,如果用户无法阅读文字或区分网页元素,您的网页可能不够友好。

第二级:互补色

但是,如果你想要的不仅仅是不同深浅的橙色呢?如果你想让链接脱颖而出,但又不与导航栏或背景颜色冲突,该怎么办?

如果我们遵循基本的色彩理论,选择一种颜色来立即强调的最佳方法之一就是寻找一种互补色。

在色轮的正对面可以找到另一种颜色的互补色。

每种原色都对应一种色作为其补色。记住要匹配哪些颜色的一个简单方法是,间色与它不使用的原色相匹配。例如:红色的补色是绿色,它由蓝色和黄色组成。

专业提示:一次添加一种颜色,并保持简洁。不要为了完整的彩虹色而牺牲干净易用的布局。否则,你可能会意外地模仿 90 年代的经典网站,就像这样

升级

随着你对不断提升的设计技能越来越得心应手,不妨大胆挑战一下极限。色彩永远不应该成为一件令人畏惧的工作。要时刻留意那些能够巧妙运用色彩的开发人员和设计师。问问自己喜欢它什么,不喜欢它什么,以及原因。这就是你打造自己品味和品牌的方式。

WebDev Hack

创建颜色组合/调色板,并准备好它们的十六进制代码/RBG 编号。或者,如果您喜欢 SASS,可以将它们存储在文件中,以便在更大的项目中导入。尤其如果您的工作是创建结构,而不是外观(外观由其他人、客户或经理决定),那么只需将这些颜色视为使网站易于查看的占位符即可。

只需确保:

  • 一切都是可读的。
  • 链接、标题以及任何您想要强调的内容显然与纯文本不同。
  • 用户可以轻松辨别网页的不同部分(即导航栏、主要内容、单独的文章等)。

在线工具

感谢Doug R. Thomas, Esq.提供以下链接:

继续阅读

希望读完这篇文章后,为您的网站、页面或应用选择颜色或调色板不再那么困难。如果您对此主题感兴趣,我强烈建议您阅读更多相关内容。我们只是略微介绍了一些皮毛,但您可以深入了解色相、阴影等等

归根结底,色彩的选择没有“错误”的答案,尤其是在为自己打造项目时。很多人认为品味是与生俱来的,但实际上,它需要从成功的设计中汲取灵感,尝试不同的搭配,最终找到最适合你和你品牌的方案。祝你好运,尽情发挥你的创造力吧!

文章来源:https://dev.to/nikacodes/basic-color-theory-for-web-developers-15a0
PREV
5 个适用于您项目的出色 API
NEXT
如何快速掌握一门编程语言🔥