在线颜色选择器 - 免费取色/调色/多格式颜色代码工具

🌟 在线颜色选择器能做什么#

挑一个颜色，然后拿到它的各种格式代码——这是前端、设计、运营都高频的操作。星点颜色选择器提供直观的色相条 + 饱和度/明度面板，拖动即可取色，并同步显示 HEX、RGB、HSL 等格式。

🚀 怎么用（详细步骤）#

打开颜色选择器；
在色相条上选大方向，在面板里调饱和度与明度；
也可直接输入 HEX / RGB / HSL 精确定位；
查看各格式数值，一键复制；
需要多个颜色时，可保存多点取色。

🎨 常见颜色格式#

格式	示例	用途
HEX	`#409eff`	CSS、设计稿最常见
RGB	`rgb(64, 158, 255)`	屏幕显示
RGBA	`rgba(64, 158, 255, 0.5)`	带透明度
HSL	`hsl(210, 100%, 63%)`	按色相/饱和度/亮度调色
HSV/HSB	`hsv(210, 75%, 100%)`	取色面板常用
CMYK	印刷	印刷参考

🧠 三个维度怎么理解#

H（色相）：0°~360°，决定”是什么颜色”（红橙黄绿青蓝紫）；
S（饱和度）：0%~100%，决定”鲜艳程度”（0 是灰）；
L / V（亮度/明度）：0%~100%，决定”明暗”。

理解这三个维度，调色就从”瞎试”变成”有方向地调”。

💡 调色小技巧#

想变亮：提高 HSL 的 L（亮度）或 HSV 的 V；
想更鲜艳：提高 S（饱和度）；
想换色调但保持观感：只改 HSL 的 H（色相），S、L 不变；
需要半透明：用 RGBA，把 alpha 调到 0.1~0.9；
想要高级灰：降低饱和度、提高亮度。

需要精确调整某个维度，可以用颜色调整工具配合滑块操作。

🎨 常见配色关系（顺带懂一点色彩理论）#

关系	说明
互补色	色相环相对（180°），对比强
类似色	相邻（±30°），柔和
三角色	120° 均分，活泼

想直接生成整套配色，用配色方案生成器。详见互补色是什么。

❓ 常见问题（FAQ）#

取到的颜色能直接用于 CSS 吗？

可以。复制 HEX 或 RGB 值，直接写进 CSS 即可。

能取屏幕/图片上的颜色吗？

图片取色用[图片颜色工具](https://www.xingdian.net/app/color/image-color/)：上传图片点击取色。浏览器无法直接读取屏幕任意区域，屏幕取色需系统级工具。

支持多个颜色对比吗？

支持多点取色保存；配色关系可看[配色方案生成器](https://www.xingdian.net/app/color/schemes/)。

HEX 和 RGB 有什么区别？

同一颜色的两种写法，HEX 更短，RGB 便于数值运算。见 [HEX 转 RGB](https://www.xingdian.net/blog/posts/hex-to-rgb/)。

HSL 和 HSV 有什么区别？

HSL 的 L 是亮度（黑到白），HSV 的 V 是明度（黑到亮色），取色面板常用 HSV。

怎么保证取到的颜色可读？

文字用色记得过[对比度检测](https://www.xingdian.net/app/color/contrast/)，普通文本 ≥ 4.5:1。

需要注册吗？

不需要，免费打开即用。

能生成代码吗？

用[颜色格式转换](https://www.xingdian.net/app/color/convert/)可拿到 CSS/SCSS/Tailwind/变量代码。

🎨 色彩理论基础（看懂色相环）#

色相环把颜色按 H（色相）排成一个圆：红(0°)、黄(60°)、绿(120°)、青(180°)、蓝(240°)、品红(300°)。围绕它，有几种经典配色关系：

关系	色相位置	效果
单色	同一色相，变 S/L	统一、简洁
类似色	相邻 ±30°	柔和、协调
互补色	相对 180°	强烈、醒目
三角色	120° 均分	活泼、均衡
分裂互补	互补两侧	对比强但不刺眼

理解这些，取色时就能”有依据地选”，而不是随机试。

🖌 调色实战#

做一套按钮色#

选主色（如 #409eff）；
悬停态：提高 L（更亮）；
按下态：降低 L（更暗）；
禁用态：降低 S、提高 L（变灰）；
用对比度检测确保按钮文字达标。

做一套背景色#

浅色主题：主色大幅提高 L，得到浅背景；
深色主题：主色降低 L、略降 S，避免刺眼。

做文字色#

文字色优先保证可读性：深色字 + 浅背景，或浅色字 + 深背景，对比度 ≥ 4.5:1。

🧰 颜色格式全览#

格式	示例	说明
HEX	`#409eff`	最常用
RGB	`rgb(64,158,255)`	三通道
RGBA	`rgba(64,158,255,.5)`	带透明度
HSL	`hsl(210,100%,63%)`	调色直观
HSV	`hsv(210,75%,100%)`	取色面板
CMYK	印刷	减色模式
LAB/OKLCH	感知均匀	专业计算

需要转换，用颜色格式转换。

🧾 常用颜色速查#

颜色	HEX	RGB
黑	`#000000`	rgb(0,0,0)
白	`#ffffff`	rgb(255,255,255)
红	`#ff0000`	rgb(255,0,0)
绿	`#00ff00`	rgb(0,255,0)
蓝	`#0000ff`	rgb(0,0,255)
灰	`#808080`	rgb(128,128,128)
浅灰	`#f5f5f5`	rgb(245,245,245)
深灰	`#333333`	rgb(51,51,51)
品牌蓝	`#409eff`	rgb(64,158,255)

💡 从取色到落地的完整流程#

颜色选择器：挑主色；
颜色格式转换：拿到 HEX/RGB/CSS/Tailwind 代码；
配色方案生成器：扩展成完整配色；
对比度检测：验证文字可读性；
设计辅助：导出 CSS 变量 / Design Token。

这样”选一个颜色”就能变成”一套可用的设计系统”。

🔧 取色常见问题#

颜色看起来一样，代码不同：可能是透明度或色彩空间差异；
复制到 CSS 不生效：检查是否漏了 # 或格式写错；
和设计稿对不上：确认设计稿色彩配置（sRGB/P3）与透明度；
需要品牌色：用颜色识别匹配或直接输入已知色值。

🧭 更多常见问题#

颜色选择器和图片取色有什么区别？

颜色选择器是"无图选色"；图片取色是从上传的图片里取色。

能直接输入色值吗？

可以，输入 HEX/RGB/HSL 精确定位。

取到的颜色如何保证可读？

文字用色过[对比度检测](https://www.xingdian.net/app/color/contrast/)，普通文本 ≥ 4.5:1。

支持透明度吗？

支持，用 RGBA 或 8 位 HEX。

能保存多个颜色吗？

支持多点取色保存，便于对比与组成调色板。

有历史记录吗？

工具不保存用户数据；重要颜色请自行记录。

🧾 一句话记住调色#

调亮调暗改 L，鲜艳变灰改 S，换色只改 H。

📎 取色的三种方式#

面板取色：拖色相条与面板，适合”找灵感”；
输入色值：精确输入 HEX/RGB/HSL，适合”有目标色”；
图片取色：从图片取，适合”还原配色”（用图片颜色工具）。

💬 总结#

在线颜色选择器解决的是”挑颜色 + 拿代码”这一件事。挑好后，用颜色格式转换可以拿到 CSS/SCSS/Tailwind 等完整代码。

立即体验：访问颜色选择器