收藏！58個設計師最佳配色工具網(wǎng)站

源：BIGD

眾所周知，配色是設計中非常重要的部分，一個好的配色不僅能讓我們的設計更加出彩，還能對用戶產(chǎn)生情感影響。小編今天給大家整理了Muzli上 58個今年最佳的配色工具，相信一定能對你們有所幫助~

1.Muzli Colors

https://colors.muz.li

可以在線快速生成和編輯多種配色方案，并根據(jù)我們自己的顏色選擇預覽和下載自定義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是一個讓色彩理論可視化的配色網(wǎng)站，選定一個顏色即就能看到它的互補色、相似色等等。

6. Palettte App

https://palettte.app/

palettte是一款色彩編輯和重映射工具，能夠可視化的看到不同顏色之間的過渡流暢度，匹配出更和諧的色彩，還支持單個顏色微調(diào)。我們還可以導入、分析和編輯現(xiàn)有的色彩方案。

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通過拖拽色輪或輸入自定義色值，我們可以創(chuàng)造出基于相似、互補、三原色等不同色彩規(guī)則的配色方案。除此之外，還支持CMYK、RGB、HSV多種色彩模式的配色調(diào)整。

11. Colors & Fonts

https://www.colorsandfonts.com/

Colors&Fonts是由國外一名設計師Michael Andreuzza創(chuàng)建的配色網(wǎng)站，里面收錄了超多他精心收藏的配色方案，我們只需要輸入描述詞，網(wǎng)站就會推薦相應的配色方案，除此之外還有漸變、字體等多種選擇，一鍵復制色值。

12. HueSnap

https://www.huesnap.com/

「HueSnap」是一款實用的取色工具，我們可以從圖像中捕捉到色彩的詳細信息，包括十六進制、RGB、CMYK、HSV、HSL等等。除此之外，我們還可以在社區(qū)中瀏覽超多非常棒的配色方案靈感，并收藏和保存它們。

13. Culrs

https://culrs.com/

Culrs是一個綜合型的配色網(wǎng)站，可以通過鄰近色、三色、四色和單色來搜尋靈感配色。除此之外，每種色彩規(guī)則下還有明暗分類，相當方便。

14. Eva Design System

https://colors.eva.design/

Eva Design System是一個基于深度學習算法的配色網(wǎng)站，適用于給我們的產(chǎn)品或品牌生成一個系統(tǒng)的配色方案。

15. Scale

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

快速色標生成器

16. Site Palette

http://palette.site/

Site Palette是一款設計師和前端開發(fā)人員必備的谷歌插件。可以自動吸取網(wǎng)站的主要顏色，幫助我們建立色板，以及尋找相關配色的圖片，并一鍵下載配色方案。

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顏色名稱，輕松查找網(wǎng)站的HTML顏色代碼。

20. ColorBox

https://www.colorbox.io/

ColorBox可以幫助我們輕松地創(chuàng)建非常炫酷的色彩集，配色頁面還有大量的個性化選項，滿足我們的任何需求~

21. Generate — Coolors.co

https://coolors.co/

幾秒鐘之內(nèi)創(chuàng)建，保存并分享好看的配色方案。

22. Color — Cloudflare Design

https://cloudflare.design/color/

專為UI設計師創(chuàng)建的配色工具，支持根據(jù)用戶界面元素預覽配色、循環(huán)瀏覽可訪問的顏色組合并手動創(chuàng)建配色方案、通過網(wǎng)址導入或生成配色。

23. Instant Duotone Effect Generator

https://duotones.co/

雙色調(diào)效果生成器，支持用戶在線選擇多達幾十種雙色調(diào)配色。

24. Material Design

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

為UI創(chuàng)建和共享調(diào)色板，并測量任何顏色組合的可訪問性。

25. Blendy

https://blendy.ml/

Blendy是一種快速預覽CSS背景混合模式的工具。我們可以使用混合模式，顏色，漸變并在圖像上進行嘗試。

26.LOL Colors

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

LOL Colors是一款可愛的配色網(wǎng)站，色彩大多明快清新，直接拖動鼠標即顯示色值，方便收藏色卡。

27. Color Hunt

https://colorhunt.co/

Color Hunt是一個免費開放的色彩靈感平臺，擁有數(shù)千種時尚的配色方案。

28. ColorMe

https://colorme.io/

一個簡單CSS色彩可視化工具，其特點是有非常多的參數(shù)可以設置，包括：透明度、飽和度、色調(diào)、亮度、著色、陰影、R/G/B、白色、黑色、對比度的設置等等。

29. Polarite

https://www.polarite.app/

Polarite是一款智能配色應用程序，用戶只需左右滑動顏色選擇喜歡/不喜歡的色彩，系統(tǒng)就會根據(jù)其結(jié)果智能生成一系列我們喜歡的且和諧的配色方案。

30. Gradient Hunt

https://gradienthunt.com/

精選數(shù)千種時尚的漸變色，并且每天都會更新。

31. Palettable

www.palettable.io

可以自己隨意搭配色彩方案的網(wǎng)站，用戶只需要選擇喜歡/不喜歡，直到搭配出想要的色板。

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可以下載、創(chuàng)建和分享成千上萬種美麗的配色組合，獲取十六進制顏色代碼的詳細信息，并將其轉(zhuǎn)換為RGB和CMYK等色彩模式。

38. Free Mesh Gradient Collection

https://www.ls.graphics/meshgradients

100多個免費的漸變色合集，支持sketch、png、ai、jpg、eps等多種格式下載。

39. WebGradients

https://webgradients.com/

WebGradients是一個由頂級設計師策劃的免費漸變配色網(wǎng)站，擁有180種漂亮的線性漸變，并支持CSS3、Photoshop和Sketch等多種格式。

40. Gradient Buttons

https://gradientbuttons.colorion.co/

炫酷的漸變按鈕，還有懸停的動畫效果,一鍵copy css代碼。

41. ColorKit

https://colorkit.io/

多種色彩漸變生成器，只需輸入開始和結(jié)束顏色以及混合步驟數(shù)，就能一鍵生成流暢的配色方案，并支持svg格式導出。

42. Eggradients

https://www.eggradients.com/

一款收錄了最新設計趨勢漸變色彩的配色網(wǎng)站，支持一鍵復制十六進制和CSS代碼。

43. Cool Backgrounds

https://coolbackgrounds.io/

Cool Background是設計師Moe Amaya將5個開源生成器的簡化版整理組成的工具集，內(nèi)置五種背景風格，每一個種風格還提供了簡單的參數(shù)配置。分別是：

低多邊形風格

trianglify.io

▼

動態(tài)粒子效果

marcbruederlin.github.io/particles.js

▼

漸變

cssgradient.io

▼

漸變層生成器

s.muz.li/NTFiZjk0ZWFh

▼

Unsplash圖片集

unsplash.com

▼

44. Art Palette

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

基于Google AI的智能配色工具，它會根據(jù)你所提供的配色方案來提供相符合的配色主題的藝術圖片。

45. GradPad

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

CSS漸變生成器，我們可以自己設置漸變色彩、透明度、位置和角度，還可以查看流行的熱門漸變色彩，并直接使用現(xiàn)成的顏色代碼。

46. Khroma

http://khroma.co/

Khroma號稱是“設計師的AI顏色工具” ，會先讓你從大量的顏色中選擇你最喜歡的50種，然后利用神經(jīng)網(wǎng)絡驅(qū)動算法來幫你生成最符合你審美要求的配色方案，并且它所有給出的的配色都是從最流行的配色方案中學習得來。

47. Color palettes

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

Canva上數(shù)千種精選色彩組合

48. Color Safe

http://colorsafe.co/

Color Safe是一個基于Web內(nèi)容無障礙指南（WCAG）的配色網(wǎng)站，可以根據(jù)我們提供的色彩檢測可訪問性，并給出相應的調(diào)整方案。

49. Paletton

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

Paletton 是一個在線的色環(huán)配色工具。我們可以根據(jù)需要選擇單色、相近色、對比色等規(guī)則來查看配色，也可以實時查看其在網(wǎng)頁中的搭配效果。

50. Colordot

https://color.hailpixel.com/

動一動鼠標就可以不斷生成的新的色卡。非常適合毫無靈感、不知從何下手的設計師。

51. Colors

https://klart.io/colors/

100％由數(shù)據(jù)驅(qū)動的配色方案集合。

52. Contrast Ratio

https://contrast-ratio.com/

一款輕松計算顏色對比度的配色工具。

53. Color Lisa

http://www.colorlisa.com/

世界上最偉大的藝術家的色彩杰作。

54. Color Designer

https://colordesigner.io/

只需選擇一種顏色，Color Designer就會幫助我們構建一個系統(tǒng)的配色方案，并基于我們所選的顏色生成多種色調(diào)和陰影等。

55. Color.review

https://color.review/

測試顏色對比度的配色工具

56. Blend

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

Blend - 創(chuàng)建和自定義漂亮的CSS3漸變。

57. Contrast

https://usecontrast.com/

一個用于快速測試WCAG顏色對比度的macOS應用程序

58. Grabient

https://www.grabient.com/

一個非常漂亮且實用的漸變網(wǎng)站，支持 CSS 樣式代碼復制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。

今天的內(nèi)容就到這里啦~

小伙伴們還知道哪些超贊的配色網(wǎng)站呢？

記得留言告訴我們哦~

*商品入駐和分銷，請發(fā)送具體信息到：ponyco@126.com

當今數(shù)據(jù)驅(qū)動的世界中，數(shù)據(jù)可視化簡化了復雜信息，賦予個人做出明智決策的能力。其中一種特別有價值的圖表類型是資源圖表，它有助于高效的資源分配。本教程將是您創(chuàng)建動態(tài)資源圖表的必備指南，使用JavaScript。

資源圖表是一種甘特圖類型，用于可視化有關資源利用的數(shù)據(jù)，例如設備、員工等。它提供了全面的概述，使得及時做出明智決策變得更加容易。舉個例子，在本教程中，我將以球場為單位代表2022年卡塔爾世界杯的賽程，讓您可以追蹤每場比賽的時間和地點。

準備好您的編碼工具，通過本指南結(jié)束時，您將能夠創(chuàng)建自己基于JavaScript的資源圖表，并擁有一個有價值的工具，用于追蹤您下一個喜愛的錦標賽、服務器狀態(tài)、員工項目分配，或者其他類似的事物。

待創(chuàng)建的資源圖表

您是否對我們即將創(chuàng)建的內(nèi)容感到興奮？繼續(xù)閱讀，您將學會如何創(chuàng)建一個JavaScript資源圖表，就像下面展示的一樣。

感到好奇嗎？讓我們一起開始這激動人心的旅程吧！

構建資源圖表

資源圖表乍一看可能會顯得復雜，因為它使用水平條來表示時間段。然而，我向您保證，一旦您掌握了它，就會發(fā)現(xiàn)它其實非常簡單。您可以通過以下四個基本步驟來構建這個圖表：

創(chuàng)建一個HTML網(wǎng)頁。
包含必要的JavaScript文件。
加載數(shù)據(jù)。
編寫一些JS代碼來可視化資源圖表。

現(xiàn)在，讓我們詳細了解每個步驟。

1. 創(chuàng)建一個HTML網(wǎng)頁

首先，創(chuàng)建一個基本的HTML頁面，用于承載您的JavaScript資源圖表。在HTML文檔的主體中，添加一個HTML塊元素，比如<div>，它將作為您即將創(chuàng)建的圖表的容器。給它一個ID，在您后面創(chuàng)建圖表時，將在JavaScript代碼中引用它。為了確保圖表使用正確的位置，可以在<style>塊中定義一些CSS規(guī)則。

下面是一個以這種方式創(chuàng)建的簡單網(wǎng)頁的示例。我將<div>元素命名為“container”，并調(diào)整其高度和寬度，使圖表占據(jù)整個屏幕。

<!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文件

在數(shù)據(jù)可視化方面，JavaScript圖表庫是非常寶貴的工具。關鍵是找到一個不僅滿足您的需求，而且支持您尋找的特定圖表類型的庫。

在本教程中，我將使用AnyChart，這是一個長期存在的JavaScript圖表庫，支持資源圖表，并提供全面的文檔，而且它是免費的（除非您將其集成到商業(yè)應用程序中）。如果您選擇使用其他庫，整個過程基本上是一樣的。

您可以通過兩種主要選項來包含所選庫的必要JavaScript文件：下載它們并在本地使用，或者通過CDN（內(nèi)容傳送網(wǎng)絡）直接鏈接到它們。在本教程中，我將選擇CDN的方式。下面是在HTML頁面的<head>部分鏈接所需腳本的示例。

圖表的代碼將位于HTML頁面的<body>部分的<script>標簽中?；蛘撸绻m合您的項目結(jié)構，也可以將其放在<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. 加載數(shù)據(jù)

現(xiàn)在，讓我們加載數(shù)據(jù)。在本教程中，將可視化2022年FIFA世界杯的賽程。數(shù)據(jù)以JSON格式在提供的GitHub gist上可用。

數(shù)據(jù)由一系列對象組成，每個對象代表一個球場。您將在每個球場對象中找到其名稱和城市等詳細信息。此外，還有一個名為“periods”的屬性，其中包含在該球場舉辦的比賽列表。每場比賽由兩支參賽國家的名稱和比賽結(jié)果表示。

為了正確地將這種類型的數(shù)據(jù)輸入到資源圖表中，可以使用anychart.data.loadJsonFile()方法。下面是加載數(shù)據(jù)的代碼片段：

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

4. 編寫一些JS代碼來可視化資源圖表

數(shù)據(jù)加載完畢后，您現(xiàn)在可以繼續(xù)，看看如何通過幾行JavaScript代碼轉(zhuǎn)化為一個完全功能的資源圖表。

首先，添加anychart.onDocumentReady()函數(shù)，它封裝了確保您的代碼僅在頁面完全加載時執(zhí)行的所有必要代碼。

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

接下來，加載數(shù)據(jù)并創(chuàng)建一個數(shù)據(jù)樹。

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()方法創(chuàng)建資源甘特圖，并使用data()方法設置您的數(shù)據(jù)樹。

// 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創(chuàng)建了一個簡單而完全功能的資源圖表。看看它在實際中是如何呈現(xiàn)的；這個圖表的交互版本可以在這里找到。為了您的方便，還提供了基本資源圖表的完整代碼。

有了這個資源圖表，您可以輕松地可視化哪些比賽在哪些球場舉行，您可以在右側(cè)的比賽部分滾動查看所有比賽。但還有更多內(nèi)容可以探索，所以讓我們繼續(xù)定制這個交互式數(shù)據(jù)可視化。

<!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>

定制資源圖表

現(xiàn)在基本的基于JavaScript的資源圖表已經(jīng)就緒，讓我們探索一些增強其視覺效果和功能的方法。

配置行和列

為了提高資源圖表的視覺吸引力，讓我們深入一些可能的行和列的調(diào)整。

首先，您可以為行的選定和懸停狀態(tài)設置自定義顏色，并調(diào)整分隔位置以獲得更好的內(nèi)容可見性。此外，考慮指定默認行高，以便整潔地呈現(xiàn)和輕松閱讀行項目。

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

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

現(xiàn)在，讓我們繼續(xù)配置列。在第一列中，您可以選擇將一個簡單的數(shù)字標簽“#”作為標題，并自定義其寬度。

對于第二列，您可以將球場名稱設置為粗體，以突出顯示，并將城市名稱放在球場名稱的正下方。根據(jù)需要調(diào)整列寬，以舒適地容納內(nèi)容。

// 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

在條形圖上添加最終比分

現(xiàn)在，讓我們通過在時間軸條上直接顯示比賽結(jié)果來增強資源圖表。這樣可以快速查看比賽結(jié)果，而無需參考其他地方。

為了實現(xiàn)這一點，啟用時間軸周期上的標簽，并使用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>"
  );

在資源條本身的額外信息的基礎上，圖表現(xiàn)在一目了然地提供了更豐富的信息。

自定義資源圖表 2

個性化視覺外觀

為了獲得美觀的用戶體驗，考慮為圖表的視覺方面增添一些調(diào)味。

首先，將圖表的背景顏色設置為淺灰色。

chart.background("#edeae8 0.8");

接下來，從時間軸中作為元素訪問條形，并對它們的填充和描邊顏色進行調(diào)整。

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

再進一步，可以使用函數(shù)根據(jù)條件動態(tài)填充條形的顏色。例如，比賽結(jié)果可以是這樣的一個條件。因此，該函數(shù)檢查比賽結(jié)果，如果是平局，則將條形涂成綠色；否則，涂成紅色。這提供了一種有趣的方式，可以通過條形的顏色立即辨別比賽的結(jié)果。

// 自定義條形的顏色：
// 獲取元素
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

自定義工具提示

現(xiàn)在，是時候微調(diào)工具提示，以提供更好的用戶體驗。

為了保持工具提示簡潔明了，配置它在懸停在特定條形上時顯示球隊名稱和比賽結(jié)果。

// 配置工具提示
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;
  });

這些微小的調(diào)整顯著提高了呈現(xiàn)數(shù)據(jù)的視覺清晰度。現(xiàn)在，下面是資源圖表的最終版本。您可以在此處探索這個最終圖表的交互版本。隨意探索并與之交互。為了方便起見，下面提供了最終資源圖表的完整代碼。

為一名科研工作者，不論是撰寫論文、海報展示還是學術匯報，都離不開信息豐富又美觀易讀的圖形，數(shù)據(jù)可視化已經(jīng)成為一項科研必備技能。

特別是，圖片對于科研論文是非常重要的，筆者在平時閱讀文獻的時候，一般都是先看圖，圖片給的信息最直觀，最有視覺沖擊。一篇論文中，優(yōu)雅的顏色搭配會直接打開審稿人和編輯的視覺大門，相信大家在閱讀頂刊文獻時也可以發(fā)現(xiàn)頂刊中的圖片配色往往也是頂級的。

正確的色彩搭配：

①可以豐富版面樣式

②反映出文章作者的科研水平和嚴謹、細心程度

③恰如其分地傳遞科研論文的主旨，增加單位圖片的信息量和數(shù)據(jù)量

④能夠幫助讀者理解論文的重點和創(chuàng)新點

因此，配色對于一個圖片，可以說是靈魂了。

下圖是同一張圖片的不同配色方案，是不是對比的效果非常明顯，右圖的配色要比左圖的清爽許多，顯然顏色的搭配非常重要。

本期內(nèi)容利刃君就為大家分享一些十分好用的配色網(wǎng)站，助力大家的科研繪圖工作。

01Culrs

網(wǎng)站名稱：Culrs

網(wǎng)站地址：

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

Culrs是一個比較綜合型的配色網(wǎng)站，由兩位熱衷于為設計社區(qū)構建產(chǎn)品的印度設計師創(chuàng)立。Culrs的界面簡潔清新，使用感很好。

Culrs中配色方案的分類很不錯，分為鄰近色、三色、四色和單色，并且分類里有明、暗區(qū)分，而不是把所有的配色方案都混在一起，如此，我們可以很方便地獲得不同風格的配色方案。比如我們在鄰近色選擇“Light”，Culrs就會給出非常多比較明亮的鄰近色搭配方案：

可以看到給出的配色方案非常的Nice！下面選擇“Dark”，Culrs會給出很多比較暗的鄰近色搭配方案。同樣的大家也可以嘗試三色、四色等的配色方案。

如果我們需使用某配色方案，只需我們把鼠標放在任一色條上，都可以直接復制它的顏色號，就可以在繪圖軟件中如Origin、PS等直接使用，很方便。

02ColorSpace

網(wǎng)站名稱：ColorSpace

網(wǎng)站地址：

https://mycolor.space/

ColorSpace 是一個在線調(diào)色板生成工具，只需要輸入主色調(diào)顏色號，一鍵就可以生成優(yōu)秀的配色方案，配色方案有多種類型可供選擇，如通用漸變（Generic Gradient）、匹配梯度（Matching Gradient）、調(diào)色板（Matching Gradient）、扭曲點調(diào)色板（Twisted Spot Palette）等。

在使用時，單擊色塊，就可以直接選中色塊對應的顏色號，方便我們使用繪圖軟件如Origin、PS等直接使用。

除了基本的調(diào)色板模式外，ColorSpace還提供了漸變色和三色漸變這兩種配色模式，如果需要生成漸變色，只需輸入顏色號，點擊“GENERATE”即可生成漸變色。

03生成熱圖文件

網(wǎng)站名稱：ColorLeap

網(wǎng)站地址：https://colorleap.app/home

在目前流行扁平化、極簡風的浪潮下，使用復古風配色反而別具一格，ColorLeap就是一款復古式配色網(wǎng)站。ColorLeap又名色彩時光機，可以查詢每個年代輝煌的流行配色，ColorLeap為我們提供了12個年代的作品配色方案，每組配色方案都是從當時年代的流行作品進行抽樣制作的，可以說是非常有代表性了！

通過ColorLeap獲得的色卡的左下角都有它們的主題名字，非常方便根據(jù)使用場景去選擇~

全站有180個精選的復古風色卡，完全能滿足小伙伴們的需求，如果要使用色卡，只需點擊一下圖片下方或者色板上的色塊，就能成功復制色值了。

04WebGradients

網(wǎng)站名稱：WebGradients

網(wǎng)站地址：

https://webgradients.com/

漸變色在科研繪圖配色中的應用也非常多，漸變色除了給顏色變化帶來了流動性之外，還多了“質(zhì)感”，單個顏色本身就可以通過色相、明度、純度帶來一定的材質(zhì)感和重量感，但漸變的顏色可以帶來光的變化感，從而形成體積感和質(zhì)感。

橫向漸變

WebGradients就是一個高顏值漸變網(wǎng)站，提供了180多種漸變顏色參考，提供的顏色屬性都清晰標明，還可以下載成PSD， Sketch， PNG 甚至直接復制成一段 CSS 漸變代碼。打開網(wǎng)站我們就能直接看到 N 種配色展現(xiàn)在首頁，只需要點擊其中一個，就會顯示全屏漸變。使用方法也非常簡單，直接下載 Sketch/PSD 或復制十六進制顏色編碼即可！

05Adobe Color

網(wǎng)站名稱：Adobe Color

網(wǎng)站地址：

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

Adobe Color是Adobe家自產(chǎn)的配色網(wǎng)站，不僅提供現(xiàn)成的配色方案，還支持從自己喜歡的圖片中提取配色和漸變，以及獲取某些期刊要求的色盲友好和對比度友好的配色。

Adobe Color主要有「創(chuàng)建」、「探索」及「趨勢」三大主題。在「創(chuàng)建」處提供色輪配色、從圖片抓取主題色及漸變色，還有個就是色盲沖突顏色檢測。從圖片中抓取主題色是很實用的一個功能，我們可以選擇一些大師的作品獲取高級配色方案，根據(jù)要求我們可以選擇彩色、亮色、柔色、深色、暗色，并且可以自己移動色標，選取喜歡的顏色。

同樣的方法，我們也可以從圖片中提取漸變色，左側(cè)“漸層色標”可以增加或者減少色標的數(shù)目，下方有對應色標的各種顏色代碼，可以直接復制使用。

很多期刊比如nature對配色要求色盲友好，Adobe color可以做到這一點。在“協(xié)助工具”處可以通過色輪選擇配色方案，若配色不合適，會有警告提示。

在「探索」中可輸入關鍵字搜索相關圖片的用色，如我們搜索“月光”，可以獲得一系列與主題相關的配色方案。

「趨勢」則是提供從Behance和Adobe Stock的創(chuàng)意社群中，探索不同行業(yè)目前的色彩趨勢。

Adobe Color相比于其它配色網(wǎng)站來說，功能更加強大。如果有Adobe賬號，我們可以將中意的配色方案儲存起來，也可很方便地與Adobe系列產(chǎn)品如PS、AI等聯(lián)用。

06結(jié)語

以上就是本期利刃君為大家分享的五款可用于科研繪圖中色彩搭配的配色網(wǎng)站啦，基本能夠滿足我們?nèi)粘Ｅ渖枨螅绻蠹矣衅渌诲e的配色網(wǎng)站推薦，也可在留言區(qū)留言分享一下喲~

在線咨詢

上一篇：HTML5入門
下一篇：簡單炫酷旋轉(zhuǎn)菜單menu效果css3實現(xiàn)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

收藏！58個設計師最佳配色工具網(wǎng)站

Unsplash圖片集

待創(chuàng)建的資源圖表

構建資源圖表

1. 創(chuàng)建一個HTML網(wǎng)頁

2. 包含必要的JavaScript文件

3. 加載數(shù)據(jù)

4. 編寫一些JS代碼來可視化資源圖表

定制資源圖表

配置行和列

自定義資源圖表 1

在條形圖上添加最終比分

自定義資源圖表 2

個性化視覺外觀

自定義資源圖表 3

自定義工具提示

01Culrs

02ColorSpace

03生成熱圖文件

04WebGradients

05Adobe Color

06結(jié)語

您的項目需求