hue.tools

首页提供四种颜色操作入口

首页用大色块展示当前颜色，中央的 Mix、Info、Blend、Modify 按钮分别进入混色、颜色信息、混合和调整页面。页面还提供随机颜色入口和当前颜色值，适合快速换一个色样继续探索。hue.tools 首页自述为开源颜色工具箱，并链接到项目的 GitHub 仓库；底部标明由 pabue.co 制作。

工具之间共享颜色值的使用方式：先选颜色，再切到需要的分析或处理页面。顶部还可以选择输出格式，包括 HEX、RGB、HSL、HSV、HSI 和 LAB。页面也提供复制颜色或当前链接的按钮，因此生成的色值可以带到设计稿、CSS 样式或其它配色流程中；修改当前色值时，地址参数会同步更新，便于保留一个具体颜色的页面链接。

INFO 查看色彩空间和搭配关系

Info 页面会把同一个颜色转换成多种表示方式。输入 #336699 后，页面给出十六进制、RGB、HSL、HSV、HSI、LCH、LAB、Numeric RGB、色温和 GL 数值，也列出可直接写进 CSS 的 rgb()、百分比 RGB、hsl() 与 hsv() 表达式。顶部的输出格式选择器可以切换常用表示，减少手工换算的步骤。

页面还根据当前颜色展示互补色和多种组合方案，例如 Analogous、Monochromatic、Splitcomponent、Triad、Tetrad 与 Polyad。每种组合列出可复制的颜色值，便于搭建一组协调色板。Info 侧重查看与比较：既能核对某个已有颜色在不同空间中的数值，也能从互补色和色彩关系中找出其它候选颜色。 页面生成的色名是辅助识别的标签，实际复用时应以颜色代码为准。色彩组合可用于初步选色，但是否符合品牌规范、文字可读性或特定对比度要求，仍要放回实际界面中确认。

不同表示方式对应不同工作习惯：HEX 常见于样式表和设计稿标注，RGB 便于和屏幕颜色通道对应，HSL 则把色相、饱和度与亮度分开呈现。LAB 与 LCH 也会出现在结果中，适合进一步比较颜色空间里的数值。hue.tools 把这些读数放在同一处，减少在多个转换器之间来回复制的步骤；组合色块则提供了继续试色的起点。需要交付给团队时，可以先确定采用的颜色格式，再复制代码并在实际组件上检查显示效果。

BLEND 比较不同混色模式

Blend 页面提供两个输入色卡，并用多个混合模式展示它们组合后的结果。Normal、Multiply、Screen、Overlay、Darken、Lighten、Color Dodge、Color Burn、Hard Light、Soft Light、Difference、Exclusion、Hue、Saturation、Color 和 Luminosity 等模式都有单独预览。切换输入色后，可以直接对照各模式输出，不必在图像软件中逐个试参数。

这些模式适合对照设计软件中的混合效果，尤其是在挑选前景与背景色、制作叠色效果时。页面把原始颜色和各模式的输出保持在同一页，用户可以先从视觉上筛选，再复制具体颜色值。不同模式会产生明显不同的明暗与色相结果，最终效果仍取决于输入的两种颜色，因此比较时可以固定一色、调整另一色，观察变化来源。 对需要一组按钮或卡片配色的设计者来说，可以先用 Normal 作为基准，再比较 Multiply、Screen 和 Overlay 的变化；如果效果接近，再从色卡底部复制代码到样式文件。并排预览减少了来回切换操作，也让两种输入颜色和输出关系保持清楚。

MODIFY 用滑杆修改颜色

Modify 页面把 Brighten、Darken、Tint、Shade、Desaturate、Saturate、Lighten 和 Spin 等调整项排列在一个控制面板中。每项都有百分比或角度滑杆，左侧保留原颜色，右侧实时显示修改后的颜色名称与 HEX 值。把 Brighten 调到 25% 后，橙色 #ff8800 的结果变为 #ffc840；这一变化可以直接在色块和结果栏中检查。

使用时可以一次只调整一项，例如先提高亮度，再决定是否降低饱和度，避免多个参数同时变化后难以判断原因。Tint 将颜色与白色混合，Shade 与黑色混合；Spin 用角度旋转色相。原色和结果并排显示，便于比较调整前后的差异。页面聚焦于颜色处理，适合需要为组件状态、背景或文字寻找相近变体的场景。 数值输入与滑杆相互对应，既能拖动观察连续变化，也能直接填入百分比控制幅度。每次调整后，页面同时显示结果色块、可辨认的色名和 HEX 值；需要精确复用时，复制 HEX 比凭屏幕观感重新取色更可靠。

MIX 在颜色之间生成渐变

Mix 页面根据起止颜色生成一系列中间颜色，并给出混合结果。Interpolation Mode 可选择 LCH、HSL、LAB、RGB 或 LRGB；页面还显示 CSS Linear Gradient 字符串，方便把渐变复制到样式中。插值方式会影响中间颜色经过的色彩路径，因此同一组起止颜色换一种模式，渐变观感也会变化。选择之前可以先看预览，再决定更适合当前版面的过渡效果。 起止颜色和插值模式都能从页面控件调整，最终的 CSS 线性渐变字符串可直接用于网页样式。过渡中间颜色的分布会受到插值空间影响，视觉上更平滑的方案不一定等于数值平均，因此最好用目标背景和组件大小检查实际呈现。

适合快速检查与寻找候选色

hue.tools 将颜色格式转换、配色组合、混合和属性调整放在一个轻量界面内，适合网页样式设计、界面配色探索和开发中的颜色核对。它不需要复杂项目配置；给出颜色值即可查看计算结果，遇到想继续探索的方案还能复制 HEX、CSS 数值或页面链接。输出格式包含常见的 HEX、RGB、HSL、HSV、HSI 和 LAB，可供不同工具和工作习惯选择。

界面为英文，颜色入口和按钮数量不多，首次使用时可以从首页四个模块的名称判断操作方向。Info 用来读数值和看组合，Blend 对比两个颜色的混合效果，Modify 调整单个颜色，Mix 生成渐变。网站的色名用于辅助识别，实际协作和开发仍建议以 HEX、RGB 或 CSS 值为准；不同页面可以从同一组输入继续处理，让颜色探索过程更连贯。

一个实用的顺序是先在 Info 中读取颜色代码和组合，再到 Blend 对照两色混合，或去 Modify 调整亮度与饱和度，最后复制适合的 HEX 或 CSS 结果。需要连续过渡时切换到 Mix，保存当前链接便于稍后回到相同输入。这样的流程适合快速试色与核对格式；最终方案仍应结合页面背景、文字层级和整体设计系统检查。