Sketch中直接复制的#xxxxxx值未必准确，因受共享色板、图层混合、非sRGB色彩空间等影响；右侧面板显示的Hex仅反映声明值，不包含父级透明度、混合模式或变量替换后的实际渲染色。
直接从Sketch里复制出来的#xxxxxx值，大概率不是你该用的值——尤其当设计稿用了共享色板、图层混合或非sRGB色彩空间时。
选中图层后右侧面板显示的Hex值可靠吗？
不一定。Sketch右侧面板显示的background或color值，只反映当前图层“声明”的颜色，不考虑以下干扰：
- 父级图层设置了
opacity或blendMode（如Multiply），实际渲染色已叠加变化 - 使用了
Shared Layer Style或Color Variable，而变量本身被全局替换过（比如主题切换后） - macOS系统启用了Display P3色彩配置，但导出时未强制转为sRGB，导致
#ff6b6b在网页里偏橙
验证方式：在Sketch中选中最底层的纯色块（无父级透明/混合），确认右侧属性面板「Color」栏显示的是原始十六进制，且未标记为「Variable」或「Linked」。
为什么截图取色器拿到的值和标注不符？
截图取色器读取的是屏幕最终像素值，受三重干扰：
立即学习“前端免费学习笔记（深入）”；
- Sketch窗口缩放比例（如125%）导致亚像素渲染，取色结果偏灰
- macOS的Retina屏+Display P3色域 → 浏览器用sRGB解析同一
#rrggbb，视觉差异明显 - 设计稿背景非纯白（比如浅灰
#f8f9fa），文字用rgba(0,0,0,0.87)，截图取到的是混合后的灰黑色，而非原始透明度定义
正确做法：关闭Sketch所有缩放（设为100%），用Cmd + C复制色块本身颜色（右键色块 →「Copy as CSS」），而不是截图后取色。
如何从.sketch文件里直接读取原始颜色定义？
.sketch本质是zip包，解压后打开document.json，重点查两个字段：
-
layerStyles：存储所有共享颜色样式，每个对象含do_objectID和color（RGBA格式数组，如[0.2, 0.3, 0.8, 1]） -
colors（部分版本在meta.json）：若设计稿用了「Document Colors」，这里存原始HEX字符串
注意：直接解析JSON比依赖UI更可靠，但需手动把RGBA数组转成rgb(51, 76, 204)或#334ccc——别用浏览器getComputedStyle反推，那已经是渲染结果。
Marketch插件生成的CSS颜色能直接用吗？
Marketch提取的是图层原始属性，但仍有陷阱：
- 它默认输出
background: #4cd964，但若该色块实际是渐变或带阴影，background字段会丢失信息 - 文本颜色若来自
layerTextStyles，Marketch可能只取color，忽略paragraphStyle里的textTransform或letterSpacing影响 - 生成的CSS未做色彩空间校验，遇到Display P3色值（如
color(display-p3 0.9 0.3 0.2)）会直接失效
建议流程：用Marketch先拿到初版CSS → 对照document.json里对应图层的style.color字段二次核对 → 手动替换所有display-p3色值为sRGB近似值（可用Chrome DevTools的Computed面板反查rgb()再转HEX）。
真正麻烦的从来不是“怎么取”，而是“取的是谁的值”——设计稿里的声明值、渲染链里的计算值、色空间转换后的显示值，三者常不一致。盯紧document.json里的原始定义，比任何UI面板都靠谱。
