本地安全处理免费工具
在线颜色拾取器
简单高效的纯前端颜色选取工具，支持多种色彩模式实时换算与色卡选择，开箱即用无广告。
点击此处直接拾取颜色
常用设计预设色彩
WCAG 2.1 文本对比度与可读性
AAA 极致可读搭配纯黑文字 (#000000)
7.58 : 1通过 AA
搭配纯白文字 (#FFFFFF)
2.77 : 1未通过
可读性预览：推荐搭配深色/黑色文字
示例按钮智能配色推荐 (点击切换)
基于色彩空间自动计算互补色 (Complementary)
类似色 (Analogous)
三角色 (Triadic)
常用设计色彩参数对照速查表（HEX / RGB / HSL）
| 色彩名称 | HEX | RGB | HSL |
|---|---|---|---|
| 极简白 (White) | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 科技蓝 (Primary) | #0ea5e9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) |
| 祖母绿 (Emerald) | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| 珊瑚橙 (Orange) | #f97316 | rgb(249, 115, 22) | hsl(25, 95%, 53%) |
| 玫瑰红 (Rose) | #f43f5e | rgb(244, 63, 94) | hsl(350, 89%, 60%) |
| 深邃暗灰 (Slate) | #0f172a | rgb(15, 23, 42) | hsl(222, 47%, 11%) |
下表均为本工具算法实时精准换算得出，复制即可直接写入 CSS 样式。
使用指南
- 1点击调色区或输入框选择你想要的颜色。
- 2在 HEX、RGB 或 HSL 栏位微调色彩参数，支持实时双向同步。
- 3点击对应数值旁的“复制”按钮，将色值用于你的设计或代码中。
原理解析与标准规范
色彩模式基础：HEX 是由十六进制代码表示的色彩（如 #0ea5e9），常用于网页 CSS 样式；RGB 代表红绿蓝三原色的强度值（0-255）；HSL 则通过色相（Hue）、饱和度（Saturation）和亮度（Lightness）来更直观地调整人眼感知的色彩。
常见问题解答 (FAQ)
什么是 HEX、RGB 和 HSL 色彩模式？
HEX 是 16 进制颜色编码，主要用于 CSS；RGB 是屏幕显示的红绿蓝物理光数值；HSL 则更贴合人眼认知，方便调整明暗与饱和度。
这个工具会把我的颜色数据上传到服务器吗？
绝对不会。OUCloud 坚持 Tool First 和客户端运行原则，所有颜色计算完全在您的浏览器本地进行。
推荐相关工具
随时在 Google 或百度搜索「OUCloud 颜色拾取器」，快速找回本工具