星点 星点-颜色工具 本系列首页
关于
版本 v1.0.0

颜色调整工具

通过滑块实时调整颜色:调亮调暗、增减饱和度、调整透明度、色相、明度与对比度,并支持混合、叠加、反转、灰度、去色与染色。原色与结果并列展示,参数变化即时预览。

颜色调整 · 工具介绍

颜色调整常用于让品牌色适配不同状态(hover、disabled)或生成深浅色阶。本工具把常用调整集中到一个界面。

亮度、饱和度、透明度、色相、明度、对比度均以滑块控制,调整结果实时更新,原色与结果并列便于对比。

除基础调整外,还提供颜色混合、叠加、反转、灰度、去色与染色等效果,覆盖常见的颜色处理需求。

调整后的颜色可一键复制为 HEX/RGB/HSL 等格式。

颜色调整 · 功能特点

  • 调亮 / 调暗、增减饱和度
  • 透明度、色相、明度、对比度滑块
  • 颜色混合、叠加、反转、灰度、去色、染色
  • 原色与结果并列对比
  • 参数实时变化,即时预览
  • 一键复制调整结果

颜色调整 · 使用方法

  1. 输入或选择原始颜色;
  2. 拖动亮度、饱和度、透明度、色相、明度、对比度滑块;
  3. 需要时选择混合/叠加模式或使用反转、灰度、染色;
  4. 对比原色与结果;
  5. 复制调整后的颜色。

颜色调整 · 常见问题

Q:调整会改变原色吗?

不会。工具始终基于原始颜色计算,调整参数只影响结果预览,原色保持不变。

Q:明度和亮度有什么区别?

亮度改变颜色的整体明暗;明度(HSL 中的 L)在保持色相的同时改变色彩的明暗层次,两者效果相近但计算方式不同。

Q:“去色”和“灰度”一样吗?

效果接近。灰度按感知亮度权重把颜色转为灰阶;去色则完全移除饱和度,两者都能得到无彩色的结果。

Q:可以复制调整后的代码吗?

可以。结果区支持复制 HEX、RGB、HSL 等格式,直接用于样式。

相关工具

继续使用本站其它颜色处理工具:

颜色选择器

色相/饱和度/明度面板取色,多格式实时同步与多点保存

打开工具

图片颜色工具

上传图片取色、提取主色与调色板、统计与聚类量化

打开工具

颜色格式转换

HEX/RGB/HSL/HSV/CMYK/LAB/XYZ/LCH/HWB/OKLab/OKLCH 互转

打开工具

配色方案生成器

按色彩关系生成单色/类似/互补/三角/四角等配色方案

打开工具

CSS 渐变生成器

可视化制作线性/径向/锥形渐变并复制 CSS

打开工具

对比度检测

WCAG AA/AAA 对比度检测,给出最佳文字色与替代色

打开工具

批量颜色处理

批量转换/提取/替换/去重/排序颜色代码

打开工具

设计辅助

主色/辅助色/状态色 → UI 结构预览 + Design Token 导出

打开工具

专业色彩

LAB/OKLab/OKLCH 转换、DeltaE 色差、色温与色域分析

打开工具

色觉模拟

模拟多种色觉类型,检查图片与配色的可辨识度

打开工具

标准与色库

CSS/Material/Tailwind/Ant/品牌/传统色等色库查询复制

打开工具