在线颜色选择器,支持HEX/RGB/HSL格式互转、配色方案生成、亮度对比度检查,所有操作在浏览器本地完成。
When to use
设计师或开发者需要快速选择颜色并转换格式,同时生成配色方案和检查对比度,但缺乏便捷的在线工具。
How to use
- 1打开工具,点击预览区域的色块或颜色选择器按钮。
- 2在颜色选择器中选择任意颜色,或直接在HEX、RGB、HSL输入框中输入颜色值。
- 3输入或选择颜色后,其他格式的输入框会自动更新,显示对应的转换结果。
- 4点击任意格式输入框旁的“复制”按钮,复制该格式的颜色值。
- 5查看下方自动生成的互补色、类似色、三元色和单色系配色方案,点击色块可快速选择该颜色。
- 6查看亮度、白色对比度和黑色对比度信息,用于评估颜色可访问性。
Input & output
输入:用户通过颜色选择器或手动输入HEX、RGB、HSL值。输出:其他格式的转换值、亮度、对比度、配色方案(互补色、类似色、三元色、单色系)。
Who it's for
适合网页设计师、UI/UX开发者、平面设计师以及任何需要快速选择颜色并生成配色方案的用户。
FAQ
- 如何将HEX颜色转换为RGB?
- 在HEX输入框中输入颜色值(如#3b82f6),RGB输入框会自动显示对应的RGB值(如59, 130, 246)。
- 可以复制颜色值吗?
- 可以,每个格式输入框旁边都有“复制”按钮,点击即可复制该格式的颜色值到剪贴板。
- 配色方案是如何生成的?
- 工具根据当前颜色自动生成互补色、类似色、三元色和单色系配色方案,并显示在下方色板中。
- 对比度数值代表什么?
- 对比度数值表示当前颜色与白色或黑色的对比度比例,用于评估文本可读性,数值越高对比度越强。