整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
谢你关注“最佳应用”
每篇文章解决某行业或某人群的一个痛点
第五十三期原创文章
By：小佳
国庆小长假即将结束，不知道朋友们过的怎么样，今年这个小长假小佳基本都在朋友的婚礼中度过，从今天开始对我而言小长假已经结束，正式开始投入工作中，继续为大家分享好玩、有趣且实用的软件工具。
今天这篇文章的灵感来源于我的大学老师，之前上设计课的时候，记得老师给我们分享过3个配色网站，当时看了还是相当惊讶和喜欢，但最近我才发现原来关于配色的优质网站工具实在太多，而且远比老师分享的好。
今天小佳就分享10个我最近整理且收藏的“配色”网站工具。
双色调生成器是一个可以将任何图片都能一键生成双色图的在线工具，目前拥有15种双色调，一种灰色调，生成的图片更加拥有统一性。
通过这个工具，你可以直接将平台本身的图片生成各种双色调图片，也可以直接上传自己的本地的图片生成，点击左侧双色调即可更换。
生成的图片下载也是非常简单，点击上方的「下载」按钮即可下载。
这个网站最大的用处我觉得是生成统一配色的图片，对于经常要制作PPT或者网站视频内容封面的人来说相当实用，而且方便高效。
这个是国外一个超棒的渐变颜色网站，网站目前拥有几百个漂亮的配色方案，支持下载渐变图，也可以直接查看色号。
平时经常用PS做设计的朋友，配色绝对是刚需，小佳制作封面的时候，有时候也会考虑到背景颜色，这里寻找渐变的背景还是不错的。
这个配色网站在设计行业基本人人都会知道，这个也是当年我上设计课的时候老师推荐我们的，当时第一感觉就是中国色真的漂亮。
光是红色就有几十种红色，估计能全部认出来的没几个。
这个网站收集中国特色的颜色，网站排版也是非常漂亮，每一种颜色都有对应的CMYK和RGB数值，可以方便的用到其他设计软件。
这个也是一个非常不错的配色网站，整体色调偏柔和和女性化一点，对于喜欢小清新设计风格的人来说，这个网站值得收藏。
对于你喜欢的配色，你可以直接查看颜色的数值，额可以复制CSS，点击右上角可以直接下载配色的PNG图片。
这个网站最大的功能就是分析图片的颜色，比如我们平时看到一张非常不错的海报，想要学习人家的配色，你可以用手机拍摄下来。
点击「上传」直接上传想要分析色彩的图片。
我特意将今天的文章封面的图片上传上去，直接将图片的所有配色都显出了，你可以随意查看颜色数值。
此外，这个网站本身也提供了不少主流的配色方案。
最后一个就是色卡功能，平台收集了很多不错的颜色，看到自己喜欢的颜色，可以将色颜色数值记录下来，然后直接使用。
这是一个互动性很强的配色网站，左边可以选择2种、3种、4种及多种颜色搭配，右侧会直接将这些颜色所有的搭配方案都展现。
我特意给大家录制的一个动图，大家可以看看效果。
网页下方会根据你上面选择的颜色搭配展示一些搭配后的设计效果，对于一些经常需要扁平化设计的朋友来说非常实用。
这个网站是我最喜欢的网站之一，通过大自然的植物，山水，风景等生成的舒适自然的颜色搭配，让设计更加富有灵动性。
而且网站可以根据颜色寻找自然风光搭配，拥有春夏秋冬四大分类。
每种颜色都有对应的颜色代码，你可以轻松复制使用。
这个网站对于找配图的人来说非常实用，经常做PPT想要插入各种图片，而且想要色调一致，这个网站完全可以搞定。
左侧是图片的类型，右侧可以直接选择想要的色调，所有的配图都会自动更改为你选择的颜色，做几张对比图看看效果。
重点是里面的插图可以直接商用，点击可以下载PNG和SVG两种格式，而且还没有任何水印，使用起来就比较方便了。
以上这8个网站是小佳从全球上百个色彩搭配网站中找到的最佳网站，每一个都经过我仔细的测评才推荐给大家。
相信对于很多学生和设计师朋友而言，这类网站相当实用，其实无论是否从事设计，偶尔打开这些网站看看，绝对对自己的审美也有很大帮助。
关注我的头条号，私信回复「配色」获取所有网站
们在做网页时，经常会用到十六进制颜色代码，一个漂亮的网页，它的颜色搭配必定有讲究，下表是一些常用的颜色及十六进制颜色代码对照，记录在此，以便查阅！
CSS技术中，许多属性都要用到颜色取值，例如background-color、border-color、outline-color等。本文主要为大家讲解颜色的三个要素，以及各种颜色取值的格式和原理。
承接文章：页面不受客户字体安装限制，CSS3的服务器端字体，使用起来很方便
技术等级：中级 | 适合有一定的CSS基础人士阅读。
一、颜色的三要素：
颜色的三要素
颜色是由波长不同的电磁波产生的。在人们的生活中，颜色对于大多数人来说是一个笼统的概念。我们经常会说“这件毛衣是红色的”，或者“我今天看上了一个蓝色的包包”等等。这些说法反映了人们对于颜色最直观的认识。
要想让计算机也能识别颜色，上述这些最直观的认识是远远不够的。计算机之所以能够调整出各种颜色，是因为我们用三个非常重要的要素明确了颜色的最终显示。也就是说，计算机只要确定了这三个要素，颜色也就确定了下来。
颜色的三要素是：
色相
明度
饱和度
色相（Hue），被定义为“色彩的相貌”。就是我们俗称的“什么颜色”。全色谱色相包括七种，它们分别是：红、橙、黄、绿、青、蓝、紫。要想确定颜色，首先要明确色相。色相的取值范围是0-360，单位为度。正好构成了一个圆形，也被人们称为“色相环”。
色相环
大家可以一起来看上图的色相环，0度表示的是红色，90度表示的是绿色，与红色相对的180度为青色，270度表示的是蓝色，最后360度又回到了红色。这就是构成颜色第一个像素的最基本的七种颜色。
饱和度（Saturation），被定义为“颜色的纯度”，取值范围是0%-100%。一个颜色的饱和度取值为100%，说明该颜色没有添加其他颜色，或者说这时的颜色最纯。一个颜色的饱和度取值为0%，就变成了灰色。
饱和度
明度（Brightness），被定义为“颜色的亮度”，取值范围是0%-100%。一个颜色的明度取值为100%，说明这时的颜色最亮。一个颜色的明度取值为0%，就变成了黑色。
我们看一看Photoshop中的拾色器，会对这三个要素理解得更加透彻。
Photoshop 拾色器
Photoshop的拾色器中，指示HSB的三个文本框就分别表示色相、饱和度、明度。中间的竖行就是色相环，可以看出，从下向上分别是全色谱色相中的七个颜色。最下方是红色，最上方也是红色。左侧最大的矩形区域是用来调整饱和度和明度的。
大家可以试一试，在这个区域水平拖拽鼠标，调整的是饱和度，也就是S项，最左侧为灰色，最右侧为最饱和的色相颜色。在这个区域垂直拖拽鼠标，调整的是明度，也就是B项，最底部是黑色，最顶部是最亮的色相颜色。
二、RGB颜色代码：
RGB是一种在电子设备上使用的颜色模式，这种颜色模式利用三种基本的颜色混合得到成千上万的颜色。这三种基本的颜色就是R（红色）、G（绿色）、B（蓝色）。
在这种颜色模式中，三种基本颜色中的任意一种取值范围是0-255，十六进制表示为0-FF。当取值为0时，表示最终的颜色里不包含这种基本颜色。当取值为255或者FF时，表示最终的颜色里包含最多的这种基本颜色。
RGB颜色代码一般采用十六进制的形式表示。要求以#开头，用六位十六进制数值组成。前两位表示红色的成分，中间两位表示绿色的成分，最后两位表示蓝色的成分。所以RGB颜色代码的格式如下：
#RRGGBB
这就可以分析除下列数据：
红色的RGB颜色代码为：#ff0000
绿色的RGB颜色代码为：#00ff00
蓝色的RGB颜色代码为：#0000ff
三、CSS中颜色的取值：
在CSS技术中，颜色可以有多种取值，大家熟悉的包括颜色的英文单词、十六进制颜色代码等。除此之外，CSS3还扩展了许多新的可选的颜色表示方式。这里总结CSS中颜色的取值如下：
颜色的英文单词
十六进制颜色代码：#RRGGBB
十进制颜色代码：rgb(r,g,b)
带有不透明度通道的十进制颜色代码：rgba(r,g,b,a)
三要素颜色代码：hsb(h,s,b)
带有不透明度通道的三要素颜色代码：hsba(h,s,b,a)
这里，以纯红色为例，它的颜色代码可以表示为：
red
#ff0000
rgb(255,0,0)
rgba(255,0,0,1)
hsb(0,100,100)
hsba(0,100,100,1)
其中rgba()和hsba()都带有一个a通道，这个通道被称为alpha通道，是用来调整颜色的不透明度的。取值范围为0-1，当取值为0时表示完全透明，当取值为1时表示完全不透明。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
在下一篇文章中，小海前端（头条号）将为大家介绍CSS3提供的背景属性。CSS3在原有背景属性的基础上增添了几个属性，使得设置背景更加的灵活，也能完成更加复杂的设计了。希望正在学习CSS技术或前端开发的小伙伴们一定不要错过。
*请认真填写需求信息，我们会在24小时内与您取得联系。
