作者：来自 Elastic Giovanni_Magni
Kibana 数据可视化的新配色方案于 2024 年 11 月在 Serverless 中进行了提前测试，并于 2025 年 4 月在 Kibana 9.0 中作为默认设置引入。
这是对我们整个设计系统进行视觉刷新的一部分。它带来了多项重要改动，旨在充分利用新视觉方案的潜力。通过这篇文章，我们希望解释我们选择背后的理由以及取得的积极效果。
为什么需要新的配色系统？
过去几年中，人们对产品视觉更新和美学刷新有了越来越高的需求，这源于多种同时发生的原因。我们之前的配色系统已无法有效支持 EUI（我们的设计系统）的复杂性。经过多年，人们自然希望获得更现代、更吸引人的美学。此外，设计系统与 Elastic 不断发展的品牌形象和传播方式也越来越脱节。
基础
本文专注于数据可视化的配色，但首先需要解释新配色系统背后的逻辑，以便理解其运作方式。
Elastic-Charts 基于一个包含 10 个不同元素的配色方案，然后根据具体需求和场景进行调整。
这 10 种颜色是我们配色方案的起点。它们帮助团队应对更复杂的场景，例如使用数学生成的色彩尺度（EUI 配色方案）处理发散和收敛的调色板、数据的文本表示或产品中的状态警报，同时配合精心调整的配色变体。
如下图所示，此次更新将我们的图表从左侧示例转变为右侧示例。这是在查看 Kibana 可视化时最明显的变化：颜色更亮、更均匀分布，即使使用的色调更少，但这只是变化的表面。接下来，让我们深入了解这些颜色是如何以及为何被选用的。
它的来源是什么？—— 一个新的色彩谱系
以 Elastic 品牌形象为出发点，设计团队生成了一个新的色彩谱系，作为产品中所有配色组合和使用的基础。按钮、提示信息、图标、文本段落，当然还有图表，现在都遵循相同的规则，因为它们都源自同一套颜色和色阶。这使我们能够构建一个统一的配色系统，既有足够的严格性保证一致性，又具有灵活性，可扩展并适用于 Elastic 设计系统的各种不同使用场景。
这一色阶集合使我们能够构建一个新的配色方案，该方案不是手动挑选的，而是在 OKLCH 色彩空间中通过数学生成的。这意味着每种色阶（或列，例如 shade 60）都具有相似的明度和色度值，与颜色类型无关。这些值经过轻微调整以适应颜色特性（黄色色阶由于非常亮，需要额外注意），但现在为设计团队提供了一个坚实的基础，可根据上下文和需求选择颜色，因为这样可以生成具有一致背景对比度的不同色阶，并且可以轻松互换。
以浅色模式为例，这些色阶的 Shade 90 通常用于按钮背景，而 Shade 100 用于文本标记，因为它们需要更高的对比度以满足可访问性要求。相同逻辑也应用于数据可视化颜色，最终目标是获得一个稳固、灵活、同时与产品和品牌紧密结合的配色方案，确保图表不会显得突兀。
我们的选择
我们选择了一个 10 色配色方案，由五种不同色调（青色、Elastic 蓝、粉色、红色和黄色）的成对色阶组成（shade 60 和 shade 30，或列 60 和 30）。
通常，数据可视化的配色方案会使用 10 到 12 种不同的颜色，因此从同一颜色中使用成对色阶听起来似乎违反直觉。这个决定的目的是避免过度扩展原始色谱，因为那样会需要创建额外的色调。其结果可能导致颜色集合不够一致，偏离品牌风格，并可能产生更多问题。其中一个问题是可访问性 —— 颜色较少的集合更易于处理，并允许我们在深色模式下提供完全可访问的配色方案。这十种颜色与背景的对比度均高于 4.5:1（符合 WCAG 标准），在页面和图表之间提供清晰分隔。在浅色模式下，这一目标通过引入高对比模式得以实现，从而在所有情况下确保图表的可访问性。
另一个重要点是相邻可视形状的表现。深浅交替的色调集合可以在堆叠条形图、面积图和树状图等图表中得到应用，在这些在我们产品中非常常见的可视化类型中，不同颜色之间的对比度更高，增强了可读性和区分度。
可扩展性
这种新配色方法的整体逻辑使我们能够扩展现有的选项集合，并突破以往的限制，提升产品 UI 的可扩展性，从而满足之前无法充分解决的用户需求。
在过去几年中，由于缺乏一致且可靠的指导原则，Kibana 环境中对严重性等级的处理方式各不相同。新的色谱为我们提供了机会，通过生成的色调建立明确的模式，指导如何在不同上下文中使用颜色来传达不同的风险等级。最终目标，如你所料，是为用户在各个解决方案（健康与严重性）中提供一致的体验。
我们清楚，这套配色方案并非没有缺点，在某些场景下的适用性可能比其他场景更强 —— 不幸的是，所有配色方案都是如此。不过，我们认为在逻辑和结构方面，这是一大进步，并希望用户能够认可这一点。
产品的这一部分在不断演进，我们会持续迭代，以提升 Elastic 用户在使用图表时的体验。我们非常希望听到你的反馈，如果你有任何意见或建议，请随时与我们联系。我们非常乐意倾听你的想法。感谢你阅读这篇博客文章。
原文：https://discuss.elastic.co/t/dec-10th-2025-en-a-new-color-palette-for-data-visualisation-in-kibana-how-and-why-we-created-it/383837
