整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS Colors
CSS的颜色可以通过以下方法指定：
十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称
十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。
<p例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。
实例
p
{
background-color:#ff0000;
}
RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（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参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
实例
p
{
background-color:rgba(255,0,0,0.5);
}
HSL颜色
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。
HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL颜色值指定：HSL（色调，饱和度，明度）。
色相是在色轮上的程度（从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（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
实例
p
{
background-color:hsla(120,65%,75%,0.3);
}
尝试一下 »
预定义/跨浏览器的颜色名称
147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。
在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：
那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：
首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。
我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 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>为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。
在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。
另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。
在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：
当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。
那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。
最终的样子在这篇 CSS 代码的最后展示出来了。
色搭配不知所措？颜色参考找不到心仪网站？
嘿！收下这份全网更全面的颜色网址吧！
1、Muzli Colors
使用此工具可以快速创建和编辑调色板，颜色匹配，甚至可以根据您自己的颜色选择预览和下载自定义UI工具包。
链接：medium.muz.li
2、Colorable
颜色对比测试仪。
链接：https://colorable.jxnblk.com/
3、Color Leap - History’s Palettes
搜索过去4000年来使用的180个调色板。
链接：https://colorleap.app/home
4、Picular
Picular是使用谷歌图像搜索的火箭快速原色发生器。
链接：https://picular.co/
5、Colourcode
colourco.de是一款在线设计工具，可让您轻松直观地组合颜色。
链接：https://colourco.de/
6. Palettte App
最终的调色板编辑和重新映射工具。
链接：https://palettte.app/
7、Colorinspire
精选色彩灵感 - 免费用于您的下一个项目。
链接：https://www.colorinspire.io/
8、ColorSpace
调色板生成器和颜色渐变工具。
链接：https://mycolor.space/
9、Pigment
一种独特的方式，可以根据光线和颜料生成清新鲜艳的色彩，而不是数学。在几秒钟内找到一个美丽的免费调色板，开始您的下一个项目。
链接：https://pigment.shapefactory.co/
10、Adobe Color
创建并保存各种颜色方案，每种颜色方案由一组五种颜色组成。
链接：https://color.adobe.com/zh/create/color-wheel/
11、Colors & Fonts
Colors＆Fonts是为开发人员和数字设计师精心策划的色彩渐变，调色板和字体配对灵感的集合。
链接：https://www.colorsandfonts.com/
12、HueSnap
获取颜色信息，创建调色板并与他人共享。为世界各地的创意人士提供色彩灵感。
链接：https://www.huesnap.com/
13、Culrs
Culrs为您提供了一种简单明智的方法来选择调色板。
链接：https://culrs.com/#/
14、Eva Design System
使用深度学习驱动算法生成彩色托盘。
链接：https://eva.design/
15、Scale
一种生成色标的生成方式。
链接：https://hihayk.github.io/scale/
16、Site Palette
用于生成综合调色板的浏览器扩展。设计师和前端开发人员必备的工具。自由配色方案提取。
链接：https://palette.site/
17、BrandColors
最大的官方品牌颜色代码集合。
包括500多个品牌的十六进制颜色代码，包括Facebook，Twitter，Instagram等等。
链接：https://brandcolors.net/
18、Colorwise
在Product Hunt中搜索投票最多的产品。
链接：https://colorwise.io/
19、HTML Color Codes
使用我们的颜色选择器，颜色图表和带有Hex颜色代码，RGB和HSL值的HTML颜色名称，轻松查找网站的HTML颜色代码。
链接：https://htmlcolorcodes.com/
20、ColorBox
Colorbox是一种用于生成颜色集的颜色工具。
链接：https://www.colorbox.io/
21、Generate — Coolors.co
在几秒钟内创建，保存和分享美丽的调色板！
链接：https://coolors.co/
22、Color — Cloudflare Design
用于界面设计的调色板工具。
链接：https://cloudflare.design/color/
23、Instant Duotone Effect Generator
立即在浏览器中创建漂亮的双色调效果。上传您自己的图像或使用我们的图像：包括几十个完美的双色调配对。
链接：https://medialoot.com/duotones/
24、Color Tool — Material Design
为UI创建和共享调色板，并测量任何颜色组合的可访问性。
链接：https://material.io/resources/color/
25、Blendy
Blendy是一种快速预览CSS背景混合模式的工具。您可以使用混合模式，颜色，渐变并在图像上进行尝试。
链接：https://blendy.ml/
26、LOL Colors
精心调色的灵感。
链接：https://www.webdesignrankings.com/
27、Color Hunt
Color Hunt是一个免费开放的色彩灵感平台，拥有数千种时尚的手工挑选调色板。
链接：https://colorhunt.co/
28、ColorMe
可视化CSS颜色功能。
链接：https://colorme.io/
29、Polarite
Polarite是一款机器学习辅助决策应用程序，用于生成和谐的配色方案。
链接：https://www.polarite.app/
30、Gradient Hunt
每天更新的精选集合中的数千种时尚色彩渐变。为您的下一个设计项目获得一个清新的颜色渐变，并保存您喜欢的所有渐变。
链接：https://gradienthunt.com/
31、Palettable
使用数百万设计师的知识生成美丽的调色板。
链接：https://www.palettable.io/
32、ColorSpark
一种简单有效的工具，可生成随机颜色和渐变，帮助设计师将独特而醒目的调色板组合在一起。
链接：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
获得免费的草图渐变颜色插件和渐变集合调色板。
链接：https://webkul.github.io/coolhue/
36、Color Koala
Color Koala是一款快速调色板生成器，可为您的所有侧面项目创造出华丽的色彩。
链接：https://colorkoala.xyz/
37、SchemeColor
SchemeColor.com是一个顶级网站，可以下载，创建和分享数以千计的美丽色彩组合。
获取有关十六进制颜色代码的详细信息，并将其转换为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混合颜色并生成颜色的色调和色调。
链接：https://colorkit.io/
42、Eggradients
准备使用渐变背景颜色。根据最新的设计趋势准备Cool Gradients。它以鸡蛋的形式供应。使用十六进制和CSS代码。
链接：https://www.eggradients.com/
43. Cool Backgrounds
探索精美的精选背景，您可以添加到博客，网站或桌面和手机壁纸。
链接：https://coolbackgrounds.io/
44、Google Art & Culture Experiment — Art Palette
Art Palette是艺术与文化实验的一部分，该实验探索用户与艺术收藏品互动的创新方式。
使用Art Palette，您可以搜索与您选择的颜色组合相匹配的艺术作品。
链接：https://artsexperiments.withgoogle.com/artpalette/
45、GradPad
CSS渐变生成器，在浏览器中为Web设计创建可爱的CSS颜色渐变。
链接：http://ourownthing.co.uk/
46、Khroma
Khroma是生成，发现，搜索和保存您想要使用的颜色组合和调色板的最快方法。
链接：http://khroma.co/
47、Color palettes
浏览Canva的数千种颜色组合，无需聘请设计师即可创建自己的设计。免费！
链接：https://www.canva.com/colors/color-palettes/
48、Color Safe
Color Safe是一种工具，可根据Web内容可访问性指南（WCAG）为您的网站探索美观，易用的调色板。
链接：http://colorsafe.co/
49、Paletton
使用色轮创建出色的调色板。
链接：https://paletton.com/
50、Colordot
简单的颜色选择每个人。
链接：https://color.hailpixel.com/
51、Colors
颜色是100％数据驱动的调色板集合。
链接：https://klart.io/colors
52、Contrast Ratio
轻松计算颜色对比度。通过WCAG从未如此简单！
链接：https://contrast-ratio.com
53、Color Lisa
世界上最伟大的艺术家的色彩杰作。
链接：http://colorlisa.com/
54、Color Designer
此工具的主要目的是帮助构建调色板并基于它生成色调和阴影。只需选择一种颜色，应用程序完成其余的工作。您可以使用预选颜色或颜色选择器进行更多控制。
链接：https://colordesigner.io/
55、Color.review
用于探索和查找可访问颜色的现代工具。确保每个人都能看到您的作品。
链接：https://color.review/
56、Blend
Blend - 创建和自定义漂亮的CSS3渐变。
链接：http://www.colinkeany.com/blend
57、Contrast
用于快速访问WCAG色彩对比度的macOS应用程序。
链接：https://usecontrast.com/
58、Grabient
用于生成Web渐变的美丽而简单的UI。
链接：https://www.grabient.com/
*请认真填写需求信息，我们会在24小时内与您取得联系。
