整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS Colors
CSS的顏色可以通過以下方法指定：
十六進制顏色
RGB顏色
RGBA顏色
HSL色彩
HSLA顏色
預定義/跨瀏覽器的顏色名稱
十六進制顏色
所有主要瀏覽器都支持十六進制顏色值。
指定一個十六進制的顏色其組成部分是：＃RRGGBB，其中RR（紅色），GG（綠色）和BB（藍色）。所有值必須介于0和FF之間。
<p例如，＃0000FF值呈現(xiàn)為藍色，因為藍色的組成設置為最高值（FF）而其他設置為0。
實例
p
{
background-color:#ff0000;
}
RGB顏色
RGB顏色值在所有主要瀏覽器都支持。
RGB顏色值指定：RGB（紅，綠，藍）。每個參數(shù)（紅色，綠色和藍色）定義顏色的亮度，可在0和255之間，或一個百分比值（從0％到100％）之間的整數(shù)。
例如RGB（0,0,255）值呈現(xiàn)為藍色，因為藍色的參數(shù)設置為最高值（255）而其他設置為0。
此外，下面的值定義相同的顏色：RGB（0,0,255），RGB（0％，0％，100％）。
實例
p
{
background-color:rgb(255,0,0);
}
嘗試一下 ?
RGBA顏色
RGBA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA顏色值是RGB顏色值alpha通道的延伸 - 指定對象的透明度。
RGBA顏色值指定：RGBA（紅，綠，藍，alpha）。 Alpha參數(shù)是一個介于0.0（完全透明）和1.0（完全不透明）之間的參數(shù)。
實例
p
{
background-color:rgba(255,0,0,0.5);
}
HSL顏色
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL顏色值。
HSL代表色相，飽和度和亮度 - 使用色彩圓柱坐標表示。
HSL顏色值指定：HSL（色調(diào)，飽和度，明度）。
色相是在色輪上的程度（從0到360）-0（或360）是紅色的，120是綠色的，240是藍色的。飽和度是一個百分比值;0％意味著灰色和100％的陰影，是全彩。亮度也是一個百分點;0％是黑色的，100％是白色的。
實例
p
{
background-color:hsl(120,65%,75%);
}
嘗試一下 ?
HSLA顏色
HSLA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA的顏色值是一個帶有alpha通道的HSL顏色值的延伸 - 指定對象的透明度。
指定HSLA顏色值：HSLA（色調(diào)，飽和度，亮度，α），α是Alpha參數(shù)定義的不透明度。 Alpha參數(shù)是一個介于0.0（完全透明）和1.0（完全不透明）之間的參數(shù)。
實例
p
{
background-color:hsla(120,65%,75%,0.3);
}
嘗試一下 ?
預定義/跨瀏覽器的顏色名稱
147是在HTML和CSS顏色規(guī)范預定義的顏色名稱。你可以查看我們的預定義顏色名稱表。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
們在設計網(wǎng)站的時候，有時候為了體現(xiàn)出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現(xiàn)傾斜的背景顏色，而是需要通過一些“手段”來實現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現(xiàn)傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現(xiàn)非常簡單，就是利用了 position 這個屬性的 fixed 值來實現(xiàn)的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數(shù)值，而且需要若干個HTML標簽的CSS來配合，從而實現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結(jié)合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內(nèi)容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內(nèi)間距，從而實現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。
在實際內(nèi)容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。
另外，如果想要實現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉(zhuǎn)了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：
當外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁面上部區(qū)域的原理。
那么頁面底部也同樣需要實現(xiàn)這樣傾斜背景顏色的設計，這樣才能將風格一致，產(chǎn)生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內(nèi)容超出這個 div 的區(qū)域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內(nèi)容。
最終的樣子在這篇 CSS 代碼的最后展示出來了。
色搭配不知所措？顏色參考找不到心儀網(wǎng)站？
嘿！收下這份全網(wǎng)更全面的顏色網(wǎng)址吧！
1、Muzli Colors
使用此工具可以快速創(chuàng)建和編輯調(diào)色板，顏色匹配，甚至可以根據(jù)您自己的顏色選擇預覽和下載自定義UI工具包。
鏈接：medium.muz.li
2、Colorable
顏色對比測試儀。
鏈接：https://colorable.jxnblk.com/
3、Color Leap - History’s Palettes
搜索過去4000年來使用的180個調(diào)色板。
鏈接：https://colorleap.app/home
4、Picular
Picular是使用谷歌圖像搜索的火箭快速原色發(fā)生器。
鏈接：https://picular.co/
5、Colourcode
colourco.de是一款在線設計工具，可讓您輕松直觀地組合顏色。
鏈接：https://colourco.de/
6. Palettte App
最終的調(diào)色板編輯和重新映射工具。
鏈接：https://palettte.app/
7、Colorinspire
精選色彩靈感 - 免費用于您的下一個項目。
鏈接：https://www.colorinspire.io/
8、ColorSpace
調(diào)色板生成器和顏色漸變工具。
鏈接：https://mycolor.space/
9、Pigment
一種獨特的方式，可以根據(jù)光線和顏料生成清新鮮艷的色彩，而不是數(shù)學。在幾秒鐘內(nèi)找到一個美麗的免費調(diào)色板，開始您的下一個項目。
鏈接：https://pigment.shapefactory.co/
10、Adobe Color
創(chuàng)建并保存各種顏色方案，每種顏色方案由一組五種顏色組成。
鏈接：https://color.adobe.com/zh/create/color-wheel/
11、Colors & Fonts
Colors＆Fonts是為開發(fā)人員和數(shù)字設計師精心策劃的色彩漸變，調(diào)色板和字體配對靈感的集合。
鏈接：https://www.colorsandfonts.com/
12、HueSnap
獲取顏色信息，創(chuàng)建調(diào)色板并與他人共享。為世界各地的創(chuàng)意人士提供色彩靈感。
鏈接：https://www.huesnap.com/
13、Culrs
Culrs為您提供了一種簡單明智的方法來選擇調(diào)色板。
鏈接：https://culrs.com/#/
14、Eva Design System
使用深度學習驅(qū)動算法生成彩色托盤。
鏈接：https://eva.design/
15、Scale
一種生成色標的生成方式。
鏈接：https://hihayk.github.io/scale/
16、Site Palette
用于生成綜合調(diào)色板的瀏覽器擴展。設計師和前端開發(fā)人員必備的工具。自由配色方案提取。
鏈接：https://palette.site/
17、BrandColors
最大的官方品牌顏色代碼集合。
包括500多個品牌的十六進制顏色代碼，包括Facebook，Twitter，Instagram等等。
鏈接：https://brandcolors.net/
18、Colorwise
在Product Hunt中搜索投票最多的產(chǎn)品。
鏈接：https://colorwise.io/
19、HTML Color Codes
使用我們的顏色選擇器，顏色圖表和帶有Hex顏色代碼，RGB和HSL值的HTML顏色名稱，輕松查找網(wǎng)站的HTML顏色代碼。
鏈接：https://htmlcolorcodes.com/
20、ColorBox
Colorbox是一種用于生成顏色集的顏色工具。
鏈接：https://www.colorbox.io/
21、Generate — Coolors.co
在幾秒鐘內(nèi)創(chuàng)建，保存和分享美麗的調(diào)色板！
鏈接：https://coolors.co/
22、Color — Cloudflare Design
用于界面設計的調(diào)色板工具。
鏈接：https://cloudflare.design/color/
23、Instant Duotone Effect Generator
立即在瀏覽器中創(chuàng)建漂亮的雙色調(diào)效果。上傳您自己的圖像或使用我們的圖像：包括幾十個完美的雙色調(diào)配對。
鏈接：https://medialoot.com/duotones/
24、Color Tool — Material Design
為UI創(chuàng)建和共享調(diào)色板，并測量任何顏色組合的可訪問性。
鏈接：https://material.io/resources/color/
25、Blendy
Blendy是一種快速預覽CSS背景混合模式的工具。您可以使用混合模式，顏色，漸變并在圖像上進行嘗試。
鏈接：https://blendy.ml/
26、LOL Colors
精心調(diào)色的靈感。
鏈接：https://www.webdesignrankings.com/
27、Color Hunt
Color Hunt是一個免費開放的色彩靈感平臺，擁有數(shù)千種時尚的手工挑選調(diào)色板。
鏈接：https://colorhunt.co/
28、ColorMe
可視化CSS顏色功能。
鏈接：https://colorme.io/
29、Polarite
Polarite是一款機器學習輔助決策應用程序，用于生成和諧的配色方案。
鏈接：https://www.polarite.app/
30、Gradient Hunt
每天更新的精選集合中的數(shù)千種時尚色彩漸變。為您的下一個設計項目獲得一個清新的顏色漸變，并保存您喜歡的所有漸變。
鏈接：https://gradienthunt.com/
31、Palettable
使用數(shù)百萬設計師的知識生成美麗的調(diào)色板。
鏈接：https://www.palettable.io/
32、ColorSpark
一種簡單有效的工具，可生成隨機顏色和漸變，幫助設計師將獨特而醒目的調(diào)色板組合在一起。
鏈接：https://colorspark.app/
33、SVG Colorizer
SVG Colorizer，自動著色SVG圖標和SVG矢量。
鏈接：https://www.iconshock.com/svg-color/
34、Sip
適用于Mac的Sip Color Picker。收集整理和分享顏色的更好方法。
鏈接：https://sipapp.io/
35、CoolHue 2.0
獲得免費的草圖漸變顏色插件和漸變集合調(diào)色板。
鏈接：https://webkul.github.io/coolhue/
36、Color Koala
Color Koala是一款快速調(diào)色板生成器，可為您的所有側(cè)面項目創(chuàng)造出華麗的色彩。
鏈接：https://colorkoala.xyz/
37、SchemeColor
SchemeColor.com是一個頂級網(wǎng)站，可以下載，創(chuàng)建和分享數(shù)以千計的美麗色彩組合。
獲取有關(guān)十六進制顏色代碼的詳細信息，并將其轉(zhuǎn)換為RGB和CMYK等效代碼。
鏈接：https://www.schemecolor.com/
38、Free Mesh Gradient Collection
.sketch，.png，.ai，.jpg，.eps中的100目漸變。
鏈接：https://www.ls.graphics/meshgradients
39、WebGradients
來到WebGradients.com，獲得CSS3，Photoshop和Sketch中180個漂亮的線性漸變。此系列由頂級設計師策劃，完全免費。
鏈接：https://webgradients.com/
40、Gradient Buttons
美麗的梯度按鈕與懸停效果。
鏈接：https://gradientbuttons.colorion.co/
41、ColorKit
ColorKit混合顏色并生成顏色的色調(diào)和色調(diào)。
鏈接：https://colorkit.io/
42、Eggradients
準備使用漸變背景顏色。根據(jù)最新的設計趨勢準備Cool Gradients。它以雞蛋的形式供應。使用十六進制和CSS代碼。
鏈接：https://www.eggradients.com/
43. Cool Backgrounds
探索精美的精選背景，您可以添加到博客，網(wǎng)站或桌面和手機壁紙。
鏈接：https://coolbackgrounds.io/
44、Google Art & Culture Experiment — Art Palette
Art Palette是藝術(shù)與文化實驗的一部分，該實驗探索用戶與藝術(shù)收藏品互動的創(chuàng)新方式。
使用Art Palette，您可以搜索與您選擇的顏色組合相匹配的藝術(shù)作品。
鏈接：https://artsexperiments.withgoogle.com/artpalette/
45、GradPad
CSS漸變生成器，在瀏覽器中為Web設計創(chuàng)建可愛的CSS顏色漸變。
鏈接：http://ourownthing.co.uk/
46、Khroma
Khroma是生成，發(fā)現(xiàn)，搜索和保存您想要使用的顏色組合和調(diào)色板的最快方法。
鏈接：http://khroma.co/
47、Color palettes
瀏覽Canva的數(shù)千種顏色組合，無需聘請設計師即可創(chuàng)建自己的設計。免費！
鏈接：https://www.canva.com/colors/color-palettes/
48、Color Safe
Color Safe是一種工具，可根據(jù)Web內(nèi)容可訪問性指南（WCAG）為您的網(wǎng)站探索美觀，易用的調(diào)色板。
鏈接：http://colorsafe.co/
49、Paletton
使用色輪創(chuàng)建出色的調(diào)色板。
鏈接：https://paletton.com/
50、Colordot
簡單的顏色選擇每個人。
鏈接：https://color.hailpixel.com/
51、Colors
顏色是100％數(shù)據(jù)驅(qū)動的調(diào)色板集合。
鏈接：https://klart.io/colors
52、Contrast Ratio
輕松計算顏色對比度。通過WCAG從未如此簡單！
鏈接：https://contrast-ratio.com
53、Color Lisa
世界上最偉大的藝術(shù)家的色彩杰作。
鏈接：http://colorlisa.com/
54、Color Designer
此工具的主要目的是幫助構(gòu)建調(diào)色板并基于它生成色調(diào)和陰影。只需選擇一種顏色，應用程序完成其余的工作。您可以使用預選顏色或顏色選擇器進行更多控制。
鏈接：https://colordesigner.io/
55、Color.review
用于探索和查找可訪問顏色的現(xiàn)代工具。確保每個人都能看到您的作品。
鏈接：https://color.review/
56、Blend
Blend - 創(chuàng)建和自定義漂亮的CSS3漸變。
鏈接：http://www.colinkeany.com/blend
57、Contrast
用于快速訪問WCAG色彩對比度的macOS應用程序。
鏈接：https://usecontrast.com/
58、Grabient
用于生成Web漸變的美麗而簡單的UI。
鏈接：https://www.grabient.com/
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
