整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
色搭配不知所措？颜色参考找不到心仪网站？
嘿！收下这份全网更全面的颜色网址吧！
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/
于任何网站而言，配色方案都是其中最关键的影响因素之一。你可以使用你所熟悉的配色方案，也可以跳出来选择更加大胆、明快、更有性格的配色方案，它们或许更容易给人留下深刻的印象。
而今天我们要说的，是黄色。作为暖色调，黄色象征能量，带来温度，充满生命力，它可以让你的网站看起来更具有亲和力，舒适而温馨。毫无疑问，黄色色调的网站设计大多都非常的醒目，让人难以忽视。
但是同时，它也是一个不容易掌控的颜色，一个不小心可能会毁掉网站的整个设计。所以，你需要清楚地了解黄色的运用手法——比如先看看那些设计优秀的网站是怎样使用大面积黄色色调的。在黄色作为主色调/背景色的时候，文字内容如何展现，各种控件如何使用，这些都值得学习。
明快的黄色和动感的舞蹈有着天然的契合度，这也是为什么瑞士城市舞蹈学院选择使用黄色作为网站的主色调。为了确保网站内容的识别度，设计师采用的是黄黑搭配。
拥有韩国血统的摄影师JamesTupper 也在设计他的作品展示页的时候选择了黄色作为主色调。 在字体配色上，他同样选取了黑色。
YAY 是一个平面设计类的合集网站，黄黑的配色使得文字内容无比的醒目。
黄色的色调和其他的色彩也可以很好的搭配，重要的是控制好对比度，这里的插画的色调控制就非常合理，不会太深，但是和背景的黄色形成了很好的对比。
这是一位来自英国剑桥、获得过不少奖项的设计师的个人作品网站。网站设计大气，但是它最大的特色是交互，无论你是在桌面端、平板还是手机上访问，交互的丰富度都非常的强。
Croscon 是一个植根于设计和数字制造业的定制化软件，网站的配色主色调黄色使用了黑色和白色来做搭配。
Vivedmv 的网站所用的黄色饱和度相对较低，看起来也更加复古，搭配上复古的字体、图形元素，整体的氛围非常的一致。
这个网站在功能开发和内容策略上达到了一个不错的平衡，在色调的搭配上也很好的体现出了设计、开发和内容三方面的功力。
依然是黄、黑、白的色彩搭配，经典的黄黑支撑起整个视觉，而白色在整个配色中显得更加醒目，它承载了LOGO、副标题和关键性的按钮。
作为一个在线学习网站，Lambda 所用的主题基本上是经过深度定制的，深蓝灰和白色占据了大量的面积，而黄色在整个网站中作为提亮色，很好的强调了关键性的内容与操作。
Fitness 是一个为健身房和运动所定制的一个WP主题，极简的风格、黄黑为主的色彩搭配让这个主题在视觉上颇为突出。
Mobirise 是一个免费的BootStrap 模板，整体设计风格非常现代。和前面许多网站在配色上不同，它没有使用黄黑来搭配，而是使用偏橙色的黄色和灰色搭配起来，文字内容则使用了白色。
ENERGY 是一个运动健身类的WP主题，黄色醒目的特色在这个主题中被体现的淋漓尽致。
Ethanol Portfolio 是一个干净简约的免费Bootstrap 网站模板，这个简约的模板是多功能的。黄色的文本标题在暗色调的背景上显得无比清晰。
Xpress 用作作品展示或者时尚类的内容网站都是是相当不错的选择，黄色这一配色在网站中被很好的运用了起来。
Darklowpress 是一个WP博客主题，大量的可定制的轮播图能够让你更好的展示多媒体信息。
Pluton 是一款现代多功能的HTML5着陆页，基于BootStrap来开发的。整个网站使用了许多最新的HTML5、CSS3 和 jQuery 技术。
Agency 是一款有范儿的单页式Bootstrap主题，对于商业机构和小公司而言，这个主题相当的不错。这套主题的设计则是基于Golden PSD。
这个网站是一个为出租车公司所设计的，黄色的色调和出租车的基础色调保持了一致。
Hotel Deluxe 同样是一个响应式的网页模板，其中黄色也是网站中最醒目的色彩而起到关键性的作用。
内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 1100+ 字，整篇阅读约需 2 分钟。
今天分享一段优质 CSS 代码片段，应用灰度效果，让页面变成黑白显示。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
body {
filter: grayscale(1); // 1相当于100%
}分享原因
这段代码展示了如何使用 CSS 滤镜来将整个网页变为灰度效果。
在特殊的日子里，网页有整体变灰色的需求，可以使用这段代码，这个需求很有必要。
再就是做一些老照片或黑白电影的效果，也可以使用这段代码。
代码解析
1. 选择器 body
这一部分选择了 HTML 文档的 <body> 元素，即整个网页的主体。
CSS 的 filter 属性通常用于图像，但也可以应用到其他任何 HTML 元素上。
2. grayscale(1);
grayscale 滤镜将元素的颜色变成灰度效果。
参数 1 表示 100% 灰度，参数 0 表示无灰度效果。
3. filter 所有属性值 大盘点！
CSS 的 filter 属性提供了多种图形效果，且这些属性值可以组合用起来，且可以应用于任何元素。
以下是 filter 属性的所有值及其详细解释：
blur()
功能：应用模糊效果。
参数：接受一个长度值（如 px、em），默认值是 0。
示例：filter: blur(5px);
brightness()
功能：调整图像的亮度。
参数：接受一个数值，1 为原始亮度。值小于 1 会降低亮度，值大于 1 会增加亮度。
示例：filter: brightness(0.5);
contrast()
功能：调整图像的对比度。
参数：接受一个数值，1 为原始对比度。值小于 1 会降低对比度，值大于 1 会增加对比度。
示例：filter: contrast(200%);
drop-shadow()
功能：应用阴影效果。
参数：类似于 box-shadow，包括偏移量、模糊半径和颜色。
示例：filter: drop-shadow(10px 10px 10px #000);
grayscale()
功能：将图像变为灰度。
参数：接受一个 0 到 1 之间的数值，0 为无灰度，1 为完全灰度。
示例：filter: grayscale(1);
hue-rotate()
功能：旋转图像的色相。
参数：接受一个角度值，单位为度（deg）。
示例：filter: hue-rotate(90deg);
invert()
功能：反转图像的颜色。
参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全反转。
示例：filter: invert(1);
opacity()
功能：调整图像的透明度。
参数：接受一个 0 到 1 之间的数值，0 为完全透明，1 为完全不透明。
示例：filter: opacity(0.5);
saturate()
功能：调整图像的饱和度。
参数：接受一个数值，1 为原始饱和度。值小于 1 会降低饱和度，值大于 1 会增加饱和度。
示例：filter: saturate(2);
sepia()
功能：将图像变为棕褐色。
参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全棕褐色。
示例：filter: sepia(1);
url()
功能：引用 SVG 滤镜。
参数：接受一个 URL，指向一个包含 SVG 滤镜的文件。
示例：filter: url(#filter-id);
- end -
*请认真填写需求信息，我们会在24小时内与您取得联系。
