顏色基礎知識

2021-06-16 04:25:12 字數 2619 閱讀 3998

我們知道,人們視為「可見」的光可以分解為從藍色到紅色的乙個漸進的彩虹光譜帶。

可見光譜

我們還見過(也許還用過)色環,色環顯示如何通過混合兩種或更多顏色來生成特定的顏色。色環實質上就是在彩色光譜中所見的長條形的色彩序列,只是將首尾連線在一起,使紅色連線到另一端的紫色。

色環色環通常包括 12 種不同的顏色,雖然畫家對色環和顏色理論的重要方面已十分了解,但我們當中的一些程式設計師卻可能不十分清楚,這種理解上的不足會把事情弄得一團糟。

基色 

按照定義,基色是最基本的顏色,通過按一定的比例混合基色可以產生任何其它顏色。為了識別基色,首先需要確切知道使用的是何種媒介。您可能在小學裡學到基色有紅、黃、藍,但現在我們大多是用紅、綠、藍作為基色進行顏色顯示。我想這不足為奇。

但如果您使用彩色噴墨印表機,請開啟機蓋看看墨盒。是否看到了紅、綠、藍?沒有。您可能看見有四種墨水:青色、品紅色、黃色及黑色。顏色不同是因為計算機顯示器使用加色,而印表機使用減色。顯示器發射彩色光線,而紙張上的墨水則從它反射的光中吸收了某種顏色。除發射和吸收光線的不同外,本文討論的概念適用於加色和減色兩種模式—但根據我們的目的,我們將重點討論加色模式,在這種模式中,基色為紅、綠、藍。

次生色 

為了建立色環,下面我們希望了解通過混合任何兩種鄰近的基色獲得的三種顏色。這些顏色即次生色:青、品紅和黃。咦,我們不是談到過這三種顏色嗎?是的,加色法中的次生色就是減色法中的基色。由此您可以推斷出,減色法中的次生色也就是加色法中的基色。這就是加色模式和減色模式之間的相互關係。

三次色 

建立色環的最後一步是,再次找到現已填入色環的顏色之間的中間色。幸運的是,這些三次色對於加色法和減色法都是相同的。既然我們已經定義了在 12 點色環中使用的顏色,那麼就可以討論這些顏色之間的相互關係。

相似色 

相似色是指在給定顏色旁邊的顏色。如果您以橙色開始並想得到它的兩個相似色,就選定紅色和黃色。使用相似色的配色方案可以提供顏色的協調和交融,類似於在自然界中所見到的那樣。

互補色 

也稱為對比色。互補色在色環上相互正對。如果希望更鮮明地突出某些顏色,則選擇對比色是有用的。如果您在製作一幅檸檬的,使用藍色的背景將使檸檬更突出。

分列的互補色 

分列的互補色可由兩種或三種顏色構成。選擇一種顏色,在色環的另一邊找到它的互補色,然後使用該互補色兩邊的一種或兩種顏色。

三色組 

三色組是色環上等距離的任何三種顏色。在配色方案中使用三色組時,將給予觀察者某種緊張感,這是因為這三種顏色均對比強烈。基色和次生色均是三色組。

暖色 

暖色由紅色調構成,如紅色、橙色和黃色。這種顏色選擇給人以溫暖、舒適、有活力的感覺。這些顏色產生的視覺效果使其更貼近觀眾,並在頁面上更顯突出。

冷色 

冷色來自於藍色調,如藍色、青色和綠色。這些顏色使配色方案顯得穩定和清爽。它們看起來還有遠離觀眾的效果,所以適於做頁面背景。

這些顏色組在不同的書籍中所指的內容並不相同,但只要理解了基本原理,它們就都可以理解。

利用對比

對比是兩種相鄰顏色之間感覺到的區別。由於白色和黑色不是真正的顏色,它們被說成是表現了非彩色的對比度。黑色和白色也表現了最強烈的對比。色環中的互補色表現出大的彩色對比度。人眼對非彩色的對比度比對彩色的對比度更敏感,這就是在您增加壓縮係數時 .jpg 壓縮演算法先去除彩色資訊而後再去除黑白資訊的原因。

使用藍色的單色對比條

當您使用一種顏色,然後增加或減少其亮度時,即建立起單色對比。

對比在 web 設計中非常重要。使用對比有多種不同的方法,所有這些方法都基於上述的另一種顏色概念。每個人都明白,白色背景下的黑色文字最容易**,這是您看到的大多數印刷材料都是白背景下的黑色文字的部分原因。同樣地,黑底白字的對比度也很強,但閱讀起來比較困難,因為黑色給人感覺比白色沉重,有鑑於此,請盡量少用。

高對比度顏色組合

暖色和冷色產生同樣的效果。暖色給人略微突出螢幕的感覺,而冷色則顯得凹進螢幕。這意味著暖色/黑色最適合作為文字,而冷色/白色最適合作為背景。然而,這種方法也不是一成不變的。下面我們來看乙個簡單的例子,其中選擇了兩個對比色,使用乙個作為背景而另乙個作為文字。

. 互補色組合

您會注意到效果非常差。這兩種顏色對比不鮮明,它們幾乎滲透在一起。這顯然不是個好的組合。還是保持顏色基本相同,而調整其亮度/暗度,使它們區分得更明顯。

修改後的顏色組合

可以看到這是乙個好得多的組合,它表明在考慮對比度時有一點很重要:不僅僅要在分析的意義上考慮,還要從視覺的角度考慮。

這些顏色和對比的應用對於在背景影象上疊加文字也許是最重要的。使用這些對比概念時,必須切記,頁面上的文字部分必須與背景影象中的所有顏色足以形成強烈的對比。例如,如果簡單地使用上述的一套三色組,您就能使這三種互相對比的顏色在頁面上爭奇鬥艷。

一種更好的方法是使用一套分列的互補色,使用相似色作為背景,而文字使用互補色。這樣,背景顏色將適當地融合到一起而不致引起對它們本身明顯的注意,而文字將顯得突出。

分列的互補色組合;在背景影象上的文字

懂得顏色理論在您為**選擇顏色基調時也會發生作用。根據您對背景顏色、導航元件和不同文字風格的需要,您可以從色環中選擇出高對比度的圖案。然後,使用類似於我的安全調色盤計算表(英文)的某種工具,就可以輕鬆地選擇較暗的/較亮的顏色,將元素之間的對比增加到適當的水平。有許多組合適合於您的頁面,它們使色彩得到激動人心的使用,而不致讓使用者頭疼。所以,把那些止痛片放到一邊去吧,還是多花一點時間考慮一下在 web 站點上如何使用顏色。

CSS基礎知識總結之顏色 單位

顏色 所有的顏色都可以由紅 綠 藍三原色調配而成。css中用8位表示乙個顏色,那麼可以有28即256種顏色,所以總共可以表示256 256 256種顏色。css縱有多種顏色表示 1 十六進製制形式 style color ff0000 十六進製制顏色p 2 rgb顏色 p style color r...

css 膠囊 兩種顏色 CSS 基礎知識

語法一 樣式語法 選擇器注意事項 語法二 語法 chartset utf 8 import url 2.css media min width 100px and max width 200px 注意事項 方法 如何使用開發者工具 流動方向 寬度 高度 overflow 溢位 當內容大於容器時 cs...

C 基礎知識整理 基礎知識(2) 類

類,是物件導向語言的基礎。類的三大特性 封裝 繼承 多型。最基本的特性就是封裝性。程式設計師用程式描述世界,將世界的所有事物都看成物件,怎麼描述這個物件?那就是類了。也就是用類來封裝物件。用書上的話說,類是具有相同屬性和行為的物件的抽象。寶馬汽車 別克汽車 五菱之光汽車.基本具有相同的屬性和行為,所...