- 使用颜色选择器或点击预设颜色来选择基础颜色。
- 在颜色数值面板中查看不同格式(HEX、RGB、HSL、HSV)的颜色值。
- 使用滑块调整各个颜色分量进行微调。
- 点击任意格式旁边的复制图标,将颜色代码复制到剪贴板。
- 探索配色方案区域,生成和谐的配色组合。
RGB 和 HEX 有什么区别?
RGB 使用十进制值(0-255)表示红、绿、蓝三个通道,而 HEX 使用十六进制表示法(#RRGGBB)。它们表示相同的颜色,只是格式不同。HEX 常用于 CSS,而 RGB 常用于设计软件。
什么是 HSL,什么时候应该使用它?
HSL 代表色相(Hue)、饱和度(Saturation)和亮度(Lightness)。它对人类来说更直观,更容易理解和调整颜色。当您想要在保持相同色相的情况下通过调整亮度或饱和度来创建颜色变化时,使用 HSL 会更方便。
配色方案类型是如何工作的?
单色系使用同一色相的不同亮度级别。互补色使用色轮上相对的颜色。三角色使用色轮上等距的三种颜色。邻近色使用相邻的颜色,形成和谐的配色方案。
我的数据安全吗?
是的,所有颜色转换完全在您的浏览器中进行。没有任何数据发送到服务器,确保完全的隐私保护。
颜色选择器详解【2026】- 一文搞懂色彩模型与Web颜色应用
全面掌握数字色彩空间模型底层原理与现代 Web 前端响应式颜色应用技巧。深入了解并对比分析 RGB、HSL、HSV、HEX 等不同颜色格式的结构差异、优缺点与相互计算转换方法。学习现代 CSS 变量颜色(CSS Variables/Custom Properties)的最佳实践体系,帮助 UI 设计师和前端开发工程师高效构建、选择和管理全套项目调色板系统。
颜色空间转换详解【2026】- RGB、HSL、HEX完全指南
深入硬核讲解现代前端 Web 开发与 UI/UX 视觉设计中 RGB、HSL、HSV、HEX、CMYK 等主流色彩空间(Color Space)的数学理论模型、相互双向转换公式及其底层 JavaScript 代码实现逻辑。全面掌握现代 Web 开发中的高级颜色格式使用技巧(如 OKLCH 等)、CSS 变量定义规范以及 WCAG 无障碍网页对比度(Contrast Ratio)检测最佳实践。
HSL颜色
HSL颜色(色相、饱和度、亮度)是一种圆柱形颜色模型,以比 RGB 更直观的方式表示颜色,便于人类理解和操作。它将颜色分为三个组成部分:色相(颜色本身)、饱和度(颜色强度)和亮度(明暗程度)。
十六进制颜色
十六进制颜色是网页设计中最常用的颜色表示法,格式为 #RRGGBB,由三对十六进制值(00-FF)分别表示红、绿、蓝通道强度。它支持 1670 万种颜色,可简写为 #RGB 形式,现代 CSS 还支持 #RRGGBBAA 格式表示透明度。
RGB颜色
RGB颜色是一种加色模型,通过将红、绿、蓝光以不同强度组合来创建广泛的颜色光谱。每个颜色通道通常范围从 0 到 255,允许超过 1600 万种可能的颜色组合。
RGBA颜色
RGBA颜色是 RGB 模型的扩展,增加了 alpha 通道控制透明度。格式为 rgba(R, G, B, A),其中 RGB 值范围 0-255,alpha 值 0-1 表示从完全透明到完全不透明。广泛用于创建遮罩层、阴影、毛玻璃效果等半透明设计元素。