CSS颜色值如何从Sketch设计稿中准确提取？

Sketch中直接复制的#xxxxxx值未必准确，因受共享色板、图层混合、非sRGB色彩空间等影响；右侧面板显示的Hex仅反映声明值，不包含父级透明度、混合模式或变量替换后的实际渲染色。

直接从Sketch里复制出来的#xxxxxx值，大概率不是你该用的值——尤其当设计稿用了共享色板、图层混合或非sRGB色彩空间时。

选中图层后右侧面板显示的Hex值可靠吗？

不一定。Sketch右侧面板显示的background或color值，只反映当前图层“声明”的颜色，不考虑以下干扰：

1. 父级图层设置了opacity或blendMode（如Multiply），实际渲染色已叠加变化
2. 使用了Shared Layer Style或Color Variable，而变量本身被全局替换过（比如主题切换后）
3. macOS系统启用了Display P3色彩配置，但导出时未强制转为sRGB，导致#ff6b6b在网页里偏橙

验证方式：在Sketch中选中最底层的纯色块（无父级透明/混合），确认右侧属性面板「Color」栏显示的是原始十六进制，且未标记为「Variable」或「Linked」。

为什么截图取色器拿到的值和标注不符？

截图取色器读取的是屏幕最终像素值，受三重干扰：

1. Sketch窗口缩放比例（如125%）导致亚像素渲染，取色结果偏灰
2. macOS的Retina屏+Display P3色域 → 浏览器用sRGB解析同一#rrggbb，视觉差异明显
3. 设计稿背景非纯白（比如浅灰#f8f9fa），文字用rgba(0,0,0,0.87)，截图取到的是混合后的灰黑色，而非原始透明度定义

正确做法：关闭Sketch所有缩放（设为100%），用Cmd + C复制色块本身颜色（右键色块 →「Copy as CSS」），而不是截图后取色。

如何从.sketch文件里直接读取原始颜色定义？

.sketch本质是zip包，解压后打开document.json，重点查两个字段：

1. layerStyles：存储所有共享颜色样式，每个对象含do_objectID和color（RGBA格式数组，如[0.2, 0.3, 0.8, 1]）
2. colors（部分版本在meta.json）：若设计稿用了「Document Colors」，这里存原始HEX字符串

注意：直接解析JSON比依赖UI更可靠，但需手动把RGBA数组转成rgb(51, 76, 204)或#334ccc——别用浏览器getComputedStyle反推，那已经是渲染结果。

Marketch插件生成的CSS颜色能直接用吗？

Marketch提取的是图层原始属性，但仍有陷阱：

1. 它默认输出background: #4cd964，但若该色块实际是渐变或带阴影，background字段会丢失信息
2. 文本颜色若来自layerTextStyles，Marketch可能只取color，忽略paragraphStyle里的textTransform或letterSpacing影响
3. 生成的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面板都靠谱。