01 10
了解颜色和Web颜色方案
有四种基本配色方案可用于网站。 本文的每个页面都显示了配色方案的图片，以及如何在Photoshop中生成类似的方案。
- 单色
使用相同色调的颜色。 根据添加的白色或黑色的多少，它们可能具有不同的色调或色调。 - 类似
这使用色轮上彼此接近的颜色。 - 补充
这通常被认为是“相反的”，因为互补配色方案中的两种颜色在色轮上彼此相反。 - 三元
这些颜色在色轮上均匀分布。
所有的配色方案将使用这个黄色作为基础颜色。
02之10
单色网络配色方案
这种配色方案使用我的基色的芥末黄色，并相应地添加一些白色和黑色来淡化和淡化方案。
- 左上方 - 基本颜色＃ffe500
- 右上角 - 添加50％白色填充以获得＃fff280
- 左下角 - 添加75％白色填充以获得＃fff8bf
- 右下角 - 添加50％黑色填充以获得＃7f7200
单色配色方案通常是所有配色方案中最简单的。 色调和阴影的温和变化使颜色更好地流入彼此。 使用这种配色方案，使您的网站显得更加流畅和收集。
03之10
更多单色网络色彩方案
在计划中增加了20％的黑色正方形以获得更多颜色。 向您的颜色添加黑色或白色可以为您的调色板创建新的颜色，而不会破坏页面的色调。
04年10月
类似的Web颜色方案
此颜色方案采用黄色基色，并在Photoshop调色板中为色调添加和减去30度。
- 左上方 - 基本颜色＃ffe500
- 右上角 - +30度获得＃99ff00
- 左下角-30度得到＃ff6600
- 右下角 - 100％白色#ffffff
类似的颜色可以很好地结合在一起，但有时它们会发生严重的冲突。 一定要比你自己，你的家人和朋友更多的人来测试这些计划。 当他们工作时，他们创建的网站比单色网站更丰富多彩，但几乎一样流畅。
10的10
更类似的Web颜色方案
在计划中增加了20％的黑色正方形以获得更多颜色。
06年10月
互补网页配色方案
与其他配色方案不同，互补配色方案通常只有两种颜色。 基色和它在色轮上相反。 Photoshop可以很容易地获得补色 - 只需选择想要补色的区域并按下Ctrl-I即可。 Photoshop会为你反转。 确保在复制图层上执行此操作，以免丢失基本颜色。
- 左 - 基色＃ffe500
- 正确 - 补充＃001aff
补色配色方案通常比其他配色方案引人注目，因此请谨慎使用。 他们最常用于需要突出的部分。
07的10
更多互补网页配色方案
为了获得这个版本，我在颜色的下半部分添加了50％的白色，在中心部分添加了30％的黑色。 正如你所看到的，它给了你更多的选择，但它仍然是一种互补的配色方案。
08年10月
三色网络色彩方案
三色配色方案由围绕色轮或多或少均匀间隔的3种颜色组成。 由于色轮是360度，我再次使用颜色选择器中的色调框来添加和减去基本颜色的120度。
- 左上方 - 基本颜色＃ffe500
- 右上角 - +120度得到＃e500ff
- 左下角-120度得到＃00ffe6
- 右下角 - 100％白色#ffffff
三色配色方案通常会生成非常活跃的网页。 但是像补色配色方案一样，它们可以不同地影响人们。 一定要测试。
您还可以创建四色或四色配色方案，其中颜色围绕色轮等距分布。
09年10月
更多三色网页配色方案
和其他例子一样，我在颜色上添加了30％的黑色方块以获得更多的阴影。
10 10
不和谐的Web颜色方案
美丽在旁观者的眼中，但不是所有的颜色都在一起，这是一个不幸的事实。 不和谐的颜色是比色轮上的间隔大约30度的颜色，并且不是互补的或是三元组的一部分。
不协调的配色方案可能非常令人震惊，应该只用于引起注意。 请记住，因为这些颜色经常会发生冲突，所以您得到的关注可能并不是您正在寻找的。