UI 基础知识:色彩理论

颜色在设计和我们的生活中扮演着非常动态的角色,我们称彩虹为彩虹,因为它包含一组特定的颜色,而不仅仅是任何7种颜色。

那么,我们怎么知道哪些颜色一起看起来很好,哪些颜色不好看呢?

答案是色彩理论;在色彩理论的基础上做出明智的颜色选择可以帮助我们在必须为平面设计,应用程序或网页设计选择颜色的情况下感到更有信心。

色彩理论

基础知识:

红色,黄色和蓝色等颜色被称为原色,因为它们会产生其他次要和三级颜色。

例如

红色 + 黄色为橙色

黄色 + 蓝色为绿色

蓝色+ 红色是粉红色

这些由此产生的颜色构成了次要颜色(橙色,绿色,粉红色)。

通过将一种原色与一种次要颜色混合而成的颜色称为第三种颜色。

例如:

蓝色和绿色表示蓝绿色。

所有这些颜色共同构成了一个色轮:

现在我们知道了什么是色轮,让我们了解一下用于导航色轮的术语。

色相(Hue)—即各类色彩的相貌称谓。

色彩饱和度(Saturation)/色度(Chroma)—颜色的整体强度或者亮度

明度(Value)—色彩的明暗程度

色调(Tone)—是纯色和灰色组合产生的颜色,也可以说是一幅画中画面色彩的总体倾向

色度(Shade)—是纯色和不同比例的黑色混合产生的颜色,色彩的纯度

色彩(Tint)—是纯色和白色混合产生的颜色,一种色相(Hue)通过加入不同比例的白色能够产生不同的颜色

此外,这些术语也值得了解:

阴影,阴影-通过添加黑色以减少原始色相的比例而进行的颜色更改。在设计中,有时会使用很深的阴影代替黑色,并且可以用作中性色。最好将阴影与色调或较浅的中性相结合,以避免过暗和沉重的外观。

染色—颜色的浅色值。通过将白色添加到原始色调并使其变亮来创建色调。即使颜色仍然很亮,从技术上讲,添加了白色的任何纯色相都是淡色。色调通常用于创建女性化或更浅色的设计。

色调-将灰色添加到色彩中时,使颜色看起来比以前更柔和或更暗。更多的灰色可以给网站带来特殊的复古感。

为了制作美观和专业的调色板,我们将色调,饱和度和价值放在一起,并利用色彩和谐。

1. 单色色彩和谐

这是最简单的公式,因为它只使用一种颜色/色调,只需在色轮上选择一个点,并利用您对饱和度和价值的知识来创建变化。

关于单色配色方案的最好的事情是它们保证匹配。

2. 相似的色彩和谐

相似的颜色彼此相邻地放置在色轮上。在色轮上取任意三种相邻的颜色来尝试这个方案。

因此,如果您选择橙黄色作为主要颜色,那么黄色和橙色将共同构成类似的配色方案。

3. 互补色彩和谐:

该方案由色轮上彼此相对的颜色组成。在色轮上选择任何颜色,并追踪其完全相反的颜色。

因此,如果您选择橙黄色,蓝紫色将是它的互补色。

专业提示:为避免看起来过于简单的互补配色方案,请通过引入具有不同饱和度和值的色调(浅色和深色)来添加一些多样性。

现在我们已经了解了颜色理论和颜色和谐,让我们看看如何将这些知识与颜色模型相结合:

颜色模型是一种描述颜色表示为数字元组的方式的方法,通常为三个或四个值或颜色分量。

1. CMYK 颜色模型

CMYK颜色模型由青色,品红色,黄色和黑色组成。这些颜色的重叠导致黑色。

CMYK颜色模型使用减法颜色混合,减法,因为它们是通过从光的原色中减去而产生的。当红色从绿色和蓝色中减去时,它变成青色。当我们从红色和绿色中减去蓝色时,我们得到黄色。当红色和蓝色连接在一起并减去绿色时,我们得到洋红色。

CMYK 彩色模型用于在带有打印机的纸张上进行打印。

2. RGB 颜色模型

RGB颜色模型由红色,绿色,蓝色组成。这些颜色的重叠导致白色。

RGB颜色模型是一种加法颜色模型,因为红色,绿色和蓝色以各种组合添加以产生广泛的颜色范围。红色和绿色光结合在一起,形成黄色,蓝色和绿色添加产生青色,红色和蓝色加在一起产生品红色。

RGB 颜色模型用于网页和屏幕设计。

3. HSB/HSV颜色模型

HSB/HSV 颜色模型可改变颜色的纯度和密度,以及通过颜色投射的光量。

~ 我们所知道的色调是所有颜色的径向360度鳞片

饱和度是颜色看起来沉闷或丰富的程度

亮度/值控制颜色是否更接近黑到白。

色彩和谐可以真正帮助挑选所需的调色板,而无需太多的尝试和错误。

原作者:Kumar Siddharth

原文地址:https://medium.com/@siddux/ui-fundamentals-color-theory-b06c81731246

本页面最后更新于 2022年04月05日 19:07