颜色选择器

什么是颜色选择器？

颜色选择器（Color Picker）是一款在线工具，可以让您直观地选择网页设计、图形设计、UI/UX开发所需的颜色，并将其转换为多种格式（HEX、RGB、HSL）。通过色相环和饱和度/明度选择器，您可以直观地找到所需的颜色，而且支持透明度（Alpha）调整，因此也可以生成RGBA、HSLA格式的颜色代码。

该工具直接在浏览器中运行，无需安装任何程序。支持EyeDropper API的浏览器（Chrome、Edge）还可以使用吸管功能，直接从屏幕任何区域提取颜色，快速获取设计参考或图片中的颜色。

适用场景

• 网页开发 – 快速查找并复制用于CSS样式表的准确颜色代码（HEX、RGB、HSL）
• UI/UX设计 – 为应用或网站的按钮、背景、文字构建和谐的配色方案
• 平面设计 – 为海报、横幅、社交媒体图片选择和搭配颜色
• 品牌形象 – 定义公司或项目的品牌颜色，并以多种格式记录
• 无障碍测试 – 检查颜色值以验证文字和背景色之间的对比度
• 参考色提取 – 使用EyeDropper直接从喜欢的网站或图片中提取颜色
• 演示文稿制作 – 查找颜色代码，为演示材料应用一致的颜色主题

主要功能

• 色相环选择 – 在360度色相环上直观地选择所需的色相（Hue）。通过鼠标拖动或触摸平滑浏览颜色。
• 饱和度/明度2D选择器 – 基于所选色相同时调整饱和度（Saturation）和明度（Lightness）。可自由选择从明亮粉彩色调到深暗颜色。
• 透明度（Alpha）滑块 – 从0%到100%调整透明度，创建RGBA、HSLA格式的半透明颜色。适用于叠加层和渐变效果。
• 多种颜色格式支持 – 实时转换并显示HEX、RGB、HSL三种格式。应用透明度时自动切换为RGBA、HSLA格式。
• EyeDropper屏幕取色 – 在Chrome、Edge浏览器中点击屏幕任何位置直接提取颜色。还可以从其他标签页的图片或桌面获取颜色。
• 和谐色自动生成 – 基于所选颜色自动生成互补色、相似色、三色配色、单色调色板。轻松找到基于色彩理论的和谐配色组合。
• CSS代码一键复制 – 将所选颜色以color: #D4AF37;格式的CSS代码立即复制。可选择HEX、RGB、HSL中的任意格式。
• 颜色历史保存 – 最近选择的20种颜色会自动保存。关闭浏览器后历史记录仍然保留，可以重新使用之前用过的颜色。

使用方法

1. 选择色相 – 在色相环上点击或拖动选择所需的基本颜色区域（红、橙、黄、绿、蓝、紫等）。
2. 调整饱和度/明度 – 在下方的正方形区域中，左右移动调整饱和度，上下移动调整明度。右上角是最鲜艳明亮的颜色。
3. 设置透明度 – 如需半透明效果，请调整Alpha滑块。100%为不透明，0%为完全透明。
4. 查看并复制颜色值 – 在右侧面板查看HEX、RGB、HSL值，点击各格式旁的复制按钮将其复制到剪贴板。
5. 使用CSS代码 – 在底部的CSS代码区域选择所需格式（HEX/RGB/HSL），使用”复制CSS”按钮复制可直接粘贴到样式表的代码。

色彩理论与和谐色的理解

色相环的原理

色相环源于1666年艾萨克·牛顿用棱镜分解光线的实验。现代色相环分为以红-黄-蓝为基础的传统色相环（RYB）和使用红-绿-蓝的数字色相环（RGB）。本工具基于HSL（Hue-Saturation-Lightness）颜色模型，色相（Hue）用0°至360°的角度表示。

HSL vs RGB vs HEX

• HEX（十六进制） – 网络上最广泛使用的格式。以#RRGGBB形式表示，红、绿、蓝各用00~FF（0~255）表示。例如：#D4AF37是金色。
• RGB（Red, Green, Blue） – 基于光的三原色，各通道用0~255的值表示。在CSS中使用rgb(212, 175, 55)格式。
• HSL（Hue, Saturation, Lightness） – 更接近人类颜色感知方式的模型。由色相（0°~360°）、饱和度（0%~100%）、明度（0%~100%）组成。在同一色相下更容易调整亮度或鲜艳度。

和谐色的类型

• 互补色（Complementary） – 色相环上正对面的两种颜色。产生强烈对比，适合吸引眼球。例如：蓝色（240°）的互补色是黄色（60°）。
• 相似色（Analogous） – 色相环上相邻的颜色。自然界中常见，给人和谐舒适的感觉。例如：橙-黄-黄绿。
• 三色配色（Triadic） – 色相环三等分位置的颜色。提供平衡的对比度，比互补色更柔和。例如：红-黄-蓝。
• 单色调（Monochromatic） – 同一色相中仅改变饱和度和明度的颜色。给人简洁精致的印象，常用于品牌设计。

透明度（Alpha）的应用

Alpha通道调整颜色的不透明度。0%为完全透明，100%为完全不透明。在网页设计中，半透明颜色常用于叠加效果、渐变、悬停状态等。RGBA和HSLA格式从CSS3开始支持，包含透明度的HEX代码（#RRGGBBAA）在现代浏览器中得到支持。

关于EyeDropper API

EyeDropper API是一种Web API，允许在浏览器中直接提取屏幕上的颜色。此功能目前支持Chrome 95+、Edge 95+版本。Firefox和Safari尚不支持。

使用EyeDropper不仅可以从当前标签页提取颜色，还可以从其他标签页、其他应用程序甚至桌面提取颜色。非常适合快速从设计参考图、竞品网站、灵感图片中获取准确的颜色值。

使用技巧

• 记录品牌颜色 – 选择公司或项目的主要颜色后，记录所有HEX、RGB、HSL值，以便在各种环境（网页、印刷、视频）中使用一致的颜色。
• 考虑无障碍性 – 选择文字和背景颜色时，确保明度差异足够。根据WCAG标准，普通文字建议对比度4.5:1以上，大字体建议3:1以上。
• 构建配色方案 – 选择一个主色后，利用和谐色功能可以轻松创建专业的配色方案。通常由1个主色、1-2个辅助色、1个强调色组成。
• 使用半透明效果 – 在背景图片上放置文字时，使用半透明叠加层（如：rgba(0, 0, 0, 0.5)）可以提高可读性。

常见问题