收藏！58个设计师最佳配色工具网站

源：BIGD

众所周知，配色是设计中非常重要的部分，一个好的配色不仅能让我们的设计更加出彩，还能对用户产生情感影响。小编今天给大家整理了Muzli上 58个今年最佳的配色工具，相信一定能对你们有所帮助~

1.Muzli Colors

https://colors.muz.li

可以在线快速生成和编辑多种配色方案，并根据我们自己的颜色选择预览和下载自定义UI工具包。

2. Colorable

https://colorable.jxnblk.com/

一款非常实用、用来评估配色可访问性的工具。

3. History’s Palettes

https://colorleap.app/home

一键生成复古配色，搜索过去4000年来最具有代表性的的180个配色方案。

4. Picular

https://picular.co/

Picular是一款基于谷歌图像搜索的色彩生成器，只需输入描述词，就能快速生成配色方案。

5. Colourcode

https://colourco.de/

Colourcode是一个让色彩理论可视化的配色网站，选定一个颜色即就能看到它的互补色、相似色等等。

6. Palettte App

https://palettte.app/

palettte是一款色彩编辑和重映射工具，能够可视化的看到不同颜色之间的过渡流畅度，匹配出更和谐的色彩，还支持单个颜色微调。我们还可以导入、分析和编辑现有的色彩方案。

7. Colorinspire

https://www.colorinspire.io/

收录了很多场景的精选配色方案，为我们提供源源不断的色彩灵感。

8. ColorSpace

https://mycolor.space/

Color Space是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20~30种不同风格的配色方案。

9. Pigment

https://pigment.shapefactory.co/

Pigment可以通过饱和度、色温以及色系来生成我们独特的配色方案，还可以查看不同配色的配色场景图片。

10. Adobe Color

https://color.adobe.com/create

Adobe Color通过拖拽色轮或输入自定义色值，我们可以创造出基于相似、互补、三原色等不同色彩规则的配色方案。除此之外，还支持CMYK、RGB、HSV多种色彩模式的配色调整。

11. Colors & Fonts

https://www.colorsandfonts.com/

Colors&Fonts是由国外一名设计师Michael Andreuzza创建的配色网站，里面收录了超多他精心收藏的配色方案，我们只需要输入描述词，网站就会推荐相应的配色方案，除此之外还有渐变、字体等多种选择，一键复制色值。

12. HueSnap

https://www.huesnap.com/

「HueSnap」是一款实用的取色工具，我们可以从图像中捕捉到色彩的详细信息，包括十六进制、RGB、CMYK、HSV、HSL等等。除此之外，我们还可以在社区中浏览超多非常棒的配色方案灵感，并收藏和保存它们。

13. Culrs

https://culrs.com/

Culrs是一个综合型的配色网站，可以通过邻近色、三色、四色和单色来搜寻灵感配色。除此之外，每种色彩规则下还有明暗分类，相当方便。

14. Eva Design System

https://colors.eva.design/

Eva Design System是一个基于深度学习算法的配色网站，适用于给我们的产品或品牌生成一个系统的配色方案。

15. Scale

https://hihayk.github.io/scale/

快速色标生成器

16. Site Palette

http://palette.site/

Site Palette是一款设计师和前端开发人员必备的谷歌插件。可以自动吸取网站的主要颜色，帮助我们建立色板，以及寻找相关配色的图片，并一键下载配色方案。

17. BrandColors

https://brandcolors.net/

BrandColors是最大的官方品牌配色合集。有包括500多个品牌的十六进制颜色代码，包括Facebook，Twitter，Instagram等等。

18. Colorwise

https://colorwise.io/

Colorwise将时下最受欢迎的配色方案按照适用场景分类，以便我们快捷地寻找配色灵感。

19. HTML Color Codes

https://htmlcolorcodes.com/

颜色图表和带有Hex颜色代码，RGB和HSL值的HTML颜色名称，轻松查找网站的HTML颜色代码。

20. ColorBox

https://www.colorbox.io/

ColorBox可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求~

21. Generate — Coolors.co

https://coolors.co/

几秒钟之内创建，保存并分享好看的配色方案。

22. Color — Cloudflare Design

https://cloudflare.design/color/

专为UI设计师创建的配色工具，支持根据用户界面元素预览配色、循环浏览可访问的颜色组合并手动创建配色方案、通过网址导入或生成配色。

23. Instant Duotone Effect Generator

https://duotones.co/

双色调效果生成器，支持用户在线选择多达几十种双色调配色。

24. Material Design

https://material.io/resources/color/#!/?view.left=0&view.right=0

为UI创建和共享调色板，并测量任何颜色组合的可访问性。

25. Blendy

https://blendy.ml/

Blendy是一种快速预览CSS背景混合模式的工具。我们可以使用混合模式，颜色，渐变并在图像上进行尝试。

26.LOL Colors

https://www.webdesignrankings.com/resources/lolcolors/

LOL Colors是一款可爱的配色网站，色彩大多明快清新，直接拖动鼠标即显示色值，方便收藏色卡。

27. Color Hunt

https://colorhunt.co/

Color Hunt是一个免费开放的色彩灵感平台，拥有数千种时尚的配色方案。

28. ColorMe

https://colorme.io/

一个简单CSS色彩可视化工具，其特点是有非常多的参数可以设置，包括：透明度、饱和度、色调、亮度、着色、阴影、R/G/B、白色、黑色、对比度的设置等等。

29. Polarite

https://www.polarite.app/

Polarite是一款智能配色应用程序，用户只需左右滑动颜色选择喜欢/不喜欢的色彩，系统就会根据其结果智能生成一系列我们喜欢的且和谐的配色方案。

30. Gradient Hunt

https://gradienthunt.com/

精选数千种时尚的渐变色，并且每天都会更新。

31. Palettable

www.palettable.io

可以自己随意搭配色彩方案的网站，用户只需要选择喜欢/不喜欢，直到搭配出想要的色板。

32. ColorSpark

https://colorspark.app/

一个简单而有效的工具，随机生成好看的颜色、渐变色，可以一键复制 CSS 代码。

33. SVG Colorizer

https://www.iconshock.com/svg-color/

SVG着色器，自动为SVG图标和SVG矢量着色

34. Sip

https://sipapp.io/

适用于Mac的Sip ColorPicker。可以帮助我们更好的收集整理和分享配色方案。

35. CoolHue 2.0

https://webkul.github.io/coolhue/sketch-plugin/

一款免费的sketch渐变配色插件和收集工具。

36. Color Koala

https://colorkoala.xyz/

Color Koala是一个快速配色生成器。

37. SchemeColor

https://www.schemecolor.com/

SchemeColor可以下载、创建和分享成千上万种美丽的配色组合，获取十六进制颜色代码的详细信息，并将其转换为RGB和CMYK等色彩模式。

38. Free Mesh Gradient Collection

https://www.ls.graphics/meshgradients

100多个免费的渐变色合集，支持sketch、png、ai、jpg、eps等多种格式下载。

39. WebGradients

https://webgradients.com/

WebGradients是一个由顶级设计师策划的免费渐变配色网站，拥有180种漂亮的线性渐变，并支持CSS3、Photoshop和Sketch等多种格式。

40. Gradient Buttons

https://gradientbuttons.colorion.co/

炫酷的渐变按钮，还有悬停的动画效果,一键copy css代码。

41. ColorKit

https://colorkit.io/

多种色彩渐变生成器，只需输入开始和结束颜色以及混合步骤数，就能一键生成流畅的配色方案，并支持svg格式导出。

42. Eggradients

https://www.eggradients.com/

一款收录了最新设计趋势渐变色彩的配色网站，支持一键复制十六进制和CSS代码。

43. Cool Backgrounds

https://coolbackgrounds.io/

Cool Background是设计师Moe Amaya将5个开源生成器的简化版整理组成的工具集，内置五种背景风格，每一个种风格还提供了简单的参数配置。分别是：

低多边形风格

trianglify.io

▼

动态粒子效果

marcbruederlin.github.io/particles.js

▼

渐变

cssgradient.io

▼

渐变层生成器

s.muz.li/NTFiZjk0ZWFh

▼

Unsplash图片集

unsplash.com

▼

44. Art Palette

https://artsexperiments.withgoogle.com/artpalette/

基于Google AI的智能配色工具，它会根据你所提供的配色方案来提供相符合的配色主题的艺术图片。

45. GradPad

http://ourownthing.co.uk/gradpad.html

CSS渐变生成器，我们可以自己设置渐变色彩、透明度、位置和角度，还可以查看流行的热门渐变色彩，并直接使用现成的颜色代码。

46. Khroma

http://khroma.co/

Khroma号称是“设计师的AI颜色工具” ，会先让你从大量的颜色中选择你最喜欢的50种，然后利用神经网络驱动算法来帮你生成最符合你审美要求的配色方案，并且它所有给出的的配色都是从最流行的配色方案中学习得来。

47. Color palettes

ttps://www.canva.com/colors/color-palettes/

Canva上数千种精选色彩组合

48. Color Safe

http://colorsafe.co/

Color Safe是一个基于Web内容无障碍指南（WCAG）的配色网站，可以根据我们提供的色彩检测可访问性，并给出相应的调整方案。

49. Paletton

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Paletton 是一个在线的色环配色工具。我们可以根据需要选择单色、相近色、对比色等规则来查看配色，也可以实时查看其在网页中的搭配效果。

50. Colordot

https://color.hailpixel.com/

动一动鼠标就可以不断生成的新的色卡。非常适合毫无灵感、不知从何下手的设计师。

51. Colors

https://klart.io/colors/

100％由数据驱动的配色方案集合。

52. Contrast Ratio

https://contrast-ratio.com/

一款轻松计算颜色对比度的配色工具。

53. Color Lisa

http://www.colorlisa.com/

世界上最伟大的艺术家的色彩杰作。

54. Color Designer

https://colordesigner.io/

只需选择一种颜色，Color Designer就会帮助我们构建一个系统的配色方案，并基于我们所选的颜色生成多种色调和阴影等。

55. Color.review

https://color.review/

测试颜色对比度的配色工具

56. Blend

http://www.colinkeany.com/blend/

Blend - 创建和自定义漂亮的CSS3渐变。

57. Contrast

https://usecontrast.com/

一个用于快速测试WCAG颜色对比度的macOS应用程序

58. Grabient

https://www.grabient.com/

一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

今天的内容就到这里啦~

小伙伴们还知道哪些超赞的配色网站呢？

记得留言告诉我们哦~

*商品入驻和分销，请发送具体信息到：ponyco@126.com

当今数据驱动的世界中，数据可视化简化了复杂信息，赋予个人做出明智决策的能力。其中一种特别有价值的图表类型是资源图表，它有助于高效的资源分配。本教程将是您创建动态资源图表的必备指南，使用JavaScript。

资源图表是一种甘特图类型，用于可视化有关资源利用的数据，例如设备、员工等。它提供了全面的概述，使得及时做出明智决策变得更加容易。举个例子，在本教程中，我将以球场为单位代表2022年卡塔尔世界杯的赛程，让您可以追踪每场比赛的时间和地点。

准备好您的编码工具，通过本指南结束时，您将能够创建自己基于JavaScript的资源图表，并拥有一个有价值的工具，用于追踪您下一个喜爱的锦标赛、服务器状态、员工项目分配，或者其他类似的事物。

待创建的资源图表

您是否对我们即将创建的内容感到兴奋？继续阅读，您将学会如何创建一个JavaScript资源图表，就像下面展示的一样。

感到好奇吗？让我们一起开始这激动人心的旅程吧！

构建资源图表

资源图表乍一看可能会显得复杂，因为它使用水平条来表示时间段。然而，我向您保证，一旦您掌握了它，就会发现它其实非常简单。您可以通过以下四个基本步骤来构建这个图表：

创建一个HTML网页。
包含必要的JavaScript文件。
加载数据。
编写一些JS代码来可视化资源图表。

现在，让我们详细了解每个步骤。

1. 创建一个HTML网页

首先，创建一个基本的HTML页面，用于承载您的JavaScript资源图表。在HTML文档的主体中，添加一个HTML块元素，比如<div>，它将作为您即将创建的图表的容器。给它一个ID，在您后面创建图表时，将在JavaScript代码中引用它。为了确保图表使用正确的位置，可以在<style>块中定义一些CSS规则。

下面是一个以这种方式创建的简单网页的示例。我将<div>元素命名为“container”，并调整其高度和宽度，使图表占据整个屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Resource Gantt Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
</body>
</html>

2. 包含必要的JavaScript文件

在数据可视化方面，JavaScript图表库是非常宝贵的工具。关键是找到一个不仅满足您的需求，而且支持您寻找的特定图表类型的库。

在本教程中，我将使用AnyChart，这是一个长期存在的JavaScript图表库，支持资源图表，并提供全面的文档，而且它是免费的（除非您将其集成到商业应用程序中）。如果您选择使用其他库，整个过程基本上是一样的。

您可以通过两种主要选项来包含所选库的必要JavaScript文件：下载它们并在本地使用，或者通过CDN（内容传送网络）直接链接到它们。在本教程中，我将选择CDN的方式。下面是在HTML页面的<head>部分链接所需脚本的示例。

图表的代码将位于HTML页面的<body>部分的<script>标签中。或者，如果更适合您的项目结构，也可以将其放在<head>部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Resource Gantt Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // The place for the following chart’s code.
  </script>
</body>
</html>

3. 加载数据

现在，让我们加载数据。在本教程中，将可视化2022年FIFA世界杯的赛程。数据以JSON格式在提供的GitHub gist上可用。

数据由一系列对象组成，每个对象代表一个球场。您将在每个球场对象中找到其名称和城市等详细信息。此外，还有一个名为“periods”的属性，其中包含在该球场举办的比赛列表。每场比赛由两支参赛国家的名称和比赛结果表示。

为了正确地将这种类型的数据输入到资源图表中，可以使用anychart.data.loadJsonFile()方法。下面是加载数据的代码片段：

anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json");

4. 编写一些JS代码来可视化资源图表

数据加载完毕后，您现在可以继续，看看如何通过几行JavaScript代码转化为一个完全功能的资源图表。

首先，添加anychart.onDocumentReady()函数，它封装了确保您的代码仅在页面完全加载时执行的所有必要代码。

<script>
  anychart.onDocumentReady(function () {
    // The resource chart data and code will be in this section.
  });
</script>

接下来，加载数据并创建一个数据树。

anychart.onDocumentReady(function () {
  // load the data
  anychart.data.loadJsonFile(
    "https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
    function (data) {
      // create a data tree
      var treeData=anychart.data.tree(data, 'as-table’);
    }
  );
});

然后，使用ganttResource()方法创建资源甘特图，并使用data()方法设置您的数据树。

// create a resource gantt chart
var chart=anychart.ganttResource();

// set the data for the chart
chart.data(treeData);

将图表放置在第1步中引入的<div>容器中，最后使用draw()方法绘制图表。

// set the container 
chart.container("container");

// draw the chart
chart.draw();

哇！您已成功使用JavaScript创建了一个简单而完全功能的资源图表。看看它在实际中是如何呈现的；这个图表的交互版本可以在这里找到。为了您的方便，还提供了基本资源图表的完整代码。

有了这个资源图表，您可以轻松地可视化哪些比赛在哪些球场举行，您可以在右侧的比赛部分滚动查看所有比赛。但还有更多内容可以探索，所以让我们继续定制这个交互式数据可视化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Resource Gantt Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // load the data
      anychart.data.loadJsonFile(
        "https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
        function (data) {
          // create a data tree
          var treeData=anychart.data.tree(data, "as-table");
          // create a resource gantt chart
          var chart=anychart.ganttResource();
          // set the data for the chart
          chart.data(treeData);
          // set the container 
          chart.container("container");
          // draw the chart
          chart.draw();
        }
      );
    });
  </script>
</body>
</html>

定制资源图表

现在基本的基于JavaScript的资源图表已经就绪，让我们探索一些增强其视觉效果和功能的方法。

配置行和列

为了提高资源图表的视觉吸引力，让我们深入一些可能的行和列的调整。

首先，您可以为行的选定和悬停状态设置自定义颜色，并调整分隔位置以获得更好的内容可见性。此外，考虑指定默认行高，以便整洁地呈现和轻松阅读行项目。

// customize the rows
chart
  .rowSelectedFill("#D4DFE8")
  .rowHoverFill("#EAEFF3")
  .splitterPosition(230);

// set the row height
chart.defaultRowHeight(50);

现在，让我们继续配置列。在第一列中，您可以选择将一个简单的数字标签“#”作为标题，并自定义其宽度。

对于第二列，您可以将球场名称设置为粗体，以突出显示，并将城市名称放在球场名称的正下方。根据需要调整列宽，以舒适地容纳内容。

// customize the column settings:
// get the data grid
var dataGrid=chart.dataGrid();
// set the fixed columns mode
dataGrid.fixedColumns(true);
// first column
dataGrid
  .column(0)
  .title("#")
  .width(30
  .labels({ hAlign: "center" });
// second column
dataGrid
  .column(1)
  .title("Stadium")
  .width(200)
  .labels()
  .useHtml(true)
  .format(function () {
    return (
      "<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city")
    );
  });

自定义资源图表 1

在条形图上添加最终比分

现在，让我们通过在时间轴条上直接显示比赛结果来增强资源图表。这样可以快速查看比赛结果，而无需参考其他地方。

为了实现这一点，启用时间轴周期上的标签，并使用useHtml()方法应用自定义样式。

// configure the period labels:
// get the period labels
var periodLabels=chart.getTimeline().periods().labels();
// set the period labels
periodLabels
  .enabled(true)
  .useHtml(true)
  .format(
    "<span style='color:#fff; font-size: 12px;'>{%result}</span>"
  );

在资源条本身的额外信息的基础上，图表现在一目了然地提供了更丰富的信息。

自定义资源图表 2

个性化视觉外观

为了获得美观的用户体验，考虑为图表的视觉方面增添一些调味。

首先，将图表的背景颜色设置为浅灰色。

chart.background("#edeae8 0.8");

接下来，从时间轴中作为元素访问条形，并对它们的填充和描边颜色进行调整。

var elements=chart.getTimeline().elements();
elements.normal().fill("#9a1032 0.8");
elements.normal().stroke("#212c68");

再进一步，可以使用函数根据条件动态填充条形的颜色。例如，比赛结果可以是这样的一个条件。因此，该函数检查比赛结果，如果是平局，则将条形涂成绿色；否则，涂成红色。这提供了一种有趣的方式，可以通过条形的颜色立即辨别比赛的结果。

// 自定义条形的颜色：
// 获取元素
var elements=chart.getTimeline().elements();
// 检查当前项目是否为平局，如果是，则以不同的颜色填充
elements.normal().fill(function() {
  var result=this.period.result;
  var scores=result.split("-").map(Number);
  if (scores[0]===scores[1]) {
    return "#11A055 0.8";
  } else {
    return "#9a1032 0.8";
  }
});
elements.normal().stroke("#212c68");

自定义资源图表 3

自定义工具提示

现在，是时候微调工具提示，以提供更好的用户体验。

为了保持工具提示简洁明了，配置它在悬停在特定条形上时显示球队名称和比赛结果。

// 配置工具提示
var tooltip=chart.getTimeline().tooltip();
tooltip
  .useHtml(true)
  .format(function(e) {
    var tooltipText;
    if (typeof e.period==="undefined") {
      tooltipText=e.item.la.city;
    } else {
      var period=e.period;
      tooltipText=period.result;
    }
    return tooltipText;
  });

这些微小的调整显著提高了呈现数据的视觉清晰度。现在，下面是资源图表的最终版本。您可以在此处探索这个最终图表的交互版本。随意探索并与之交互。为了方便起见，下面提供了最终资源图表的完整代码。

为一名科研工作者，不论是撰写论文、海报展示还是学术汇报，都离不开信息丰富又美观易读的图形，数据可视化已经成为一项科研必备技能。

特别是，图片对于科研论文是非常重要的，笔者在平时阅读文献的时候，一般都是先看图，图片给的信息最直观，最有视觉冲击。一篇论文中，优雅的颜色搭配会直接打开审稿人和编辑的视觉大门，相信大家在阅读顶刊文献时也可以发现顶刊中的图片配色往往也是顶级的。

正确的色彩搭配：

①可以丰富版面样式

②反映出文章作者的科研水平和严谨、细心程度

③恰如其分地传递科研论文的主旨，增加单位图片的信息量和数据量

④能够帮助读者理解论文的重点和创新点

因此，配色对于一个图片，可以说是灵魂了。

下图是同一张图片的不同配色方案，是不是对比的效果非常明显，右图的配色要比左图的清爽许多，显然颜色的搭配非常重要。

本期内容利刃君就为大家分享一些十分好用的配色网站，助力大家的科研绘图工作。

01Culrs

网站名称：Culrs

网站地址：

https://www.culrs.com/#/

Culrs是一个比较综合型的配色网站，由两位热衷于为设计社区构建产品的印度设计师创立。Culrs的界面简洁清新，使用感很好。

Culrs中配色方案的分类很不错，分为邻近色、三色、四色和单色，并且分类里有明、暗区分，而不是把所有的配色方案都混在一起，如此，我们可以很方便地获得不同风格的配色方案。比如我们在邻近色选择“Light”，Culrs就会给出非常多比较明亮的邻近色搭配方案：

可以看到给出的配色方案非常的Nice！下面选择“Dark”，Culrs会给出很多比较暗的邻近色搭配方案。同样的大家也可以尝试三色、四色等的配色方案。

如果我们需使用某配色方案，只需我们把鼠标放在任一色条上，都可以直接复制它的颜色号，就可以在绘图软件中如Origin、PS等直接使用，很方便。

02ColorSpace

网站名称：ColorSpace

网站地址：

https://mycolor.space/

ColorSpace 是一个在线调色板生成工具，只需要输入主色调颜色号，一键就可以生成优秀的配色方案，配色方案有多种类型可供选择，如通用渐变（Generic Gradient）、匹配梯度（Matching Gradient）、调色板（Matching Gradient）、扭曲点调色板（Twisted Spot Palette）等。

在使用时，单击色块，就可以直接选中色块对应的颜色号，方便我们使用绘图软件如Origin、PS等直接使用。

除了基本的调色板模式外，ColorSpace还提供了渐变色和三色渐变这两种配色模式，如果需要生成渐变色，只需输入颜色号，点击“GENERATE”即可生成渐变色。

03生成热图文件

网站名称：ColorLeap

网站地址：https://colorleap.app/home

在目前流行扁平化、极简风的浪潮下，使用复古风配色反而别具一格，ColorLeap就是一款复古式配色网站。ColorLeap又名色彩时光机，可以查询每个年代辉煌的流行配色，ColorLeap为我们提供了12个年代的作品配色方案，每组配色方案都是从当时年代的流行作品进行抽样制作的，可以说是非常有代表性了！

通过ColorLeap获得的色卡的左下角都有它们的主题名字，非常方便根据使用场景去选择~

全站有180个精选的复古风色卡，完全能满足小伙伴们的需求，如果要使用色卡，只需点击一下图片下方或者色板上的色块，就能成功复制色值了。

04WebGradients

网站名称：WebGradients

网站地址：

https://webgradients.com/

渐变色在科研绘图配色中的应用也非常多，渐变色除了给颜色变化带来了流动性之外，还多了“质感”，单个颜色本身就可以通过色相、明度、纯度带来一定的材质感和重量感，但渐变的颜色可以带来光的变化感，从而形成体积感和质感。

横向渐变

WebGradients就是一个高颜值渐变网站，提供了180多种渐变颜色参考，提供的颜色属性都清晰标明，还可以下载成PSD， Sketch， PNG 甚至直接复制成一段 CSS 渐变代码。打开网站我们就能直接看到 N 种配色展现在首页，只需要点击其中一个，就会显示全屏渐变。使用方法也非常简单，直接下载 Sketch/PSD 或复制十六进制颜色编码即可！

05Adobe Color

网站名称：Adobe Color

网站地址：

https://color.adobe.com/zh/create/color-wheel

Adobe Color是Adobe家自产的配色网站，不仅提供现成的配色方案，还支持从自己喜欢的图片中提取配色和渐变，以及获取某些期刊要求的色盲友好和对比度友好的配色。

Adobe Color主要有「创建」、「探索」及「趋势」三大主题。在「创建」处提供色轮配色、从图片抓取主题色及渐变色，还有个就是色盲冲突颜色检测。从图片中抓取主题色是很实用的一个功能，我们可以选择一些大师的作品获取高级配色方案，根据要求我们可以选择彩色、亮色、柔色、深色、暗色，并且可以自己移动色标，选取喜欢的颜色。

同样的方法，我们也可以从图片中提取渐变色，左侧“渐层色标”可以增加或者减少色标的数目，下方有对应色标的各种颜色代码，可以直接复制使用。

很多期刊比如nature对配色要求色盲友好，Adobe color可以做到这一点。在“协助工具”处可以通过色轮选择配色方案，若配色不合适，会有警告提示。

在「探索」中可输入关键字搜索相关图片的用色，如我们搜索“月光”，可以获得一系列与主题相关的配色方案。

「趋势」则是提供从Behance和Adobe Stock的创意社群中，探索不同行业目前的色彩趋势。

Adobe Color相比于其它配色网站来说，功能更加强大。如果有Adobe账号，我们可以将中意的配色方案储存起来，也可很方便地与Adobe系列产品如PS、AI等联用。

06结语

以上就是本期利刃君为大家分享的五款可用于科研绘图中色彩搭配的配色网站啦，基本能够满足我们日常配色需求，如果大家有其它不错的配色网站推荐，也可在留言区留言分享一下哟~

在线咨询

上一篇：HTML5入门
下一篇：简单炫酷旋转菜单menu效果css3实现

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

收藏！58个设计师最佳配色工具网站

Unsplash图片集

待创建的资源图表

构建资源图表

1. 创建一个HTML网页

2. 包含必要的JavaScript文件

3. 加载数据

4. 编写一些JS代码来可视化资源图表

定制资源图表

配置行和列

自定义资源图表 1

在条形图上添加最终比分

自定义资源图表 2

个性化视觉外观

自定义资源图表 3

自定义工具提示

01Culrs

02ColorSpace

03生成热图文件

04WebGradients

05Adobe Color

06结语

您的项目需求