UD5工具箱
第一步：打开工具页面
在浏览器地址栏输入Material Design色板工具地址，或通过UD5工具箱首页导航进入工具页面。推荐使用Chrome、Firefox、Edge等现代浏览器以获得最佳显示效果和交互体验。页面加载完成后，您将看到以网格形式排列的各类色系色块，布局清晰直观。
第二步：浏览色系与色阶
页面按照色相将颜色划分为十余个主要色系分组展示。每个色系组中，从左到右依次排列该色系的十个标准色阶（50、100、200、300、400、500、600、700、800、900），以及四个强调色色阶（A100、A200、A400、A700）。颜色从浅到深渐进排列，视觉上形成自然的梯度过渡。其中「500」色阶通常被视为该色系的标准主色，也是设计中最常使用的基准色值。您可以通过页面顶部的色系导航标签快速跳转到目标色系区域，也可以通过搜索框输入颜色名称进行筛选定位。
第三步：查看色值详情
将鼠标光标悬停（移动端为触摸长按）到任意色块上，页面会立即显示该颜色的HEX色值信息。例如悬停在红色系的「500」色阶上，会显示HEX值「#F44336」以及色阶编号「Red 500」。同时，工具会显示该颜色在实际UI中的简单预览效果，帮助您直观感受该颜色在界面中的呈现效果。对于强调色色阶，还会特别标注其适用于交互元素（如按钮、链接）的提示信息。
第四步：复制色值到剪贴板
点击任意色块，该色块的HEX色值将自动复制到系统剪贴板。复制成功后，页面上会出现短暂的提示动画（如「已复制 #F44336」），确认复制操作已完成。复制完成后，您可以直接在设计软件（如Figma、Sketch、Adobe XD）或代码编辑器（如VS Code、WebStorm）中按Ctrl+V（Mac为Cmd+V）粘贴使用。无需手动记下或键入色值，极大地减少了操作步骤。
第五步：参考主色与强调色搭配
在选中某个主色色阶（如Blue 500）后，工具右侧的搭配参考区域会展示推荐的强调色组合方案。这些搭配方案基于Material Design的官方色彩指南和业界广泛认可的设计实践。您可以看到该主色分别搭配不同强调色时的视觉效果对比，帮助您快速决策。如果您正在设计一个全新的UI项目或品牌视觉方案，这一功能可以为您提供极具参考价值的色彩组合灵感。
第六步：进阶使用场景
在CSS中使用：复制得到的HEX色值可直接用于CSS样式定义，如「color: #F44336;」或「background-color: #F44336;」。配合CSS变量使用，可以轻松实现主题换色。在开发框架中使用：Material Design色值是许多UI框架（如Vuetify、Material-UI、Angular Material）的默认主题色配置选项，您可以直接将复制的色值填入框架的主题配置中。在设计稿中使用：在设计软件中新建颜色样式或色板库时，将本工具中的色值逐一导入，即可快速搭建符合Material Design规范的设计系统色板。
注意事项
- HEX色值在不同设备屏幕上的显示可能存在细微色差，这属于正常现象
- 如有印刷需求，建议配合Pantone色卡进行校准，因为屏幕色域与印刷色域不同
- A系列强调色饱和度较高，建议仅用于交互元素而非大面积背景
- 色阶50是最浅色，适合作为页面背景色；色阶900是最深色，适合用于标题文字