色彩

色彩体系

ReX 提供 2 种颜色主题：浅色和深色。每个产品可以支持任意主题的切换。选择哪种主题应该基于内容，平台和用户体验来进行选择。

品牌色

- 主色

品牌主色是在所有产品的屏幕和组件应用中使用最频繁的颜色，ReX Design 的品牌色，Hex 值为：#3862CF，应用场景包括：关键行动点、操作状态、重要信息高亮、图形化等场景。

- 辅色

辅助颜色提供了更多的方式来强调和区分你的产品。如果有辅助颜色是可以选择的，并且应该谨慎用于突出 UI 的部分来选择，Hex 值为：#46CF9F，应用场景包括：悬浮按钮、选择空间、进度条、重要文字、图形化等场景。

灰度

每种灰色都有特定的含义。例如，gray-07 及以上可用于内容文本，除了白和黑，中性色是 UI 中被大量使用的颜色，选择好的中性色可以让页面有更加明确的主次关系，增加可读性。

ReX 的中性色板中一共包含了从浅灰到深灰一共 10 种颜色。

语义色

语义色代表明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选择需要按照常规色彩认知。比如：红色表达危险状态，橙色表达警示状态，绿色表达成功状态，蓝色为链接。在颜色选择上，请参考色板语义。

无障碍运用

为了确保在浅色或者深色文本上有更为舒适的阅读，在使用背景时可以使用品牌色或者辅助色的延伸色。在颜色的使用领域研究比较深入的是 W3C 和 Google，他们做了部分的研究和实验，实验结论是：前景元素的大小、前景色&背景色光传递眼睛的对比度有关。文字于背景色的对比度至少要大于 3:1。

白色的标记：背景颜色在白色文本上可辨识

黑色的标记：背景颜色在黑色文本上可辨识

基础色板

ReX Design 的基础色板共计 112 个颜色，包含品牌色、功能色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

可视化色板

这些颜色没有附加语义。他们可用于显示内容之间的关系（例如：标签分类、数据可视化图表）。基于 9 个主色进行了明暗的衍生，基本可以满足所有产品设计中对于颜色的需求。