图表中使用的颜色列表答案

【问题标题】：List of colors to use in a graph图表中使用的颜色列表
【发布时间】：2021-01-13 19:41:33
【问题描述】：

我正在尝试使用带有多行的 javascript 制作一个图表，我需要一个颜色列表。我找到的列表都是按字母顺序或按十六进制排序的，但我想要红色、蓝色、绿色、洋红色、棕色......（常见的，不是自动生成的，不同的颜色）。我也需要50个这样的。哪里有这样的数组？

【问题讨论】：

你每次都想要不同的颜色
是的，我希望每条线都具有不同的颜色，以便它们都可以很好地显示在单个图表上，但我想 20 条就足够了，然后我可以循环回到起点跨度>
搜索“css 颜色列表”会很快得到这样的列表。

标签： javascript colors

【解决方案1】：

解决方案

因为太长，这里无法全部显示。

向下滚动到来自 doanmade 的评论，您会发现一个包含 553 种不同颜色的数组

https://gist.github.com/mucar/3898821

要获得您想要的 50 个，您可以对其进行迭代并每 10 个取一个。颜色并将其存储在一个新数组中。

let result = [];
hexCode.forEach((color, ind) => {
if(ind % 10 === 0){
result.push(x.color);
}
})

以下是该系列中的前 150 个：

let hexCode = [
  {
    color: "indian red",
    code: {
      hex: "#B0171F"
    },
    id: 1
  },

  {
    color: "crimson ",
    code: {
      hex: "#DC143C "
    },
    id: 2
  },

  {
    color: "lightpink   ",
    code: {
      hex: "#FFB6C1 "
    },
    id: 4
  },

  {
    color: "lightpink 1  ",
    code: {
      hex: "#FFAEB9 "
    },
    id: 4
  },

  {
    color: "lightpink 2  ",
    code: {
      hex: "#EEA2AD "
    },
    id: 5
  },

  {
    color: "lightpink 3  ",
    code: {
      hex: "#CD8C95 "
    },
    id: 6
  },

  {
    color: "lightpink 4  ",
    code: {
      hex: "#8B5F65 "
    },
    id: 7
  },

  {
    color: "pink    ",
    code: {
      hex: "#FFC0CB "
    },
    id: 8
  },

  {
    color: "pink 1",
    code: {
      hex: "#FFB5C5 "
    },
    id: 9
  },

  {
    color: "pink 2",
    code: {
      hex: "#EEA9B8 "
    },
    id: 10
  },

  {
    color: "pink 3",
    code: {
      hex: "#CD919E "
    },
    id: 11
  },

  {
    color: "pink 4",
    code: {
      hex: "#8B636C"
    },
    id: 12
  },

  {
    color: "palevioletred   ",
    code: {
      hex: "#DB7093"
    },
    id: 13
  },

  {
    color: "palevioletred 1 ",
    code: {
      hex: "#FF82AB"
    },
    id: 14
  },

  {
    color: "palevioletred 2 ",
    code: {
      hex: "#EE799F"
    },
    id: 15
  },

  {
    color: "palevioletred 3 ",
    code: {
      hex: "#CD6889"
    },
    id: 16
  },

  {
    color: "palevioletred 4 ",
    code: {
      hex: "#8B475D"
    },
    id: 17
  },

  {
    color: "lavenderblush 1 (lavenderblush) ",
    code: {
      hex: "#FFF0F5"
    },
    id: 18
  },

  {
    color: "lavenderblush 2 ",
    code: {
      hex: "#EEE0E5"
    },
    id: 19
  },

  {
    color: "lavenderblush 3 ",
    code: {
      hex: "#CDC1C5"
    },
    id: 20
  },

  {
    color: "lavenderblush 4 ",
    code: {
      hex: "#8B8386"
    },
    id: 21
  },

  {
    color: "violetred 1 ",
    code: {
      hex: "#FF3E96"
    },
    id: 22
  },

  {
    color: "violetred 2 ",
    code: {
      hex: "#EE3A8C"
    },
    id: 23
  },

  {
    color: "violetred 3 ",
    code: {
      hex: "#CD3278"
    },
    id: 24
  },

  {
    color: "violetred 4 ",
    code: {
      hex: "#8B2252"
    },
    id: 25
  },

  {
    color: "hotpink ",
    code: {
      hex: "#FF69B4"
    },
    id: 26
  },

  {
    color: "hotpink 1   ",
    code: {
      hex: "#FF6EB4"
    },
    id: 27
  },

  {
    color: "hotpink 2   ",
    code: {
      hex: "#EE6AA7"
    },
    id: 28
  },

  {
    color: "hotpink 3   ",
    code: {
      hex: "#CD6090"
    },
    id: 29
  },

  {
    color: "hotpink 4   ",
    code: {
      hex: "#8B3A62"
    },
    id: 30
  },

  {
    color: "raspberry   ",
    code: {
      hex: "#872657"
    },
    id: 31
  },

  {
    color: "deeppink 1 (deeppink)   ",
    code: {
      hex: "#FF1493"
    },
    id: 32
  },

  {
    color: "deeppink 2  ",
    code: {
      hex: "#EE1289"
    },
    id: 33
  },

  {
    color: "deeppink 3  ",
    code: {
      hex: "#CD1076"
    },
    id: 34
  },

  {
    color: "deeppink 4  ",
    code: {
      hex: "#8B0A50"
    },
    id: 35
  },

  {
    color: "maroon 1    ",
    code: {
      hex: "#FF34B3"
    },
    id: 36
  },

  {
    color: "maroon 2    ",
    code: {
      hex: "#EE30A7"
    },
    id: 37
  },

  {
    color: "maroon 3    ",
    code: {
      hex: "#CD2990"
    },
    id: 38
  },

  {
    color: "mediumvioletred",
    code: {
      hex: "#C71585"
    },
    id: 39
  },

  {
    color: "violetred   ",
    code: {
      hex: "#D02090"
    },
    id: 40
  },

  {
    color: "orchid  ",
    code: {
      hex: "#DA70D6"
    },
    id: 41
  },

  {
    color: "orchid 1    ",
    code: {
      hex: "#FF83FA"
    },
    id: 42
  },

  {
    color: "orchid 2    ",
    code: {
      hex: "#EE7AE9"
    },
    id: 43
  },

  {
    color: "orchid 3    ",
    code: {
      hex: "#CD69C9"
    },
    id: 44
  },

  {
    color: "orchid 4    ",
    code: {
      hex: "#8B4789"
    },
    id: 45
  },

  {
    color: "thistle ",
    code: {
      hex: "#D8BFD8"
    },
    id: 46
  },

  {
    color: "thistle 1   ",
    code: {
      hex: "#FFE1FF"
    },
    id: 47
  },

  {
    color: "thistle 2   ",
    code: {
      hex: "#EED2EE"
    },
    id: 48
  },

  {
    color: "thistle 3   ",
    code: {
      hex: "#CDB5CD"
    },
    id: 49
  },

  {
    color: "thistle 4   ",
    code: {
      hex: "#8B7B8B"
    },
    id: 50
  },

  {
    color: "plum 1  ",
    code: {
      hex: "#FFBBFF"
    },
    id: 51
  },

  {
    color: "plum 2  ",
    code: {
      hex: "#EEAEEE"
    },
    id: 52
  },

  {
    color: "plum 3  ",
    code: {
      hex: "#CD96CD"
    },
    id: 53
  },

  {
    color: "plum 4  ",
    code: {
      hex: "#8B668B"
    },
    id: 54
  },

  {
    color: "plum    ",
    code: {
      hex: "#DDA0DD"
    },
    id: 55
  },

  {
    color: "violet  ",
    code: {
      hex: "#EE82EE"
    },
    id: 56
  },

  {
    color: "magenta (fuchsia*)  ",
    code: {
      hex: "#FF00FF"
    },
    id: 57
  },

  {
    color: "magenta 2   ",
    code: {
      hex: "#EE00EE"
    },
    id: 58
  },

  {
    color: "magenta 3   ",
    code: {
      hex: "#CD00CD"
    },
    id: 59
  },

  {
    color: "magenta 4 (darkmagenta) ",
    code: {
      hex: "#8B008B"
    },
    id: 60
  },

  {
    color: "purple* ",
    code: {
      hex: "#800080"
    },
    id: 61
  },

  {
    color: "mediumorchid    ",
    code: {
      hex: "#BA55D3"
    },
    id: 62
  },

  {
    color: "mediumorchid 1  ",
    code: {
      hex: "#E066FF"
    },
    id: 63
  },

  {
    color: "mediumorchid 2  ",
    code: {
      hex: "#D15FEE"
    },
    id: 64
  },

  {
    color: "mediumorchid 3  ",
    code: {
      hex: "#B452CD"
    },
    id: 65
  },

  {
    color: "mediumorchid 4  ",
    code: {
      hex: "#7A378B"
    },
    id: 66
  },

  {
    color: "darkviolet  ",
    code: {
      hex: "#9400D3"
    },
    id: 67
  },

  {
    color: "darkorchid  ",
    code: {
      hex: "#9932CC"
    },
    id: 68
  },

  {
    color: "darkorchid 1    ",
    code: {
      hex: "#BF3EFF"
    },
    id: 69
  },

  {
    color: "darkorchid 2    ",
    code: {
      hex: "#B23AEE"
    },
    id: 70
  },

  {
    color: "darkorchid 3    ",
    code: {
      hex: "#9A32CD"
    },
    id: 71
  },

  {
    color: "darkorchid 4    ",
    code: {
      hex: "#68228B"
    },
    id: 72
  },

  {
    color: "indigo  ",
    code: {
      hex: "#4B0082"
    },
    id: 73
  },

  {
    color: "blueviolet  ",
    code: {
      hex: "#8A2BE2"
    },
    id: 74
  },

  {
    color: "purple 1    ",
    code: {
      hex: "#9B30FF"
    },
    id: 75
  },

  {
    color: "purple 2    ",
    code: {
      hex: "#912CEE"
    },
    id: 76
  },

  {
    color: "purple 3    ",
    code: {
      hex: "#7D26CD"
    },
    id: 77
  },

  {
    color: "purple 4    ",
    code: {
      hex: "#551A8B"
    },
    id: 78
  },

  {
    color: "mediumpurple    ",
    code: {
      hex: "#9370DB"
    },
    id: 79
  },

  {
    color: "mediumpurple 1  ",
    code: {
      hex: "#AB82FF"
    },
    id: 80
  },

  {
    color: "mediumpurple 2  ",
    code: {
      hex: "#9F79EE"
    },
    id: 81
  },

  {
    color: "mediumpurple 3  ",
    code: {
      hex: "#8968CD"
    },
    id: 82
  },

  {
    color: "mediumpurple 4  ",
    code: {
      hex: "#5D478B"
    },
    id: 83
  },

  {
    color: "darkslateblue   ",
    code: {
      hex: "#483D8B"
    },
    id: 84
  },

  {
    color: "lightslateblue  ",
    code: {
      hex: "#8470FF"
    },
    id: 85
  },

  {
    color: "mediumslateblue ",
    code: {
      hex: "#7B68EE"
    },
    id: 86
  },

  {
    color: "slateblue   ",
    code: {
      hex: "#6A5ACD"
    },
    id: 87
  },

  {
    color: "slateblue 1 ",
    code: {
      hex: "#836FFF"
    },
    id: 88
  },

  {
    color: "slateblue 2 ",
    code: {
      hex: "#7A67EE"
    },
    id: 89
  },

  {
    color: "slateblue 3 ",
    code: {
      hex: "#6959CD"
    },
    id: 90
  },

  {
    color: "slateblue 4 ",
    code: {
      hex: "#473C8B"
    },
    id: 91
  },

  {
    color: "ghostwhite  ",
    code: {
      hex: "#F8F8FF"
    },
    id: 92
  },

  {
    color: "lavender    ",
    code: {
      hex: "#E6E6FA"
    },
    id: 93
  },

  {
    color: "blue*   ",
    code: {
      hex: "#0000FF"
    },
    id: 94
  },

  {
    color: "blue 2  ",
    code: {
      hex: "#0000EE"
    },
    id: 95
  },

  {
    color: "blue 3 (mediumblue) ",
    code: {
      hex: "#0000CD"
    },
    id: 96
  },

  {
    color: "blue 4 (darkblue)   ",
    code: {
      hex: "#00008B"
    },
    id: 97
  },

  {
    color: "navy*   ",
    code: {
      hex: "#000080"
    },
    id: 98
  },

  {
    color: "midnightblue    ",
    code: {
      hex: "#191970"
    },
    id: 99
  },

  {
    color: "cobalt  ",
    code: {
      hex: "#3D59AB"
    },
    id: 100
  },

  {
    color: "royalblue   ",
    code: {
      hex: "#4169E1"
    },
    id: 101
  },

  {
    color: "royalblue 1 ",
    code: {
      hex: "#4876FF"
    },
    id: 102
  },

  {
    color: "royalblue 2 ",
    code: {
      hex: "#436EEE"
    },
    id: 103
  },

  {
    color: "royalblue 3 ",
    code: {
      hex: "#3A5FCD"
    },
    id: 104
  },

  {
    color: "royalblue 4 ",
    code: {
      hex: "#27408B"
    },
    id: 105
  },

  {
    color: "cornflowerblue  ",
    code: {
      hex: "#6495ED"
    },
    id: 106
  },

  {
    color: "lightsteelblue  ",
    code: {
      hex: "#B0C4DE"
    },
    id: 107
  },

  {
    color: "lightsteelblue 1    ",
    code: {
      hex: "#CAE1FF"
    },
    id: 108
  },

  {
    color: "lightsteelblue 2    ",
    code: {
      hex: "#BCD2EE"
    },
    id: 109
  },

  {
    color: "lightsteelblue 3    ",
    code: {
      hex: "#A2B5CD"
    },
    id: 110
  },

  {
    color: "lightsteelblue 4    ",
    code: {
      hex: "#6E7B8B"
    },
    id: 111
  },

  {
    color: "lightslategray  ",
    code: {
      hex: "#778899"
    },
    id: 112
  },

  {
    color: "slategray   ",
    code: {
      hex: "#708090"
    },
    id: 113
  },

  {
    color: "slategray 1 ",
    code: {
      hex: "#C6E2FF"
    },
    id: 114
  },

  {
    color: "slategray 2 ",
    code: {
      hex: "#B9D3EE"
    },
    id: 115
  },

  {
    color: "slategray 3 ",
    code: {
      hex: "#9FB6CD"
    },
    id: 116
  },

  {
    color: "slategray 4 ",
    code: {
      hex: "#6C7B8B"
    },
    id: 117
  },

  {
    color: "dodgerblue 1 (dodgerblue)",
    code: {
      hex: "#1E90FF"
    },
    id: 118
  },

  {
    color: "dodgerblue 2",
    code: {
      hex: "#1C86EE"
    },
    id: 119
  },

  {
    color: "dodgerblue 3",
    code: {
      hex: "#1874CD"
    },
    id: 120
  },

  {
    color: "dodgerblue 4",
    code: {
      hex: "#104E8B"
    },
    id: 121
  },

  {
    color: "aliceblue",
    code: {
      hex: "#F0F8FF"
    },
    id: 122
  },

  {
    color: "steelblue",
    code: {
      hex: "#4682B4"
    },
    id: 123
  },

  {
    color: "steelblue 1",
    code: {
      hex: "#63B8FF"
    },
    id: 124
  },

  {
    color: "steelblue 2",
    code: {
      hex: "#5CACEE"
    },
    id: 125
  },

  {
    color: "steelblue 3",
    code: {
      hex: "#4F94CD"
    },
    id: 126
  },

  {
    color: "steelblue 4",
    code: {
      hex: "#36648B"
    },
    id: 127
  },

  {
    color: "lightskyblue",
    code: {
      hex: "#87CEFA"
    },
    id: 128
  },

  {
    color: "lightskyblue 1",
    code: {
      hex: "#B0E2FF"
    },
    id: 129
  },

  {
    color: "lightskyblue 2",
    code: {
      hex: "#A4D3EE"
    },
    id: 130
  },

  {
    color: "lightskyblue 3",
    code: {
      hex: "#8DB6CD"
    },
    id: 131
  },

  {
    color: "lightskyblue 4",
    code: {
      hex: "#607B8B"
    },
    id: 132
  },

  {
    color: "skyblue 1",
    code: {
      hex: "#87CEFF"
    },
    id: 133
  },

  {
    color: "skyblue 2",
    code: {
      hex: "#7EC0EE"
    },
    id: 134
  },

  {
    color: "skyblue 3",
    code: {
      hex: "#6CA6CD"
    },
    id: 135
  },

  {
    color: "skyblue 4",
    code: {
      hex: "#4A708B"
    },
    id: 136
  },

  {
    color: "skyblue",
    code: {
      hex: "#87CEEB"
    },
    id: 137
  },

  {
    color: "deepskyblue 1 (deepskyblue)",
    code: {
      hex: "#00BFFF"
    },
    id: 138
  },

  {
    color: "deepskyblue 2",
    code: {
      hex: "#00B2EE"
    },
    id: 139
  },

  {
    color: "deepskyblue 3",
    code: {
      hex: "#009ACD"
    },
    id: 140
  },

  {
    color: "deepskyblue 4",
    code: {
      hex: "#00688B"
    },
    id: 141
  },

  {
    color: "peacock",
    code: {
      hex: "#33A1C9"
    },
    id: 142
  },

  {
    color: "lightblue",
    code: {
      hex: "#ADD8E6"
    },
    id: 143
  },

  {
    color: "lightblue 1",
    code: {
      hex: "#BFEFFF"
    },
    id: 144
  },

  {
    color: "lightblue 2",
    code: {
      hex: "#B2DFEE"
    },
    id: 145
  },

  {
    color: "lightblue 3",
    code: {
      hex: "#9AC0CD"
    },
    id: 146
  },

  {
    color: "lightblue 4",
    code: {
      hex: "#68838B"
    },
    id: 147
  },

  {
    color: "powderblue",
    code: {
      hex: "#B0E0E6"
    },
    id: 148
  },

  {
    color: "cadetblue 1",
    code: {
      hex: "#98F5FF"
    },
    id: 149
  },

  {
    color: "cadetblue 2",
    code: {
      hex: "#8EE5EE"
    },
    id: 150
  }]

【讨论】：

这些颜色太相似了。如果我错了，请纠正我，但似乎红色是第一位的（粉红色，紫罗兰色）......，这就是我在问题中“按十六进制排序”的意思
您可以循环浏览它并每隔 10 次获取一次。并从中构建一个数组，然后你就有 50 个。
@Kevinthefrog 我做了一个 sn-p，它需要每 10 个值并将其推送到一个新数组中，然后你的结果是一个 55 种颜色的数组，颜色的范围应该更加多样化跨度>
不客气 :) 如果您认为这有帮助，请将其标记为已接受，请点击下方的按钮进行投票。

【解决方案2】：

var lineChartData = {
  labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6", "Data 7"],
  datasets: [{
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "rgba(220,180,0,1)",
    pointColor: "rgba(220,180,0,1)",
    data: [20, 30, 80, 20, 40, 10, 60]
  }, {
    fillColor: "rgba(151,187,205,0)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    data: [60, 10, 40, 30, 80, 30, 20]
  }]

}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
  pointDotRadius: 10,
  bezierCurve: false,
  scaleShowVerticalLines: false,
  scaleGridLineColor: "black"
});

.container {
  width: 80%;
  margin: 20px auto;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="container">
  <h2>Chart Js</h2>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

<p class="p">Demo by Monty Shokeen. <a href="http://www.sitepoint.com/fancy-responsive-charts-with-chart-js" target="_blank">See article</a>.</p>

【讨论】：