作为一个互联网从业者，会有很多地方需要你具备一定的设计的视感，而颜色搭配更是其中非常关键的一环，无论是你做产品设计、网页设计、店铺设计…等，到底什么颜色相互搭配会更协调呢？
Coolors可以协助你解决这个问题，它是一个超级快的调色板生成器！能够给你各种颜色搭配参考创意，同时也可以按照你自定义的单个或多个颜色自己去调配合适的搭配。
这里建议还是打开梯子再进入网站！！！它是一个用颜色组成的网站，连注册接码都充满颜色的元素。
Coolors
一、界面介绍
二、调色板创建与介绍
工具栏介绍
调色板生成器
探索调色板
图像选取器
颜色对比度检查器
工具种的其他颜色或字体功能
Jobs
调色板编辑栏
设置图标
图像选择器 & 配色卡制作工具
氪金项目：视图调色板变体 & 检查调色板对比度
色盲模式 & 调色板调整
调色板
色块图标
增加不同色块之间的过渡色
三、色相
互补色
对比色
邻近色
类似色
一、界面介绍
Coolors的首页简洁，基本分为三个部分：主功能界面、应用程序界面和用户公司介绍。（建议在梯子环境下运行；进入网站后请先注册，QQ邮箱也可）
主功能界面主要就是介绍Coolors二大功能，一个是调色板功能，另外一个是探索别人分享的颜色板；如上图，点击红色框和红色框对应的面板是创建你自己的调色板功能界面；绿色的则是探索别人分享的颜色板。
应用程序界面在下图红色方框内，支持IOS、Android、Chrome、Adobe、Figma的下载或插件的操作使用方式。
用户公司介绍是绿色方框内，看得出来这个网站受众是非常广而且很多设计师都在使用它。
二、调色板创建与介绍
在主功能界面内点击红色方框或红色箭头标注的地方都是跳转到创建调色板功能界面。
调色板主要的控制面板分3个部分，其中最常用的是第3部分，也就是中间占比最大的部分。（因为Jimmy没有冲会员，所以屏幕上广告点不掉。）
1.工具栏介绍：主要内容有Tools和Jobs，Go Pro和Sign In都是账户方面的功能。这里为了方便查看，直接上翻译工具了。
Tools：如下图（Coolors tools）
调色板生成器：
在几秒钟内创建新的调色板，也就是点击之后它会自动给你生成一套颜色给你参考编辑。
如下图，点击之后，Coolors给了我另外一套颜色模板让我编辑。
探索调色板：
该选项可以直接跳转至别人分析的调色板界面，可以在这里找到自己的颜色灵感，直接借鉴整个调色板或者单个颜色都是没有问题的。
图像选取器：
从照片中提取美丽的调色板；顾名思义，可以直接从照片中提取颜色到自己的调色板。如下图：
左侧是控制面板，可以导入你想要选色的图片。
精选调色板：拖动它可以得到Coolors对该图片内不同的颜色搭配调整。
调色板：点击颜色可以定位到图片该颜色的区域，同时你也可以对该颜色进行拖动处理，定制你们喜欢需要的颜色。
在图像选取器里确定颜色后，直接点击到处调色板，如下图提示：
导出调色板：点击之后会得到如下提示，根据自己需要导出使用即可。
如果还需要继续添加或者编辑色彩，直接点击URL（网址），然后再在网页网址一栏复制出URL进入就可跳转到Coolors的调色板界面了。
颜色对比度检查器：
检查二种颜色之间的对比度。
计算文本和背景颜色的对比度。
如下图，可以自行输入文本和背景的色号，然后右边是使用你的色号案例（示例的文字颜色在示例的背景下的效果），同时Coolors还会给这个颜色组合进行打分。（调色板里有快捷黑和白色的文本与背景颜色的对比计算。）
工具种的其他颜色或字体功能：
字体，颜色列表，渐变…等这些功能都是类似调色板和探索调色板的界面结构一样，大家有需要可以自己进去点击使用，操作非常简单。
Jobs（找工作）
是的，你没看错，这一工具栏的第二个功能就是找工作。
（貌似是八个月以前的信息，大家自行分辨，我只是好奇看看，就不介绍了。）
2：是调色板编辑栏，基本都是工具栏重叠的功能，然后就是氪金项目，只不过是可以直接在你调色板编辑使用。
设置图标：
生成方式：如图二，除了第一个，下面的全是需要氪金才能使用的项目，大家有钱人可以自行摸索。
设置：图三，主要就是隔离颜色（你调色板颜色之间会有空白隔离），禅宗模式=全屏模式。
观看教程：点击之后会有简单教程指引，教你如何操作。
接下来看第二、三的图标，这二个图标分别是图像选取器和配色卡制作工具。（在这二个图标之后的左箭头和右箭头图标分别是“返回上一步”与“回到下一步”）
大家自己多点点，就知道大概用途了，操作简单。
氪金项目：视图调色板变体 & 检查调色板对比度
调色板变体
检查调色板对比度
因为是氪金项目，具体是否实用，大家自行摸索。
色盲模式 & 调色板调整
色盲模式
调色板调整
3：调色板介绍
下图是Coolors调色板界面，功能实用，操作简单，将鼠标移动到对应色块会显示一系列图标，移动到二色块交接处会有一个加号图标。
色块内的图标从上到下依次是：
移除色块图标
检查对比度（查看在此背景下适用的字体颜色）
色调图标
标记喜欢
拖动图标
复制色号图标
锁定图标
色块中对应的色号数字也是可以点击弹出面板进行调整的
主要展示介绍：对比度图标和色调图标。如下图
对比度图标（图左）：Coolors会自动评估不同颜色字体在此颜色背景下的可行度，非氪金用户，只能看到黑白字体的效果评估。
色调图标（图右）：点击之后会得到该颜色由深到浅的不同的颜色，供我们选择，如果该颜色你很喜欢，却又达不到你期望的字体颜色对比度，那么可以点开这里，选择这个颜色中更加适合你对比度的颜色。（图中黑色小点就是目前所在的色调）
增加不同色块之间的过渡色
如下图我选择的几种色块：
当我想在黑色和白色之间添加一个新的色块时，将鼠标挪动到两色块之间的加号图标，点击，系统就会自动给你生成一个介于二色之间的搭配色：
如下图，Jimmy在黑色和白色之间添加了三种不同的色块，整体搭配还是相当协调的。
同样，如果你想要黑色和红色之间的搭配色块，只需要将黑色块拖动到红色块旁边，然后增加色块就可以了。（图中红色方框内是拖动图标，按住即可拖动色块）
按住图标拖动到红色块旁边后，直接添加色块就可以了：
如上图，在黑色与红色之间我添加了4个不同色块。
注意：调色板内最多只能存在十个色块，超过了就不能添加新的色块了，需要删除不要的色块才能继续添加。
Coolors是我接触的第一款搭配颜色的网站，很新奇，很漂亮，也很实用，唯一不足就是需要翻墙，同时里面可能有很多其他功能我没有介绍到的，大家自行试用。
三、色相
互补色
互补色的作用再艺术、设计、时尚领域都有广泛的应用。
在艺术中，互补色的对比效果可以增强画面的层次感和视觉冲击力。
在设计中，互补色的搭配可以产品强烈的对比效果，使设计更加醒目和吸引人。
在时尚在，互补色的搭配可以产生时尚感和个性化，让人们更加注重自己的形象和风格。
互补色(或叫相对色),一般视觉感受是强烈的对比和截然相反的色彩倾向。但是在实际应用中，我们常常不能如此简单粗暴在色卡中选取完全互补的纯色，依旧要通过相对色的调和色来营造高级感，静怡感。
对比色
在平面设计中经常会运用到大量的对比色，对比色分很多种情况，通常撞色是指在色环上两种不同颜色对比而产生的效果。
对比色的应用又可以分为：色相对比、明度对比、纯度对比。如果是两个色相不同的颜色搭配在一起，尤其是互补色相对比，能产生激烈刺激的视觉效果，能够快速抓住人的眼球，运用得当的话能够产生不同寻常的效果。
对比色可以把两种对应的事物对照比较，使形象更鲜明，感受更强烈。
在设计方面采用可以增加色彩的强烈度。对比色使人的视觉感官所产生的一种生理现象，使视网膜对色彩的平衡作用
对比色具有对抗性，巧妙运用可以给人强烈的视觉效果，运用不当会让人感到非常俗气。
邻近色
在色环中，夹角为90°内的颜色互为邻近色。选择邻近色搭配是十分不错的方法，可以在同一个色调中制造丰富的质感和层次。
相邻色搭配使用可使画面和谐统一，比较协调平和。例如红色和橙色，橙色和黄色，黄色和绿色，蓝色和紫色等。
类似色
类似色也就是相似色。在色环上90度角内相邻接的色统称为类似色，例如红－红橙－橙、黄－黄绿－绿、青－青紫－紫等均为类似色.类似色由于色相对比不强。
类似色由于色相对比较柔和，给人以平静、调和的感觉，在配色中较为常用。
