色彩对网页设计的意义 第1篇
我们使用带有 12 个色段的 RGB 色轮（由所谓的主要、次要和三次颜色组成）。为了使示例更容易，我将我的内容简化为多个部分。通常，你会在设计软件中看到带有柔和颜色过渡的轮子以选择颜色。Adobe 还有一个很棒的色轮工具，可以帮助你设置颜色。
色彩对网页设计的意义 第2篇
与 RGB 相同，A 代表额外的 alpha 通道。Alpha 在 （完全透明）和 （完全不透明）之间调节透明度。
因此，例如 RGBA = 255, 255, 255, 将是具有 50% 透明度的白色。
色彩对网页设计的意义 第3篇
这个方法仅侧重于互补色，当决定你想要的计划要去传达给用户的时候，你可以考虑这个方法。它强调了选择颜色的活力，当这些色彩被夸大后就可能太多了。
图片来自: Ray Trygstad.百科
因此考虑色彩心理学时，重要的是你应该把所有色彩作为一个整体去考虑，它们在一起怎么工作，而不是只选一个颜色，还有希望颜色要与其它的内容如背景，文本等这些按钮起到作用。
看看下面的这张图片，并且考虑下它向用户传达了什么内容。
图片来自Codementor
1背景颜色——黑色的背景展现了网站的优质，精细，正式和统一的企业形象。显然，当考虑网站提供辅导的时候，你应该会想传达卓越，精益求精这些东西。网站的形式上表明，当和学习相关的这些企业社团表明用户可能不是作为一种爱号学习代码，而是作为他们未来职业生涯中的一种技能来学习的。
2按钮的颜色——该网站使用了红色的按钮作为交易按钮。和黑色的背景形成了鲜明的对比，鼓励更多用户去注册。对于不太重要的按钮则使用白色描边，与整体方案一致。
3文本颜色——对于文本，白色规定了所有重要的对比度，同时和整体颜色方案相匹配。白色的线性图标(白色半透明的按钮）被放在了下面来鼓励用户在必要的时候向下滚动来获取更多内容。
总体来说，设计工作做得很好——我们都知道黑色和白色搭配在一起能够协调，在这种情况下，这个网站感觉优雅和相对正式。红色，如果使用过度，可能会使网站的取意远离整个信息的传达，所以它在使用时非常的谨慎，只是为了突出并让它清楚的表达所需的动作是去注册这个功能的目的就好了。
棕色在设计中通常会唤起自然感，但是这个颜色是大多数男性最不喜欢的颜色，但它确实在某些情况下工作使用，因为用它来表示可靠性。
图片来自: Color Matters
因此对ups来说棕褐色作品是当它的公司想要传达它可以依靠的强烈信息时候，棕色也可以使用。但是，作为一个运动套件，它被形容为有史以来最差的大学橄榄球,感谢图中显示的这张示例图片，这属于美国怀俄明大学队的。有趣的是，棕褐色也被认是推动“强度，耐用性”，所以当配上这样的积极运动你会想到它会起到这样的作用，但它不会在这种情况下发生因为正常情况下男性不喜欢棕色。
当谈到女性的时候，橙似乎是最不喜欢的颜色，所以记住这一点，如果你设计的主要人群是女性用户群，不要用橙色。
当然，请记住，这些只是指导原则（他们总是依赖于文本内容），其实更重要的是所有的颜色相得益彰，创造和谐。
当然，你可以使用现成的调色板，你的选择色彩的时候来帮助你。当涉及到网页UI设计，你不需要重新发明色轮。下面一些颜色色卡资料分享给大家。
1Adobe Color cc –为所有adobe用户值得信赖的供应商
2Paletton –简单颜色拾色器，适合初学者
3Flat UIColor Picker – 用于创建丰富多彩的扁平设计
4Mudcube Color Sphere – 提供主题选择和十六进制数字
5Check MyColours –用于检查前景和背景的颜色组合，并且它具有正确的对比度，供人用色盲。
6Color– 允许你通在屏幕滑动鼠标选色，设置饱和度，然后你可以得到十六位进制代码。
有成千上万的网站在那里用颜色带来很大的影响，以及大量不这样做的网站。下面的图片awwwards站点靠色彩区分，而且我们很容易明白为什么这么做。
图片来自: AWWWARDS
背景是均匀的浅灰色它与自行车的灰色搭配起来很好看。简单的设计，用大字体是非常有影响力的，并立即传达出这个含义：它是一个快速的小自行车，会让你爱上骑行。利用灰色让其他颜色凸显出来的特质，并且灰色是一个中性色，当它变亮变轻，照亮了页面并让页面活跃了起来。灰色也给我们一种稳定感（对于一个伟大的自行车广告），同时营造安静和沉稳的感觉。
在图片中字“GO”使用的颜色鲜亮活泼，体现了活力和现代的设计感。主要是蓝色调，因为这个颜色男性和女性都会喜欢，它可以确保页面没有性别区分。少量的加入绿色，暗示了环保的含义，这样做法很聪明，因为自行车和汽车比起来更好，不会污染空气。众所周知这一点对于宣传来说是很有力量的。
总体而言，这个页面告诉你踏板车是多么的完美，并且它会是现代都市人的生活方式之一。
色彩是设计的一个重要组成部分，也是整个品牌重要的一部分。所用的颜色所传达的意义必须喝品牌个性和品牌故事一致。通常情况下，设计师有时不得不用现有的艺术作品，如 logo，并且不得不再此基础上选择颜色。然而这过程似乎是被完全压缩了的，但调色板的实用性也许可以让你在做的过程中比较容易些。要了解更多关于视觉设计如何给用户上最强的第一印象，看看这个免费书《 Web UI Design for the Human Eye》。这是我们分析了33个公司，包括Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom,和Bose。
色彩对网页设计的意义 第4篇
混合四种颜色，cyan青色， magenta洋红色， yellow黄色， and key黑色，是所有其它的印刷颜色的基础。这些也是你的家用打印机和专业印刷厂中的四种颜色。
色彩对网页设计的意义 第5篇
现在你的变体是围绕主要或次要颜色构建的。因此，它们没有自己的名字，但通常需要通过数字将它们标识为变体。在材质调色板工具中，我们用100的使用步骤创建了它们，我也喜欢使用。不过，你也可以使用 10 步。
但是，不要将它们命名为 1 2 3 4 等等，原因是你可能希望稍后在它们之间添加变体，然后它会变得混乱。因此，请给自己一些空间以应对可能发生的情况。
✏️不要忘记错误、警告、信息和成功的系统颜色，通常是红色、橙色、蓝色和绿色。如果你愿意，你可以调整它们以符合你的品牌颜色。只要确保将错误保持为红色，始终！
另一个值得添加的东西是所谓的 on-color，这意味着在颜色之上使用的颜色，例如排版或图标。有意识地使用颜色有两个主要优点
你可以下载 Figma 中的免费颜色样式表。自己尝试一下。
除了你使用什么颜色之外，一个重要的部分是你如何使用它们。60，30，10 规则是一个很好的经验法则。这意味着你在设计中最多使用 60% 的基色，然后是主色的 30%，为了突出显示，你使用辅助色的 10%，例如号召性用语（CTA，例如按钮）。
这显然是对颜色分布的“感觉”，而不是精确的测量。颜色在此可以解释为一种颜色或一种颜色及其变体。你可以使用此方法，但是，请确保你的 CTA 始终相同并脱颖而出。
如你所见，你获得了非常坚实的基础，并真正关注你的 CTA。
用户体验 | 用户界面 | UI | UX/UI | UI设计 | 网页设计