设计与图片

设计交接时怎么把一个颜色同时给出 HEX、RGB 和 CMYK?

网页和印刷都要交接颜色时,先记录颜色用途与色彩模式,再用转换值建立可复查的交接说明。

3 分钟阅读 1350 字

先写颜色用在哪里,再复制颜色值

设计交接里只发一张蓝色截图,往往不够让网页和印刷双方复现同一种意图。先把颜色的用途写出来:它是网页主按钮、品牌标题、包装底色,还是印刷小字。然后记录原始 HEX 值、网页使用的 RGB 值,以及印刷方需要参考的 CMYK 值。颜色值转换是交接的起点,不是印刷效果的保证。

例如品牌蓝用于网站的“提交”按钮,同时要出现在宣传单的标题条。交接备注可以写成“按钮与标题条:#2563EB;网页 RGB:37, 99, 235;印刷 CMYK 为转换参考值,按印厂指定配置和打样确认”。这样接手的人知道哪些数字属于屏幕实现,哪些需要在输出环境中复核。

用颜色选择器取得同一颜色的多种表示

颜色选择器 中输入六位 HEX 值或直接选择颜色,页面会显示 HEX、RGB、HSL、HSV 和 CMYK,并可逐项复制。对网页开发而言,HEX 或 RGB 通常最直接;HSL、HSV 更方便讨论明度、饱和度或做配色变化;CMYK 则可以作为和印刷方沟通的初始记录。

不要手动从截图猜数值。截图会受到显示器、软件界面和缩放影响,而复制工具显示的数值能避免把 #2563EB 写成相近的 #2563E8。如果要准备一组主色、强调色和浅底色,可再用 配色工具 整理色板,并为每个颜色写明名称和用途,而不是只留下无说明的色块。

网页 RGB 与印刷 CMYK 不能当作完全等价

这个工具根据选中的 RGB 颜色计算并显示 CMYK 百分比,但没有载入印厂、纸张、油墨或设备的 ICC 配置文件。国际色彩联盟说明,颜色管理需要把设备的数值与适当的配置文件联系起来;不同输出条件可能需要不同的 CMYK 输出配置。因此,转换出来的 CMYK 应视为沟通和初步排版用的参考,而不是“印出来一定一样”的承诺。

比如屏幕上鲜艳的蓝色,在某些印刷条件下可能无法原样呈现。遇到包装、品牌手册或大批量印刷,先问印厂要使用的配置、交付格式和打样要求;发送带有原始 RGB/HEX、预期用途与转换 CMYK 的文件,再以样张确认。只把 CMYK 数字贴进文件而没有说明介质,会让后续修改失去依据。

交接文件至少包含四项信息

一份可执行的颜色交接不必复杂,但要能被复查。每个关键颜色建议写清:

  • 颜色名称和使用位置,例如“品牌蓝/网站主按钮、宣传单标题条”。
  • 原始 HEX 与 RGB 值,并注明网页或屏幕用途。
  • CMYK 参考值、目标印刷物和是否已按指定配置转换。
  • 最终确认人、打样日期或需要复核的事项。

如果设计稿里有图片水印或客户预览图,也要把它与品牌色规范分开。可用 图片加水印工具 制作预览用途的水印,但水印透明度和图片导出效果仍要在实际尺寸下检查。工具输出的颜色数值不能替代客户审批、印刷打样或无障碍对比度检查。

交付前用实际环境做最后确认

导出网页素材后,在目标浏览器和常用屏幕上查看按钮、文字与背景的区分度;提交印刷稿前,打开最终 PDF,确认使用的颜色模式和印厂要求一致。对于关键品牌色,查看实体或数字样张,不要只在自己的显示器上判断。

如果样张和预期不同,回到交接记录确认原始 HEX、所用配置和输出条件,而不是随意改一个 CMYK 数字。颜色选择器能帮助统一记录和减少抄写错误,不能预测每台显示器、每种纸张或每台印刷机的结果。这个界线写清楚,反而能让网页开发、设计和印刷端更快定位问题。

常见问题

HEX、RGB 和 CMYK 可以互相替代吗?

它们都能描述颜色,但服务的设备和工作流程不同。网页通常以 HEX 或 RGB 实现;CMYK 需要结合具体输出条件确认。

工具显示的 CMYK 能直接交给印厂吗?

可以作为参考信息一并提供,但先确认印厂要求的配置和文件格式,并以打样或其确认流程为准。

为什么同一个 HEX 在两台屏幕上看起来不同?

显示器的色彩能力、设置和色彩管理可能不同。关键颜色应在约定的目标环境中复查,不要只看一台设备。

交接时只给截图有什么问题?

截图不包含清晰的数值、用途和输出条件。接手的人难以判断应使用网页值、印刷参考值,还是另行转换。