HSL转RGB颜色转换工具
请输入逗号分隔的HSL值,如: 150,50%,50% (H:0-360, S:0-100%, L:0-100%)
色调 (H) 150
饱和度 (S) 50%
亮度 (L) 50%
转换结果
颜色预览
点击复制按钮将RGB颜色值复制到剪贴板
工具简介
HSL转RGB颜色转换工具是一个简单实用的在线工具,可以帮助您快速将HSL颜色值转换为RGB格式。
无论您是网页设计师、UI/UX设计师还是前端开发者,这个工具都能帮助您更高效地进行颜色转换工作,特别是在CSS样式设计、网页开发时。
主要功能
- 支持两种输入方式:逗号分隔和分别输入
- HSL进度条调节,直观选择颜色
- 实时颜色预览
- 一键复制RGB结果
- 响应式设计,适配各种设备
使用教程
- 在"HSL逗号分隔输入"框中输入逗号分隔的HSL值,如: 150,50%,50%
- 或在"HSL分别输入"框中分别输入H、S、L值(H:0-360, S:0-100%, L:0-100%)
- 或使用HSL进度条直观地调节颜色值
- 点击"转换"按钮或直接按回车键进行转换
- 查看转换结果和颜色预览
- 点击"复制"按钮将RGB颜色值复制到剪贴板
注意事项
- 色调(H)值的范围是0-360,饱和度(S)和亮度(L)的范围是0-100%
- 使用进度条调节时,输入框的值会自动更新
- 任何输入方式的变化都会实时更新其他输入方式
- RGB值以0-255整数形式表示
颜色知识
HSL颜色模式
HSL颜色模式使用三个属性来描述颜色:色调(Hue)、饱和度(Saturation)和亮度(Lightness)。
色调(H)表示颜色的基本属性,如红、黄、绿、蓝等,取值范围是0-360度;饱和度(S)表示颜色的纯度,取值范围是0-100%;亮度(L)表示颜色的明暗程度,取值范围是0-100%。
RGB颜色模式
RGB颜色模式是一种加色模式,通过红(Red)、绿(Green)、蓝(Blue)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
每个颜色通道的取值范围是0-255,其中0表示没有该颜色,255表示该颜色的最大值。RGB模式主要用于屏幕显示。
转换示例
红色: HSL(0, 100%, 50%) → RGB(255, 0, 0)
绿色: HSL(120, 100%, 50%) → RGB(0, 255, 0)
蓝色: HSL(240, 100%, 50%) → RGB(0, 0, 255)
白色: HSL(0, 0%, 100%) → RGB(255, 255, 255)
黑色: HSL(0, 0%, 0%) → RGB(0, 0, 0)
示例: HSL(150, 50%, 50%) → RGB(66, 185, 131)