什么是颜色选择器?

颜色选择器是一款可视化工具,可帮助您为设计项目选择和探索颜色。无论您是网页开发者、平面设计师还是内容创作者,此工具都能以多种格式即时提供颜色值。

支持多种格式

同时获取 HEX、RGB、HSL、HSV 和 CMYK 格式的即时颜色值 - 无需使用多个转换器。

可视化选择

使用颜色方块、滑块或吸管工具直观地挑选颜色,从屏幕上捕获任何颜色。

支持的颜色格式

HEX

标准网页颜色格式

#RRGGBB 格式
CSS 中最常用
紧凑表示法

RGB / RGBA

红、绿、蓝数值

每个通道 0-255 范围
Alpha 表示透明度
易读格式

HSL

色相、饱和度、亮度

直观的颜色模型
CSS 友好格式
易于调整颜色

HSV

色相、饱和度、明度

基于亮度的模型
设计工具中使用
自然感知

CMYK

青、品红、黄、黑

印刷设计标准
精确还原
专业印刷

主要优势

可视化选择 - 使用颜色方块和滑块直观地挑选颜色
即时转换 - 所有格式在您选择时实时更新
一键复制 - 即时将任何格式复制到剪贴板
吸管工具 - 从屏幕任意位置拾取颜色
历史记录和收藏夹 - 保存并重新访问您使用过的颜色

隐私优先: 所有颜色处理都在您的浏览器本地进行。无上传、无跟踪、无数据收集。

如何使用颜色选择器

使用颜色方块选择

在颜色方块内点击或拖动以调整饱和度(左右)和亮度(上下)。颜色方块可精确控制颜色的强度和明暗。

调整色相滑块

拖动色相滑块以在 0° 到 360° 的完整光谱中更改基础颜色。这将在红、橙、黄、绿、青、蓝、品红之间移动,然后回到红色。

控制不透明度

使用不透明度滑块将透明度从 0%(完全透明)调整到 100%(完全不透明)。棋盘格预览显示您的颜色在透明状态下的外观。

复制颜色值

点击任意格式旁的复制按钮以复制该特定值,或使用全部复制一次复制所有格式。每种格式都可直接粘贴到您的代码或设计工具中。

高级功能

吸管工具

点击吸管图标从屏幕上拾取任何颜色。适用于 Chrome 和 Edge 浏览器。

手动输入

直接在 HEX 输入框中输入。支持 3 位(#FFF)、6 位(#FFFFFF)和 8 位(#FFFFFFAA)格式。

随机生成器

生成具有最佳饱和度和亮度的随机颜色 - 非常适合寻找灵感或快速选择。

保存您的颜色

收藏夹

手动保存

点击心形图标保存
存储常用颜色
快速访问品牌颜色
跨会话持久保存

历史记录

自动保存

自动跟踪拾取的颜色
保存最近 50 种颜色
查看最近的选择
本地存储在设备上

专业提示: 点击收藏夹或历史记录中的任何已保存颜色即可立即再次选择它。您的颜色库会在浏览器会话之间持久保存。

功能特性

可视化颜色选择器

直观的颜色选择器使用 HSV 颜色模型进行自然的颜色选择:

颜色方块

二维颜色控制

饱和度:从左到右
亮度:从下到上
精确颜色选择

色相滑块

全光谱控制

0° 到 360° 范围
所有可见颜色
平滑过渡

不透明度滑块

透明度控制

0% 到 100% 范围
棋盘格预览
Alpha 通道支持

多种颜色格式

以您需要的任何格式获取颜色,即时转换并一键复制:

格式	示例	最适用于	Alpha 支持
HEX	`#FF5733`	网页开发、CSS	是
RGB	`rgb(255, 87, 51)`	CSS、网页设计	是(RGBA)
HSL	`hsl(9, 100%, 60%)`	CSS、颜色调整	是(HSLA)
HSV	`hsv(9, 80%, 100%)`	设计工具、Photoshop	有限
CMYK	`cmyk(0%, 66%, 80%, 0%)`	印刷设计、出版	否

吸管工具

使用浏览器原生吸管 API 从屏幕上拾取任何颜色。这个强大的功能可让您从图像、网站或任何可见内容中捕获颜色。

浏览器兼容性: 吸管工具在 Chrome 和 Edge 浏览器中可用。Firefox 和 Safari 目前不支持此功能。

数据隐私和安全

本地处理 100%

隐私保护 100%

服务器上传 0%

无上传 - 颜色永远不会发送到任何服务器
无跟踪 - 我们不收集您的颜色选择
本地存储 - 收藏夹和历史记录保留在您的设备上
完全隐私 - 您的颜色选择保持私密

常见问题

RGB 和 HEX 有什么区别?

两者都使用红、绿、蓝值表示相同的颜色。HEX 使用十六进制表示法(#FF5733),而 RGB 使用十进制值(rgb(255, 87, 51))。

HEX 更紧凑,通常用于 CSS 和 HTML。RGB 更易读,一目了然更容易理解。两者产生相同的颜色 - 纯粹是表示法偏好的问题。

什么时候应该使用 HSL 而不是 HSV?

HSL(色相、饱和度、亮度)通常用于 CSS 和网页开发。它在浏览器中原生支持,通过调整亮度可以轻松创建颜色变化。

HSV(色相、饱和度、明度)在 Photoshop 和 Figma 等设计工具中更受欢迎,因为它符合我们对颜色亮度的感知。"明度"组件比 HSL 的"亮度"更直观地表示亮度。

快速提示: 网页项目使用 HSL,使用设计软件时使用 HSV。

CMYK 用于什么?

CMYK(青、品红、黄、黑)是印刷设计的标准颜色模型。与使用光在屏幕上创建颜色的 RGB 不同,CMYK 使用油墨颜料进行物理印刷。

如果您要创建用于印刷的材料 - 例如宣传册、名片、海报或杂志 - 请使用 CMYK 值以确保准确的颜色还原。这可以防止颜色在印刷时与屏幕上看起来不同。

重要提示: RGB 颜色可能无法完美转换为 CMYK。在将设计发送到印刷之前,请务必检查 CMYK 值。

为什么吸管按钮没有出现?

吸管 API 仅在 Chrome 和 Edge 浏览器中可用。如果您使用的是 Firefox、Safari 或其他浏览器,此功能将不可用。

这是浏览器限制,而不是工具限制。吸管 API 是一个相对较新的网页标准,尚未被所有浏览器采用。

Chrome(95+ 版本)- 支持
Edge(95+ 版本)- 支持
Firefox - 不支持
Safari - 不支持

如何拾取我在网上找到的特定颜色?

您有两个选择:

使用吸管工具(仅限 Chrome/Edge)- 点击吸管图标并选择屏幕上可见的任何颜色,包括其他网站、图像或应用程序中的颜色。
输入 HEX 代码 - 如果您有颜色的 HEX 代码,请直接在 HEX 输入框中输入。该工具接受 3 位(#FFF)、6 位(#FFFFFF)和 8 位(#FFFFFFAA)格式。

专业提示: 大多数浏览器都有内置的开发者工具,可以显示网页上任何颜色的 HEX 代码。按 F12 并使用元素检查器。

我保存的颜色是否存储在线上?

不是。 您的收藏夹和历史记录存储在浏览器的本地存储中。它们保留在您的设备上,不会上传到任何地方。

这意味着:

您的颜色数据永远不会离开您的计算机
无需帐户或登录
完全隐私 - 我们看不到您保存的颜色
颜色在同一设备上的浏览器会话之间持久保存

注意: 清除浏览器数据将删除已保存的颜色。您的收藏夹和历史记录特定于每个浏览器和设备。

不透明度/alpha 值有什么作用?

不透明度控制颜色的透明程度。100% 是完全不透明(实心),0% 是完全透明(不可见)。介于两者之间的值会创建半透明颜色。

不透明度的常见用途:

叠加层 - 图像上的半透明背景
阴影 - 具有部分透明度的柔和阴影
分层设计 - 堆叠具有透视效果的元素
悬停效果 - 交互时的细微透明度变化
渐变 - 颜色从不透明渐变到透明

alpha 值包含在 RGBA 和 8 位 HEX 格式(#RRGGBBAA)中。

我可以一次复制多种格式吗?

可以! 点击全部复制按钮将所有颜色格式复制到剪贴板。每种格式都将在单独的行上,可以直接粘贴到您的代码或文档中。

复制所有格式时的示例输出:

复制的格式示例

HEX: #FF5733
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 1)
HSL: hsl(9, 100%, 60%)
HSV: hsv(9, 80%, 100%)
CMYK: cmyk(0%, 66%, 80%, 0%)