一、互補(bǔ)色
當(dāng)兩個(gè)顏色恰好在色環(huán)的兩端時(shí)，這兩個(gè)顏色叫做補(bǔ)色。補(bǔ)色搭配能形成強(qiáng)列的對(duì)比效果

在線配色工具地址

文字背景色和文字顏色互為補(bǔ)色，文字會(huì)很難看清，那么就只使用一種顏色作為主要顏色，其補(bǔ)色用來(lái)裝點(diǎn)頁(yè)面
比如，使用 深青色(#09A7A1) 作為頁(yè)面主色，使用其補(bǔ)色 橙色(#FF790E) 來(lái)裝飾登錄按鈕

二、css3 里面的 hsl() 調(diào)整顏色的色相
hsl 括號(hào)里面有三個(gè)參數(shù)：? 色相 hue / 飽和度 saturation / 亮度 lightness

• 色相
  色相是色彩的基本屬性，就是平常所說(shuō)的顏色名稱(chēng)，如紅色、黃色等。以顏色光譜為例，光譜左邊從紅色開(kāi)始，移動(dòng)到中間的綠色，一直到右邊的藍(lán)色，色相值就是沿著這條線的取值。在hsl()里面，色相用色環(huán)來(lái)代替光譜，色相值就是色環(huán)里面的顏色對(duì)應(yīng)的從 0 到 360 度的角度值。
• 飽和度
  飽和度是指色彩的純度，也就是顏色里灰色的占比，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。
• 亮度
  亮度決定顏色的明暗程度，也就是顏色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

顏色HSL

紅色	hsl(0, 100%, 50%)
黃色	hsl(60, 100%, 50%)
綠色	hsl(120, 100%, 50%)
藍(lán)綠色	hsl(180, 100%, 50%)
藍(lán)	hsl(240, 100%, 50%)
品紅	hsl(300, 100%, 50%)

三、更改 s 和 l 的值，可以調(diào)整顏色的色調(diào)：
飽和度代表灰色的占比，亮度代表白色和黑色的占比。這在當(dāng)你有了一個(gè)基色調(diào)卻需要微調(diào)時(shí)非常有用。

四、css3 線性漸變
linear-gradient(gradient_direction, color1, color2....)
第一個(gè)參數(shù)指定了顏色過(guò)渡的方向 - 它的值是角度，90deg 代表垂直漸變，45deg 的漸變角度和反斜杠方向差不多。剩下的參數(shù)指定了漸變顏色的順序：

background: linear-gradient(35deg, #CCFFFF, #FFCCCC);

五、使用 css 線性漸變創(chuàng)建條紋元素
repeating-linear-gradient() 語(yǔ)法形式

repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )\---------------------------------/ \----------------------------/漸變軸的定義 色標(biāo)列表where <side-or-corner> = [left | right] || [top | bottom]and <color-stop> = <color> [ <percentage> | <length> ]? #grad1 {background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%,rgb(100,100,100) 10%); }#grad2 {background-image: repeating-linear-gradient(-45deg,transparent,transparent 25px,rgba(255,255,255,1) 25px,rgba(255,255,255,1) 50px); } <ol><li>Repeating horizontal bars<div id="grad1"></div></li><li>Zebra stripes<div id="grad2"></div></li> </ol>

效果

因?yàn)?gradient 屬于 image 數(shù)據(jù)類(lèi)型只能在 image 的地方使用它們，如 background-image ，不適合在 background-color / color 里面使用

六、利用 url() 給整個(gè) body 上紋理或者圖案背景

body {background-image: url(文件路徑); /*最終這個(gè)圖案會(huì)一直重復(fù)鋪，直到鋪滿整個(gè)頁(yè)面*/ }

七、利用偽元素，畫(huà)心形

總結(jié)

以上是生活随笔為你收集整理的关于页面配色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。