饱和度色相调节
实时调节图片的色相、饱和度、亮度和对比度
色相饱和度调节图片调色HSL调整在线图片滤镜照片色彩校正饱和度在线调整
最后更新: 2026/5/14
实时调节图片的色相、饱和度、亮度和对比度。使用 Canvas Filter 处理，所有操作在浏览器本地完成。
点击或拖拽图片到此处
色彩调节
0°
-180°180°
100%
0%300%
100%
0%200%
100%
0%200%
实时预览
上传图片后在此预览效果
分享：
使用说明
- 点击上传区域或将图片拖拽到页面，支持 JPG、PNG、WebP 等常见格式
- 调整色相（Hue）滑块，旋转整体颜色偏向（0°=原色，180°=互补色）
- 调整饱和度（Saturation），数值越高颜色越浓，降至 0 变为黑白
- 调整明度（Lightness）和对比度，修正曝光和画面层次感
- 实时预览满意后，点击下载按钮保存调整后的图片
核心功能
- 1色相（Hue）旋转以 0–360° 旋转色相环，整体改变图片的颜色偏向，一键实现冷暖色调互换。
- 2饱和度（Saturation）控制向右拖动使颜色更鲜艳浓烈，向左拖动逐渐褪色直至灰度，打造复古或黑白效果。
- 3明度（Lightness）调整整体提亮或压暗图片，修复曝光不足或过曝的照片，获得自然的视觉亮度。
- 4对比度增强提高对比度使画面层次分明，降低对比度获得柔光雾化风格，灵活适配不同设计需求。
- 5实时预览拖动任意滑块时画面即时刷新，无需等待，调整过程所见即所得。
适用场景
✓
照片色彩校正
修复手机拍摄时白平衡偏差导致的色偏，或弥补室内光线不足造成的暗淡感。
✓
创意风格化滤镜
通过组合调整 HSL 参数，手动复现流行的青橙色调、赛博朋克蓝紫等网络热门滤镜风格。
✓
UI 设计素材统一
将来自不同来源的图片素材统一色调，使产品界面或演示文稿视觉风格一致。
✓
社交媒体配图美化
为朋友圈、小红书、Instagram 等平台的发布图片快速添加特定色调，提升视觉吸引力。
工具优势
四维一体调色
色相、饱和度、明度、对比度四个维度集成一页，无需在多个工具之间切换。
实时响应，效率极高
拖动滑块即刻预览，不需要每次点击"应用"按钮，调色节奏顺畅自然。
本地处理，图片不外泄
调色运算在浏览器 Canvas 中完成，图片不上传服务器，敏感内容可放心处理。
常见问题
Q: HSL 和常见的 RGB 色彩模式有什么区别？
A: RGB 通过红绿蓝三通道的数值混合定义颜色，对人眼来说不够直观。HSL 按照人类感知颜色的方式建模——色相是颜色种类，饱和度是颜色纯度，明度是亮暗程度，调整时更符合视觉直觉，不容易调出"怪色"。
Q: 导出的图片是否会损失画质？
A: 导出为 PNG 格式可实现无损输出，保留原始细节。导出为 JPG 时会有轻微压缩，建议将质量设置保持在 90 以上，正常浏览几乎看不出差异。
Q: 能把彩色图片变成纯黑白吗？
A: 可以。将饱和度滑块拖到最低（0）即可将图片转为灰度黑白效果；再配合对比度和明度微调，可以获得不同风格的黑白照片效果。
相关工具
关联介绍
什么是色相饱和度
色相（Hue）是颜色类型，0°-360°色环。饱和度（Saturation）是颜色鲜艳度，0%-100%。明度（Lightness）是明暗程度。HSL色彩模型更符合人类直觉，用于调色、滤镜、设计。调整参数可改变图片风格。