RGB/HSL转换

工具介绍

本“RGB/HSL 转换”在线工具旨在提供一个便捷高效的平台，用于实现颜色代码的相互转换。它可以将您输入的 RGB 颜色代码转换为对应的 HSL 格式，反之亦然。无论您是设计师、前端开发者，还是有颜色需求的普通用户，都可以通过此工具轻松理解和操作不同颜色模型之间的转换，提高工作效率。

RGB（Red, Green, Blue）是一种加色模型，常用于显示设备，通过叠加不同强度的红、绿、蓝三原色光来产生各种颜色。HSL（Hue, Saturation, Lightness）则是一种更符合人类视觉感知和直观操作的颜色模型，它通过色相、饱和度和亮度来描述颜色，在颜色调整和设计方面具有独特的优势。

使用方法

1. RGB 转 HSL： 在“RGB 代码”输入框中输入您想要转换的 RGB 颜色代码（例如：rgb(124, 96, 100)），工具将自动在“HSL 代码”输入框中显示转换后的 HSL 格式结果。
2. HSL 转 RGB： 在“HSL 代码”输入框中输入您想要转换的 HSL 颜色代码（例如：hsl(351, 13%, 43%)），工具将自动在“RGB 代码”输入框中显示转换后的 RGB 格式结果。
3. 复制结果： 每个输入框都带有复制功能，点击即可快速获取转换后的颜色代码。
4. 输入格式要求：
   • RGB 代码：请使用 rgb(R, G, B) 格式，其中 R、G、B 为 0 到 255 的整数值。例如：rgb(255, 0, 0)。
   • HSL 代码：请使用 hsl(H, S%, L%) 格式，其中 H 为 0 到 360 的整数（代表色相角度），S% 和 L% 为 0 到 100 的百分比（代表饱和度和亮度）。例如：hsl(0, 100%, 50%)。
5. 输出结果：
   • RGB 输出格式为：rgb(R, G, B)。
   • HSL 输出格式为：hsl(H, S%, L%)。

使用示例

以下是使用此 RGB/HSL 转换工具的两个具体示例：

• 示例一：RGB 颜色代码转换为 HSL
  • 输入数据（RGB 代码）： rgb(124, 96, 100)
  • 操作演示： 将 rgb(124, 96, 100) 粘贴或输入到“RGB 代码”输入框中。
  • 预期输出结果（HSL 代码）： hsl(351, 13%, 43%)
  •  
• 示例二：HSL 颜色代码转换为 RGB
  • 输入数据（HSL 代码）： hsl(351, 13%, 43%)
  • 操作演示： 将 hsl(351, 13%, 43%) 粘贴或输入到“HSL 代码”输入框中。
  • 预期输出结果（RGB 代码）： rgb(124, 96, 100)
  •  

常见问题

• 问：RGB 和 HSL 颜色模型之间有什么区别？
• 答：RGB 是一种通过叠加红、绿、蓝三原色光来生成颜色的模型（加色混合），常用于显示器。HSL 是一种基于色相、饱和度和亮度来描述颜色的模型，更符合人类对颜色的感知，常用于设计和颜色调整，让用户可以直观地调整颜色属性。
• 问：是否支持十六进制颜色代码（例如：#FF0000）转换？
• 答：目前，本工具主要支持 rgb(R, G, B) 和 hsl(H, S%, L%) 的明确格式输入。如果您需要转换十六进制代码，请先手动将其转换为 rgb() 格式再进行。
• 问：转换结果的精度如何？
• 答：本工具在 RGB 和 HSL 之间的数学转换过程中力求保持精度。HSL 的饱和度和亮度通常以百分比表示，色相为角度；在某些情况下，可能会有小数位的四舍五入。

重要提示

• 输入格式： 请确保您输入的颜色代码符合 rgb(R, G, B) 和 hsl(H, S%, L%) 的标准格式。不正确的格式（例如缺少括号、逗号或使用非数字字符）可能导致转换失败。
• 数值范围： 确保 RGB 值 R、G、B 在 0-255 之间；HSL 值 H 在 0-360 之间，S% 和 L% 在 0-100 之间。超出这些范围的值可能导致颜色失真或转换错误。
• 双向转换： 本工具支持实时双向转换。当您在任一输入框中输入内容时，另一个输入框的结果将自动更新。