颜色选择器
免费在线颜色选择器和转换器。立即获取HEX、RGB、HSL和CMYK代码。生成色调和色度。
免费在线颜色选择器和转换器。立即获取HEX、RGB、HSL和CMYK代码。生成色调和色度。
颜色选择器与转换器 —— 在线 HEX、RGB、HSL、CMYK 颜色代码
颜色是每种视觉设计的基础。无论您是在构建网站、设计移动应用、创建品牌标识，还是准备打印文件，都需要能够完美跨所有媒介转换的精确颜色代码。仅凭肉眼猜测颜色会导致结果不一致。我们的免费 颜色选择器与转换器 为您提供四种专业格式的精确颜色值 —— HEX、RGB、HSL 和 CMYK —— 并提供完整的色调和阴影调色板，可在几秒钟内构建和谐的颜色方案。
为什么设计中准确的颜色很重要
颜色不仅仅是装饰。它驱动用户行为、传达品牌身份并确保可访问性。Color Marketing Group 的一项研究发现，高达 85% 的消费者将颜色视为购买产品的首要原因。在数字设计中，错误的蓝色色调可能使按钮变得不可见，而正确的绿色则可通过传达信任和行动来提高转化率。
挑战在于，颜色在不同使用场景中以不同格式存在。网页开发人员使用 HEX 和 RGB。图形设计师通常更喜欢 HSL，因为它易于调整。印刷专业人士需要 CMYK，因为屏幕和打印机产生颜色的方式不同。没有可靠的转换器，将单一颜色在这些格式之间转换会变成手动且容易出错的过程。
屏幕使用加法 RGB 模型发射光 —— 将红、绿、蓝三种颜色组合起来创建颜色。打印机使用减法 CMYK 模型 —— 通过叠加青、品红、黄和黑墨水来吸收光并产生颜色。由于这些过程本质上不同，屏幕上看起来鲜艳的颜色在纸上可能显得暗淡或偏移。正确的颜色转换器会向您展示每个系统中的精确值，以便您在提交设计之前了解预期效果。
如何使用颜色选择器和转换器
查找和转换颜色只需几秒钟。您可以从视觉选择、HEX 代码或 RGB 滑块开始。
- 选择颜色 使用原生颜色输入。点击颜色色块以打开系统颜色选择器并选择任何视觉色调。或者，直接在输入字段中输入 HEX 代码。
- 使用 RGB 滑块进行微调 以实现精确控制。使用滑块或输入精确数字（0–255）独立调整红色、绿色和蓝色值。
- 查看所有四种格式的即时转换。调整颜色时，HEX、RGB、HSL 和 CMYK 值会实时更新。每种格式都有自己的复制按钮。
- 一键复制任何代码。点击任何格式旁边的复制图标，将该精确值保存到剪贴板。勾选标记确认复制成功。
- 探索色调和阴影 在主选择器下方。工具会根据您选择的颜色自动生成一个网格，包含更浅的色调（添加白色）和更暗的阴影（添加黑色）。点击任何变体以选择它并立即查看其转换值。
整个过程是视觉化和交互式的。您不需要了解颜色空间背后的数学 —— 工具会自动处理所有转换。
理解颜色格式
| 格式 | 代表内容 | 最佳用途 | 示例 |
|---|---|---|---|
| HEX | 六位十六进制代码表示 RGB 值 | 网页设计、CSS、HTML、数字图形 | #3B82F6 |
| RGB | 红、绿、蓝光值从 0 到 255 | 屏幕显示、CSS、图像编辑、视频 | rgb(59, 130, 246) |
| HSL | 色相（0–360°）、饱和度（0–100%）、亮度（0–100%） | 直观调整颜色、主题、可访问性 | hsl(217, 91%, 60%) |
| CMYK | 青、品红、黄和黑（K）百分比从 0 到 100 | 专业印刷、包装、出版物 | cmyk(76%, 47%, 0%, 4%) |
HEX 代码
HEX 是网页开发中最常见的格式。它将红、绿、蓝表示为两个十六进制数字组合成一个六字符字符串，并以前缀井号表示。#FF0000 是纯红色，#00FF00 是纯绿色，#0000FF 是纯蓝色。这种紧凑格式使得将其粘贴到 CSS 文件、设计标记和配置文件中变得容易。
RGB 值
RGB 通过红、绿、蓝光的强度（从 0 到 255）定义颜色。这是计算机显示器、电视屏幕和智能手机显示的原生语言。RGB 也是 HEX 代码构建的基础 —— 每个 HEX 值都可以直接转换为 RGB，反之亦然。
HSL 值
HSL 代表色相、饱和度和亮度。设计师通常更喜欢 HSL，因为它映射到人类对颜色的思考方式。色相是光谱中的实际颜色（0° 是红色，120° 是绿色，240° 是蓝色）。饱和度控制颜色的鲜艳或暗淡程度。亮度控制颜色的明暗程度。想要一个更浅的蓝色？只需增加亮度值。想要更暗淡？降低饱和度。这种直观的结构使 HSL 成为构建颜色调色板和设计系统的理想选择。
CMYK 值
CMYK 是印刷的标准，因为物理墨水无法产生光。与屏幕发出红、绿、蓝光不同，印刷材料吸收光。青色吸收红色，品红吸收绿色，黄色吸收蓝色。黑色墨水（CMYK 中的“K”）被添加，因为将青、品红和黄色组合起来很少能产生深而丰富的黑色。当您将 RGB 或 HEX 颜色转换为 CMYK 时，您是在将屏幕光值转换为打印机可以理解的墨水覆盖率百分比。
主要功能
| 功能 | 功能描述 | 为什么重要 |
|---|---|---|
| 原生颜色选择器 | 打开系统颜色选择器进行视觉选择 | 让您在微调前自然地通过眼睛选择颜色 |
| 手动 HEX 输入 | 直接输入任何有效的 HEX 代码 | 当您有品牌指南或设计文件中的颜色时非常完美 |
| RGB 滑块控制 | 红、绿、蓝的独立滑块 | 精确调整以匹配确切规格 |
| 实时转换 | 所有四种格式在您调整时即时更新 | 无需猜测 —— 无需切换标签即可一次查看所有值 |
| 一键复制 | 每种格式的复制按钮并有视觉确认 | 无需手动选择即可获取所需的精确代码 |
| 色调调色板 | 通过添加白色生成更浅的色调 | 构建悬停状态、背景和微妙的强调色 |
| 阴影调色板 | 通过添加黑色生成更暗的阴影 | 创建边框、活动状态和设计中的深度 |
| 点击选择变体 | 点击任何色调或阴影以选择它 | 在调色板选项中迭代而无需重新输入代码 |
与仅输出一种格式的独立颜色选择器不同，此工具弥合了数字和印刷设计之间的差距。网页开发人员可以选择颜色，复制用于 CSS 的 HEX 代码，同时查看 CMYK 值以与印刷设计师分享。图形艺术家可以从印刷简报中的 CMYK 值开始，并立即获得用于数字草图的 RGB 等效值。
实际应用场景
编写 CSS 的网页开发人员 在构建网站时，开发人员需要在数十个 CSS 规则中保持一致的颜色值。选择一个主要品牌颜色，复制其 HEX 代码用于按钮和标题，然后获取一个更浅的色调用于悬停状态和一个更暗的阴影用于活动状态。所有值在数学上是一致的，因为它们都源自同一个基础颜色。
构建组件库的 UI/UX 设计师 设计系统需要精心构建的颜色调色板。设计师可能会定义一个主要蓝色，然后生成五个色调和五个阴影以创建完整的背景、边框、文本和交互状态的刻度。HSL 格式特别容易使用，因为调整亮度值可以创建可预测的步骤。
准备印刷材料的图形设计师 创建名片或宣传册的设计师需要尽可能接近屏幕预览的 CMYK 值。通过将品牌的 HEX 颜色转换为 CMYK，设计师可以向印刷商提供精确的墨水百分比，避免物理样稿到达时出现意外。
数字艺术家和插画师 颜色和谐在数字艺术中至关重要。艺术家可能会选择一个基础颜色，然后使用色调和阴影来构建深度、阴影和高光，而无需手动计算更浅或更暗的版本。点击变体可以加快创作过程，同时保持调色板的连贯性。
维护品牌一致性的营销团队 品牌指南通常以一种格式指定颜色，但不同平台需要不同的代码。网站上定义的 HEX 蓝色需要一个 RGB 等效版本用于 PowerPoint 模板和一个 CMYK 版本用于印刷传单。转换器确保每个团队成员在任何媒介中使用相同的颜色。
检查对比度的可访问性专家 在评估文本是否在背景上可读时，专家需要精确的颜色值。转换器提供精确的 HEX 和 RGB 代码，可以插入到对比度计算器中以验证 WCAG 合规性。
小贴士和最佳实践
- 使用 HSL 来构建调色板。 如果您从零开始创建颜色方案，请使用 HSL。保持色相不变，调整饱和度和亮度以生成和谐的变体。这比直接调整 RGB 值产生更视觉一致的调色板。
- 在打印前始终转换为 CMYK。 RGB 和 HEX 颜色是为发光屏幕设计的。在屏幕上看起来明亮和饱和的颜色 —— 特别是蓝色和绿色 —— 在打印时往往会偏移。早期转换为 CMYK 可帮助您看到颜色在墨水中的实际效果。
- 使用色调作为背景，使用阴影作为文本。 浅色调是出色的微妙背景，不会与内容竞争。较暗的阴影适合正文文本和边框，因为它们在白色或浅色背景上提供了足够的对比度。
- 复制平台预期的格式。 CSS 直接接受 HEX、RGB 和 HSL。JavaScript 画布使用 RGB。印刷店需要 CMYK。Figma 和 Sketch 等设计软件接受 HEX。复制正确的格式以避免转换错误。
- 在真实设备上测试颜色。 屏幕校准在显示器、手机和平板之间有所不同。在您的笔记本电脑上看起来完美的颜色可能在移动设备上看起来不同。在最终确定设计之前，始终在多个屏幕上预览。
- 选择调色板时考虑色盲。 大约 8% 的男性和 0.5% 的女性有某种形式的色觉缺陷。使用转换器检查您的颜色选择是否具有足够的亮度差异，而不仅仅是色相差异，以保持可区分性。
- 保存您的基础颜色。 一旦找到完美的颜色，请将其 HEX 代码保存在您的设计系统或样式指南中。拥有单一的真相来源可以防止项目增长和更多团队成员参与时出现偏差。
常见问题
颜色选择器是否免费使用？
是的。颜色选择器和转换器完全免费，没有使用限制、无需注册、没有广告。您可以根据需要尽可能多地选择、转换和复制颜色。
我可以将任何颜色格式转换为任何其他格式吗？
是的。该工具支持 HEX、RGB、HSL 和 CMYK 之间的完全双向转换。在任何格式中输入一个值，其他三个会实时自动更新。
什么是色调和阴影？
色调是通过向基础颜色添加白色使其变浅而创建的。阴影是通过添加黑色使其变暗而创建的。该工具从您选择的颜色生成一系列色调和阴影，为您提供完整的单色调色板用于设计工作。
为什么 RGB 颜色打印时看起来不同？
RGB 是一种为发光屏幕设计的加法颜色模型。CMYK 是一种为吸收光的打印机设计的减法模型。某些 RGB 颜色 —— 特别是明亮的蓝色、绿色和紫色 —— 超出了 CMYK 墨水可再现的范围。转换为 CMYK 可向您展示最接近的可打印匹配。
这个工具在移动设备上能用吗？
是的。颜色选择器完全响应式，适用于智能手机和平板电脑。在移动设备上，原生颜色选择器的打开方式与桌面相同，复制按钮已针对触摸屏进行优化。
网页开发中应该使用哪种颜色格式？
HEX 是最常用的选择，因为它紧凑且在 CSS 中得到普遍支持。当需要使用 RGBA 调整透明度时，RGB 很有用。HSL 越来越受欢迎，因为它在创建变体和动画时更直观。这三种格式在现代浏览器中都适用。
HSL 和 HSV 有什么区别？
HSL 和 HSV（也称为 HSB）都使用色相和饱和度来描述颜色，但它们对第三个组件的定义不同。HSL 使用亮度，其中 0% 是黑色，50% 是纯色，100% 是白色。HSV 使用值，其中 0% 是黑色，100% 是颜色的最亮版本。HSL 在网页设计中通常更受青睐，因为亮度刻度在构建可访问调色板时更直观。