Skip to main content

了解颜色和Web颜色方案

Beginning Graphic Design: Color (六月 2025)

Beginning Graphic Design: Color (六月 2025)
Anonim
01 of 10

了解颜色和Web颜色方案

您可以将四种基本颜色方案用于网站。本文的每一页都显示了配色方案的图片,以及如何在Photoshop中生成类似的方案。

  • 单色使用相同色调的颜色。它们可能具有不同的色调或色调,具体取决于添加了多少白色或黑色。
  • 类似这使用色轮上彼此接近的颜色。
  • 补充这通常被视为“相反”,因为互补色方案中的两种颜色在色轮上彼此相对。
  • 三元这些颜色在色轮上均匀分布。

所有颜色方案都将使用此黄色作为基色。

02 of 10

单色Web颜色方案

这种配色方案使用我的基色的黄色,并添加一些白色和黑色的色调和相应的阴影方案。

  • 左上角 - 基色#ffe500
  • 右上角 - 添加50%白色填充以获得#fff280
  • 左下方 - 添加了75%的白色填充以获得#fff8bf
  • 右下方 - 添加50%黑色填充以获得#7f7200

在所有配色方案中,单色配色方案通常是最简单的。色调和色调的温和变化使颜色更好地相互流动。使用此配色方案可使您的网站看起来更流畅和收集。

03 of 10

更多单色Web颜色方案

添加了20%黑色的正方形以获得更多颜色。在您的颜色中添加黑色或白色可以为您的调色板创建一种新颜色,而不会弄乱页面的色调。

04 of 10

类比网络配色方案

此颜色方案采用黄色基色,并在Photoshop调色板中添加和减去30度到色调。

  • 左上角 - 基色#ffe500
  • 右上角 - +30度获得#99ff00
  • 左下角 - -30度得到#ff6600
  • 右下角 - 100%白色#ffffff

类似的颜色可以很好地协同工作,但有时它们可​​能会发生严重冲突。一定要用比自己,家人和朋友更多的人来测试这些方案。当它们工作时,它们会创建一个比单色方案更加丰富多彩的网站,但几乎同样流畅。

05 of 10

更类似的Web颜色方案

添加了20%黑色的正方形以获得更多颜色。

06年10月

互补网络配色方案

与其他颜色方案不同,互补色方案通常仅具有两种颜色。基色和色轮上的相反。 Photoshop可以轻松获得补色 - 只需选择您想要补色的颜色区域,然后按Ctrl-I即可。 Photoshop将为您反转它。确保在复制图层上执行此操作,这样您就不会丢失基色。

  • 左 - 基色#ffe500
  • 对 - 补充#001aff

补充配色方案通常比其他配色方案更引人注目,因此请谨慎使用。它们最常用于需要脱颖而出的作品。

07年10月

更多补充Web颜色方案

为了得到这个版本,我在底部的一半颜色上添加了50%的白色,在中心的正方形上添加了30%的黑色。正如您所看到的,它为您提供了更多选项,但它仍然是一种补充配色方案。

08/10

三元网络配色方案

三色配色方案由围绕色轮或多或少均匀间隔的3种颜色组成。因为色轮是360度,我再次使用颜色选择器中的色调框来添加和减去基色120度。

  • 左上角 - 基色#ffe500
  • 右上角 - +120度获得#e500ff
  • 左下角 - -120度得到#00ffe6
  • 右下角 - 100%白色#ffffff

三元颜色方案通常会产生非常生动的网页。但是像补色配方一样,它们会以不同的方式影响人们。一定要测试。

您还可以创建四色或四色配色方案,其中颜色在色轮周围等间距。

09年10月

更多三元网络配色方案

与其他示例一样,我在颜色上添加了30%的黑色方块以获得额外的阴影。

10个中的10个

不一致的Web颜色方案

美丽是旁观者的眼睛,但不幸的是,并非所有的颜色都融合在一起。不一致的颜色是在色轮上相距大约30度的颜色,并且不是互补的或者是三元组的一部分。

不一致的配色方案可能非常令人震惊,应该只用于引起注意。请记住,因为这些颜色经常会发生冲突,所以你得到的注意力可能不是你想要的。