顏色質(zhì)量對比度在網(wǎng)站設(shè)計(jì)中的應(yīng)用

由于質(zhì)量的對比，在網(wǎng)頁設(shè)計(jì)以及所有藝術(shù)和設(shè)計(jì)領(lǐng)域都可以取得非常好的結(jié)果。

不僅可以創(chuàng)建協(xié)調(diào)一致的顏色組合，而且可以更好地突出強(qiáng)調(diào)色。通過質(zhì)量對比可以創(chuàng)建空間深度，大氣環(huán)境以及明暗。

值得仔細(xì)研究一下對比度。在本文中，我們將向您展示什么是質(zhì)量對比，以及如何將其用于設(shè)計(jì)和媒體。

?

什么是質(zhì)量對比

根據(jù)Itten的說法，質(zhì)量對比度（也稱為強(qiáng)度對比度）是七種顏色對比度之一。這是由于這樣的事實(shí)，即代表完整，明亮的顏色以及破碎的，沉悶的顏色。

換句話說：對比度描述了純色和混濁色之間的質(zhì)量差異。因此，顏色質(zhì)量始終表示顏色的純度或飽和度。

如果將飽和色與黑色，白色，灰色調(diào)或互補(bǔ)色混合在一起，則會(huì)損失顏色的純度-進(jìn)而影響質(zhì)量。因此，質(zhì)量對比度也被描述為飽和度對比度或色差-消色差對比度。

直接比較，與沉悶的顏色相比，純色具有顯著的主導(dǎo)效果。有效顯示飽和色的質(zhì)量。

?

顏色在質(zhì)量比較中的作用

相同顏色的效果始終取決于您的環(huán)境。讓我們仔細(xì)看看。

內(nèi)部矩形始終是相同的顏色：純凈的飽和藍(lán)色。

在第一行中，外部矩形的藍(lán)色與白色或黑色混合。

在中間的行中，藍(lán)色與中性的黑色，白色和灰色并列，而最后一行包含具有互補(bǔ)色的混合物以及與純互補(bǔ)色的比較。

藍(lán)色的定性顏色對比

黑色，白色和黃色（作為純色）具有與飽和藍(lán)色相同的質(zhì)量。色彩體驗(yàn)相對強(qiáng)烈。作為補(bǔ)充色，黃色甚至?xí)顾{(lán)色顯得更強(qiáng)烈。

但是，與混合的藍(lán)色色調(diào)（1行和3行）相比，純藍(lán)色顯得質(zhì)量更高，更強(qiáng)烈。

但是，不飽和顏色是冷還是暖，混濁還是只是更淺或更深取決于混合物。

白色和黑色的混合物往往會(huì)導(dǎo)致顏色偏冷但清晰。而帶有黃色的混合物會(huì)導(dǎo)致變暖，但色調(diào)變暗。

淺紅色質(zhì)量比較

正如純色與純色相比具有強(qiáng)烈的效果，同樣質(zhì)量的淺色或深色也可以定性地融合在一起。

與純紅色相比，淺紅色看起來相對較淡。即使與中間的純白色相比，淺紅色看起來也沒有那么強(qiáng)烈。

相反，與折斷的藍(lán)色調(diào)相比，顏色質(zhì)量相同。柔和的陰影彼此匹配。柔和色調(diào)的效果從未像純色那樣強(qiáng)烈。

黃色的顏色質(zhì)量

黃色是與黑色，灰色或其互補(bǔ)色混合后會(huì)更改其實(shí)際顏色的一種顏色，以致不再將黃色視為黃色。質(zhì)量差異在這里非常明顯，通常被認(rèn)為是負(fù)面的。

?

網(wǎng)頁設(shè)計(jì)中的質(zhì)量對比

在網(wǎng)頁設(shè)計(jì)中，有多種方法可以將質(zhì)量對比用于大氣，成功的網(wǎng)站。這里有一些例子。

配色方案框架內(nèi)的質(zhì)量對比

只有一種主要顏色時(shí)，網(wǎng)頁設(shè)計(jì)中通常會(huì)使用質(zhì)量對比。例如，如果LOGO已經(jīng)包含某種顏色，那么就品牌和識別而言，該顏色應(yīng)該像貫穿網(wǎng)站的紅線一樣運(yùn)行。

在這種情況下，顏色漸變可確保主色相比之下顯得更加強(qiáng)烈。另一方面，顏色漸變允許網(wǎng)站將自己沉浸在非常精細(xì)的非常協(xié)調(diào)的顏色世界中。

不僅使用一種主要顏色，質(zhì)量對比還通過使用更多的初始顏色陰影提供了更多的設(shè)計(jì)余地。

同時(shí)，該設(shè)計(jì)看上去并不會(huì)太鮮艷或過于浮華，但會(huì)顯得更加沉穩(wěn)，這在信息過載和繁忙時(shí)可被視為非常令人愉悅。

可以使用Adobe Color創(chuàng)建相應(yīng)的配色方案，例如通過將設(shè)置設(shè)為單色或陰影。

配色方案不存在的質(zhì)量對比

另一方面，了解質(zhì)量對比意味著您可以為您的網(wǎng)站專門創(chuàng)建一種配色方案，以消除質(zhì)量差異。例如，您可以使用完全由柔和色調(diào)和相同飽和度組成的配色方案創(chuàng)建非常平衡的設(shè)計(jì)。

它們顯得柔和，柔和。與白色以及黑色或深灰色字體顏色結(jié)合使用，可以營造出和諧的氣氛，并且仍可以清晰地傳達(dá)內(nèi)容。

當(dāng)然，出于相同的原因，較暗的不飽和色調(diào)也會(huì)導(dǎo)致顏色概念的連貫性。

如果需要強(qiáng)調(diào)色，可以將相應(yīng)的純色添加到不飽和色之一。由于具有質(zhì)量對比，因此與所有其他顏色相比，純色的效果明顯更好。

網(wǎng)頁設(shè)計(jì)中的質(zhì)量對比和懸停效果

除配色方案外，還可以間接有效地使用質(zhì)量對比度。一個(gè)例子是具有增加或減少的飽和度或改變的亮度的懸停效果。

以這種方式，可以首先以降低的飽和度并因此以更高比例的灰度顯示圖像。懸停時(shí)（將鼠標(biāo)移到圖片上時(shí)），圖片的顏色將變?yōu)樵嫉那逦伾?。這樣一來，圖片就可以展現(xiàn)出來，并同時(shí)為您的訪客顯示互動(dòng)：歡迎懸停和點(diǎn)擊。

下圖顯示了之前和之后的狀態(tài)。實(shí)時(shí)播放（即具有懸停效果）

通過CSS濾鏡使用不同的亮度還可以確保在懸停時(shí)提高圖像的強(qiáng)度。通過前后效果產(chǎn)生的質(zhì)量對比具有照明效果。畫面照亮了。

使用懸停效果，可以增加圖像的價(jià)值以及訪問者與頁面的交互。

?

動(dòng)畫質(zhì)量對比

與懸停效果類似，動(dòng)畫中也可以使用質(zhì)量對比。除了上述發(fā)光效果外，它們還可以增加動(dòng)畫中的動(dòng)態(tài)效果和效果的強(qiáng)度。

顯然，諸如線條之類的小細(xì)節(jié)可能會(huì)成為光脈沖，或者通過更強(qiáng)的對比度可以獲得空間距離。在網(wǎng)頁設(shè)計(jì)趨勢動(dòng)畫是特別有效。

?

藝術(shù)與攝影的質(zhì)量對比

許多藝術(shù)家和攝影人員已經(jīng)很好地利用了質(zhì)量對比的效果。

最著名的照片之一是例如卡斯珀·大衛(wèi)·弗里德里希（Caspar David Friedrich）的《霧海之上的流浪者》。由于質(zhì)量對比，可以在圖像中創(chuàng)建深度和寬度。并以自然的方式吸引觀眾。

在插圖等現(xiàn)代媒體中也很好地表達(dá)了這種效果。

尤其是，質(zhì)量對比用于：

• 多霧路段
• 創(chuàng)造心情
• 空間，距離，深度和寬度的表示
• 陰影與光
• 大氣環(huán)境中的發(fā)光亮點(diǎn)

特別是后者通常被用來促進(jìn)廣告。例如，當(dāng)明亮的紅色汽車在較暗的場景前高速顯示時(shí)。或運(yùn)動(dòng)的徒步旅行者，穿著黃色的背囊，被霧山背景拍照。

如果您在網(wǎng)站上使用此類圖像并在色彩方面進(jìn)行協(xié)調(diào)，則結(jié)果將是和諧而堅(jiān)固的設(shè)計(jì)。

?

3D中的質(zhì)量對比

3D渲染提供了將光合并到場景中的可能性，從而可以通過點(diǎn)或日光照射實(shí)際的背景，并允許對象從自身中發(fā)光。

根據(jù)與光源的距離，物體的顏色會(huì)改變，變暗或變亮。與其他對象及其顏色強(qiáng)度相比，它看起來更近或更遠(yuǎn)。

三維度也直接受到質(zhì)量對比的影響。僅物體的顏色強(qiáng)度的差異就清楚地表明了物體的正面和背面在哪里。或清楚地表明正面和背面。

物體的原始顏色一方面可以通過濃淡的陰影效果來表示，另一方面可以在較暗的陰影中與黑色混合。

?

結(jié)論質(zhì)量對比

質(zhì)量對比提供了一個(gè)很好的機(jī)會(huì)來使您的設(shè)計(jì)精細(xì)地協(xié)調(diào)。根據(jù)您使用顏色對比度的方式，會(huì)為您的消息創(chuàng)建一個(gè)大氣環(huán)境，您可以在其中設(shè)置特定的重點(diǎn)。

例如，在市場營銷中，您可以很自然地突出產(chǎn)品，而不會(huì)分散他們的注意力。

同時(shí)，您可以通過緊密和距離，光與影，平靜與活力為設(shè)計(jì)增添更多深度，從而營造出令人興奮的氛圍。這可以增強(qiáng)用戶體驗(yàn)以及與您的網(wǎng)站的交互。