B端设计色彩篇一你必须了解的色彩

儿童白癜风症状 http://m.39.net/pf/a_4844670.html
色彩是界面“形色字构质”的基本元素之一,我准备慢慢写一些实战基础的文章,争取每一篇都可以深入解决一个设计的基本问题。B端设计非常依赖于设计系统,好的颜色定义,能帮我们设计出一些更加统一、舒适、层级分明、可读性强的界面。本篇文章将通过以下三个章节,由浅入深的一步步搭建色彩系统:1.色彩理论简析2.HSB的概念3.搭建色彩系统的方法及工具

Part1

色彩理论简析

ColorTheory

如果你对色彩理论很熟悉,可直接跳过这一部分,因为本节较长。颜色在设计中和日常生活中都起着至关重要的作用,我们可以通过颜色唤起特定的情绪或情感。而在一些没有文字的场景,色彩也是传递信号的媒介。我们先来温习一下色彩理论(ColorTheory),它可以帮助我们在不同的条件下正确的使用颜色,也可以帮助我们认识颜色的基础。

1.1传统色轮(TraditionalColorWheel)

首先,我们先学会传统色轮的构成。我们都知道红色、黄色、蓝色是原色(PrimaryColor),如下图所示:当我们把红色、黄色、蓝色在圆环中分别混合时候,会生成次要颜色(SecondaryColor),绿色、橙色、紫色,如下图所示:如果我们再进一步色环混合,就构成了艾萨克·牛顿(IsaacNewton)创建的传统12色色轮(没错,就是牛顿),如下图:

1.2色调、饱和度、明度、色温

关于颜色的属性,有四种重要属性值得我们去注意,分别是色调、饱和度、色值、色温。1.2.1色调(Hue)色调就是颜色在色轮的位置,色轮主要有12种颜色,但是我们按上述方法无限去分割混合颜色,我们的色轮将是一个由渐变组成的圆环,圆是度,所以,色调的值就是0-。如下图所示:1.2.2饱和度(Saturation)饱和度也可以称为色彩强度(Intensity)或者色度(Chroma),高饱和的颜色是充满活力且强烈的,低饱和的颜色是灰色和暗淡的。如下图所示:1.2.3色值(Value)色值告诉我们颜色的深或者浅。我们可以给颜色混合黑色(Shade),这样可以使颜色变黑;也可以把颜色混合白色(Tint),来使得颜色变白;还可以在颜色表面混合灰色(Tone),来使得颜色变灰;如下图所示:1.2.4色温(Temperature)色温,色轮可以分割成两组,主要是暖色组和冷色组,如下图所示:当我们在色轮上移动时,颜色也会随着色温变化,暖红色逆时针移动时,多了更多的黄色,当我们顺时针移动,就多了更多的蓝色,变成了冷色红,这就是我们通过旋转色轮来制作红色温度带。如下图所示:

1.3色彩调和(ColorHarmonies)

那么我们该怎么组合这些色,使颜色使用变得平衡呢?这里有一些常见的方式去组合颜色,也就是我们俗称的配色或色彩调和(ColorHarmonies)。单色MonochromaticColors:我们只要选取一个颜色,并调整明度和饱和度来创建。互补色ComplementaryColor:这个方案是从色轮的两侧选取两种颜色,也就是色环上对立的度的两个色。这种配色适合创造强烈的对比的配色。分散互补色搭配Split-ComplementaryColor:这个方案是选用了互补色的两个邻居颜色。这样既适合创造强烈的对比配色,又让我们多了一个色调的选择。三角对立配色Triadiccolors:如果要寻找三种互相平衡的颜色,可以选择12色的色轮上任意三个三角对立的颜色。这样可以组合出大胆而充满活力的颜色。矩形配色模式TetradicColorScheme:矩形配色是由两组互补色所构成,通常具有五光十色的缤纷感,但至少有一种主色来突显效果。邻近色AnalogousColor:相似色是指以色相环上邻近的2-4个颜色组成,我们称之为近似色。是最常使用的和谐颜色。角度配色:同类色:色环角度相距30°以内的颜色。这种颜色构成的画面给人一种和谐、统一、高级的感觉,比单色搭配又有了一分生动。近似色:色环角度相距30°-90°的颜色。近似色既可以适度色彩对比,又可以协调统一,色彩生动又不失和谐。对比色:色环角度相距°-°的颜色。对比色能表达强烈的视觉情感,带来较大的视觉冲击力。互补色:色环上相对的颜色,也就是色环相距°的颜色为互补色。互补色是色彩对比最为强烈的两个颜色。

1.4配色网站推荐

1.4.1一键配色:1.Paletton


转载请注明:http://www.soiphoto.com/sjyd/sjyd/18222.html