了解颜色和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度的颜色,并且不是互补的或者是三元组的一部分。
不一致的配色方案可能非常令人震惊,应该只用于引起注意。请记住,因为这些颜色经常会发生冲突,所以你得到的注意力可能不是你想要的。