1. 首页
  2. 设计网站
  3. 正文

颜色质量对比度在网站设计中的应用

  由于质量的对比,在网页设计以及所有艺术和设计领域都可以取得非常好的结果。

  不仅可以创建协调一致的颜色组合,而且可以更好地突出强调色。通过质量对比可以创建空间深度,大气环境以及明暗。

  值得仔细研究一下对比度。在本文中,我们将向您展示什么是质量对比,以及如何将其用于设计和媒体。

  什么是质量对比


  根据Itten的说法,质量对比度(也称为强度对比度)是七种颜色对比度之一。这是由于这样的事实,即代表完整,明亮的颜色以及破碎的,沉闷的颜色。

  换句话说:对比度描述了纯色和混浊色之间的质量差异。因此,颜色质量始终表示颜色的纯度或饱和度。

  如果将饱和色与黑色,白色,灰色调或互补色混合在一起,则会损失颜色的纯度-进而影响质量。因此,质量对比度也被描述为饱和度对比度或色差-消色差对比度。

  直接比较,与沉闷的颜色相比,纯色具有显着的主导效果。有效显示饱和色的质量。

  颜色在质量比较中的作用

  相同颜色的效果始终取决于您的环境。让我们仔细看看。

  内部矩形始终是相同的颜色:纯净的饱和蓝色。

  在第一行中,外部矩形的蓝色与白色或黑色混合。

  在中间的行中,蓝色与中性的黑色,白色和灰色并列,而最后一行包含具有互补色的混合物以及与纯互补色的比较。

  蓝色的定性颜色对比

  黑色,白色和黄色(作为纯色)具有与饱和蓝色相同的质量。色彩体验相对强烈。作为补充色,黄色甚至会使蓝色显得更强烈。

  但是,与混合的蓝色色调(1行和3行)相比,纯蓝色显得质量更高,更强烈。

  但是,不饱和颜色是冷还是暖,混浊还是只是更浅或更深取决于混合物。

  白色和黑色的混合物往往会导致颜色偏冷但清晰。而带有黄色的混合物会导致变暖,但色调变暗。

  浅红色质量比较


  正如纯色与纯色相比具有强烈的效果,同样质量的浅色或深色也可以定性地融合在一起。

  与纯红色相比,浅红色看起来相对较淡。即使与中间的纯白色相比,浅红色看起来也没有那么强烈。

  相反,与折断的蓝色调相比,颜色质量相同。柔和的阴影彼此匹配。柔和色调的效果从未像纯色那样强烈。

  黄色的颜色质量

  黄色是与黑色,灰色或其互补色混合后会更改其实际颜色的一种颜色,以致不再将黄色视为黄色。质量差异在这里非常明显,通常被认为是负面的。

  网页设计中的质量对比

  在网页设计中,有多种方法可以将质量对比用于大气,成功的网站。这里有一些例子。

  配色方案框架内的质量对比

  只有一种主要颜色时,网页设计中通常会使用质量对比。例如,如果LOGO已经包含某种颜色,那么就品牌和识别而言,该颜色应该像贯穿网站的红线一样运行。

  在这种情况下,颜色渐变可确保主色相比之下显得更加强烈。另一方面,颜色渐变允许网站将自己沉浸在非常精细的非常协调的颜色世界中。

  不仅使用一种主要颜色,质量对比还通过使用更多的初始颜色阴影提供了更多的设计余地。

  同时,该设计看上去并不会太鲜艳或过于浮华,但会显得更加沉稳,这在信息过载和繁忙时可被视为非常令人愉悦。

  可以使用Adobe Color创建相应的配色方案,例如通过将设置设为单色或阴影。

  配色方案不存在的质量对比

  另一方面,了解质量对比意味着您可以为您的网站专门创建一种配色方案,以消除质量差异。例如,您可以使用完全由柔和色调和相同饱和度组成的配色方案创建非常平衡的设计。

  它们显得柔和,柔和。与白色以及黑色或深灰色字体颜色结合使用,可以营造出和谐的气氛,并且仍可以清晰地传达内容。

  当然,出于相同的原因,较暗的不饱和色调也会导致颜色概念的连贯性。

  如果需要强调色,可以将相应的纯色添加到不饱和色之一。由于具有质量对比,因此与所有其他颜色相比,纯色的效果明显更好。

  网页设计中的质量对比和悬停效果

  除配色方案外,还可以间接有效地使用质量对比度。一个例子是具有增加或减少的饱和度或改变的亮度的悬停效果。


  以这种方式,可以首先以降低的饱和度并因此以更高比例的灰度显示图像。悬停时(将鼠标移到图片上时),图片的颜色将变为原始的清晰颜色。这样一来,图片就可以展现出来,并同时为您的访客显示互动:欢迎悬停和点击。

  下图显示了之前和之后的状态。实时播放(即具有悬停效果)

  通过CSS滤镜使用不同的亮度还可以确保在悬停时提高图像的强度。通过前后效果产生的质量对比具有照明效果。画面照亮了。

  使用悬停效果,可以增加图像的价值以及访问者与页面的交互。

  动画质量对比

  与悬停效果类似,动画中也可以使用质量对比。除了上述发光效果外,它们还可以增加动画中的动态效果和效果的强度。

  显然,诸如线条之类的小细节可能会成为光脉冲,或者通过更强的对比度可以获得空间距离。在网页设计趋势动画是特别有效。

  艺术与摄影的质量对比

  许多艺术家和摄影人员已经很好地利用了质量对比的效果。

  最著名的照片之一是例如卡斯珀·大卫·弗里德里希(Caspar David Friedrich)的《雾海之上的流浪者》。由于质量对比,可以在图像中创建深度和宽度。并以自然的方式吸引观众。

  在插图等现代媒体中也很好地表达了这种效果。

  尤其是,质量对比用于:

  多雾路段

  创造心情

  空间,距离,深度和宽度的表示

  阴影与光

  大气环境中的发光亮点

  特别是后者通常被用来促进广告。例如,当明亮的红色汽车在较暗的场景前高速显示时。或运动的徒步旅行者,穿着黄色的背囊,被雾山背景拍照。

  如果您在网站上使用此类图像并在色彩方面进行协调,则结果将是和谐而坚固的设计。

  3D中的质量对比

  3D渲染提供了将光合并到场景中的可能性,从而可以通过点或日光照射实际的背景,并允许对象从自身中发光。

  根据与光源的距离,物体的颜色会改变,变暗或变亮。与其他对象及其颜色强度相比,它看起来更近或更远。

  三维度也直接受到质量对比的影响。仅物体的颜色强度的差异就清楚地表明了物体的正面和背面在哪里。或清楚地表明正面和背面。

  物体的原始颜色一方面可以通过浓淡的阴影效果来表示,另一方面可以在较暗的阴影中与黑色混合。

  结论质量对比

  质量对比提供了一个很好的机会来使您的设计精细地协调。根据您使用颜色对比度的方式,会为您的消息创建一个大气环境,您可以在其中设置特定的重点。

  例如,在市场营销中,您可以很自然地突出产品,而不会分散他们的注意力。

  同时,您可以通过紧密和距离,光与影,平静与活力为设计增添更多深度,从而营造出令人兴奋的氛围。这可以增强用户体验以及与您的网站的交互。

    延伸阅读

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://lnbdc.com/article/5204.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();