Skip to main content
FreeToolkit .ai

HSL 到 RGB 转换器 使用交互式滑块和实时预览将 HSL 值转换为 RGB。

HSL 到 RGB 转换器 illustration
🎨

HSL 到 RGB 转换器

使用交互式滑块和实时预览将 HSL 值转换为 RGB。

1

设置HSL值

调整色相（0-360°）、饱和度（0-100%）和亮度（0-100%）滑块。

2

查看RGB输出

实时看到红、绿、蓝值的更新。

3

复制RGB值

复制rgb() CSS函数以便在项目中使用。

Loading tool...

What Is HSL 到 RGB 转换器?

HSL 到 RGB 转换器将色相、饱和度和亮度颜色值转换为红、绿和蓝通道值。当您使用直观的 HSL 模型设计了颜色，但需要在仅接受 RGB 的系统中实现它们时，这种转换是必不可少的，例如某些图形 API、LED 控制系统或较旧的软件。HSL 模型让您可以从概念上思考颜色 -- 什么色相、多么鲜艳、多么明亮 -- 而 RGB 是数字显示器的本地语言。转换器弥合了这一差距，将您的用户友好颜色选择转换为精确的通道值，以便进行数字复制。每个输出通道的范围从 0 到 255，为您提供了 CSS rgb() 函数、Canvas API 操作或任何基于 RGB 的颜色系统所需的确切值。

Why Use HSL 到 RGB 转换器?

  • 直观的HSL滑块，方便自然地探索颜色
  • 精确的RGB通道值，以大字体显示，便于阅读
  • 实时预览图标显示准确的颜色输出
  • CSS-ready rgb()字符串，可立即使用
  • 快速、免费，无需注册或安装

Common Use Cases

图形编程

将HSL定义的颜色转换为RGB，以便在WebGL、Canvas或游戏引擎中使用颜色参数。

LED与硬件

获取RGB值以控制RGB LED条、智能灯或需要R、G、B输入的IoT设备。

颜色系统集成

将基于HSL的设计令牌与仅支持RGB的框架或遗留系统连接起来。

教育

了解如何将感知到的HSL属性映射到加法RGB颜色模型。

Technical Guide

HSL 到 RGB 转换算法计算色度 C = (1 - |2L - 1|) × S，其中 S 和 L 被归一化为 0-1。中间值 X = C × (1 - |(H/60) mod 2 - 1|) 确定第二大颜色分量。根据色相扇区（0-60°、60-120° 等），使用 C、X 和 0 分配临时 RGB 值。最后，亮度偏移 m = L - C/2 被添加到所有通道中，并将结果从 0-1 缩放为 0-255。六个色相扇区创建了平滑的过渡：0-60° 混合红色和黄色，60-120° 混合黄色和绿色，依此类推。在 S=0 时，所有 RGB 通道都等于 L×255（灰色）。在 L=0 时，所有通道都是 0（黑色）。在 L=1 时，所有通道都是 255（白色）。算法是数学上精确和确定的 --相同的 HSL 输入始终产生相同的 RGB 输出。

Tips & Best Practices

  • 1
    HSL（0, 100%, 50%）产生RGB（255, 0, 0），即纯红色
  • 2
    任何HSL的亮度为0%都会给出RGB（0, 0, 0），无论其色相和饱和度如何
  • 3
    HSL的饱和度为0%会产生相等的R、G、B值（灰色阴影）
  • 4
    色相值可以循环：361°与1°相同
  • 5
    此转换由浏览器内部使用以渲染hsl() CSS颜色

Related Tools

RGB 到 HEX 转换器 - free online tool

RGB 到 HEX 转换器

使用滑块和实时预览将 RGB 颜色值转换为 HEX 编码。

🎨 Color Tools
HSL 到 HEX 转换器 - free online tool

HSL 到 HEX 转换器

使用交互式滑块将 HSL 颜色值转换为 HEX 编码。

🎨 Color Tools
RGB 到 HSL 转换器 - free online tool

RGB 到 HSL 转换器

使用交互式滑块将 RGB 值转换为 HSL 颜色格式。

🎨 Color Tools
颜色拾取器 - free online tool

颜色拾取器

交互式颜色拾取工具，支持HEX、RGB、HSL和CMYK输出。

🎨 Color Tools
颜色渐变生成器 - free online tool

颜色渐变生成器

生成任意颜色的更浅渐变，步长可调节。

🎨 Color Tools

Frequently Asked Questions

Q HSL到RGB的转换是否精确？
是，转换在数学上是准确的。将0-1范围转换为0-255整数时可能会发生一些小的四舍五入，但颜色差异是不可察觉的。
Q hsl（120, 100%, 50%）产生什么RGB值？
它产生rgb（0, 255, 0），即纯绿色。色相120°为绿色，饱和度100%为完全鲜艳，亮度50%是没有变暗或变亮的纯色。
Q 如果屏幕使用RGB，为什么还需要HSL？
HSL是为人类设计的，而不是机器。虽然屏幕混合R、G、B光，但人们思考颜色的方式是根据它是什么颜色、有多鲜艳和有多亮。HSL映射到这种直觉上。
Q 我可以在不损失的情况下从RGB转换回HSL吗？
是，转换是完全可逆的。RGB → HSL → RGB将返回原始值，最多±1差异由于整数四舍五入。

About This Tool

HSL 到 RGB 转换器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.