$ tools/color-wheel

色轮

选择颜色和和谐方式 — 互补、类似、三色等 — 生成匹配的调色板。Hex、RGB、HSL 和 CMYK,点击复制。

# 选择一种颜色

亮度50%
RGB
HSL
HSB
CMYK

$ 和谐

$ 调色板

$ 如何使用色轮

在色轮上任意位置点击设置你的基本颜色 — 角度选择色调,距离中心的距离设置饱和度。使用下方的亮度滑块使其变亮或变暗,或直接输入 HEX 代码。然后在右侧选择和谐规则,调色板会立即更新。点击任何色块复制其 HEX,或一次性获取整个集合。

和谐意味着什么

互补使用色轮上正对的颜色,带来高对比度和能量。类似使用相邻色,营造平静一致的感觉。三色将三种颜色均匀分布,形成平衡而生动的组合。分裂互补软化互补对。正方和四色提供更广范围的四色方案。单色和色调和阴影停留在一种色调,仅改变亮度 — 非常适合干净简约的 UI。

为什么这对你的应用很重要

连贯的调色板让你的 App Store 截图、图标和 Feature Graphic 感觉像一个产品,而不是一堆随机颜色。选择你的品牌颜色,生成一个和谐,并在你的截图标题、背景和商店资产中重用那些确切的 HEX 代码。

$ FAQ

这是免费的吗?

是的 — 完全免费,无需注册,无限制。完全在你的浏览器中运行。

HSL 和 HSB 有什么区别?

两者都描述色调和饱和度,但第三个值不同:HSL 使用亮度(0% 黑色,100% 白色),而 HSB 使用明度。设计师通常更喜欢 HSL 用于网络;HSB 出现在 Photoshop 等工具中。这个色轮两者都给你。

我可以从自己的品牌色开始吗?

可以。在框中输入你的 HEX 代码,色轮和调色板会更新匹配。然后选择一个和谐来围绕它构建。

如何在我的设计中使用调色板?

点击任何色块复制其 HEX,或使用"复制所有 HEX"/"复制为 CSS 变量"获取整个集合。直接粘贴到你的设计工具或样式表中。

更多颜色工具

喜欢 LaunchShots 吗?
永久免费 — 如果帮你省了时间,可以请我喝杯咖啡。
支持 →
已复制 ✓