C#优化颜色列表排序效果的更佳实现方案问询

问题描述 #

在判定本问题为重复提问前，先做如下说明：我目前正在寻找更优化的排序算法，用于对由十六进制颜色值组成的颜色列表进行排序整理。当前我采用的是基于色相（Hue）的排序逻辑，在颜色数量较少时排序效果正常，但当颜色数量较多、存在大量相似色时，排序结果会出现大量杂乱噪点，效果不理想。

我目前正在探索适用于C#的大规模随机十六进制颜色值列表排序方案，参考相关技术资料编写实现代码如下：

初始测试颜色列表：

#ee82ee // Violet
#008000 // Green
#ffa500 // Orange
#0000ff // Blue
#ff0000 // Red
#ffff00 // Yellow
#4b0082 // Indigo

基础实现代码：

// 从富文本框读取颜色生成列表
List<Color> tiledata = new List<Color> ();
foreach (string line in richTextBox1.Lines)
{
    // 逐行读取文本并转换十六进制颜色值
    tiledata.Add(System.Drawing.ColorTranslator.FromHtml(line));
}

// 基于色相排序
var hexColorsSorted = tiledata.OrderBy(color => color.GetHue()).ThenBy(o => o.R * 3 + o.G * 2 + o.B * 1);

// 遍历输出排序结果
foreach (var color in hexColorsSorted)
{
    Console.WriteLine(ColorConverterExtensions.ToHexString(color));
}

上述代码可实现基础的彩虹顺序颜色排序，但当列表中加入大量相似颜色时，就会出现上图所示的杂乱问题。当前排序算法仅优先按Hue排序，次级按RGB加权值排序，希望找到优化方案改善排序杂乱的问题，唯一要求是该方案可兼容List<Tuple<Color>>结构，调用示例如下：

.OrderBy(color => color.Item3.GetHue()).ThenBy(o => o.Item3.R * 3 + o.Item3.G * 2 + o.Item3.B * 1)

当前的实现尝试趋近阶梯式排序效果但最终未能达到预期，期望最终排序效果可接近如下参考图展示的规整阶梯式排序效果：

解决方案 #

现有排序出现噪点的核心原因有两个：

• 原生GetHue()返回的是0-360的连续浮点值，没有做阶梯聚合，大量相近色会因为极微小的色相差反复横跳，无法形成规整的大色块阶梯
• 次级排序用的RGB加权逻辑没有区分饱和度、亮度维度，同色相下高饱和、低饱和、明、暗的颜色会混排，视觉上就会呈现杂乱的噪点

下面的优化方案完全兼容现有数据结构，不需要修改List<Tuple<Color>>的存储逻辑，直接替换排序规则即可实现规整的阶梯排序效果：

第一步：编写辅助计算方法 #

/// <summary>
/// 计算颜色所属的色相阶梯桶，从根源避免跨色阶跳变
/// </summary>
public static int GetColorBucket(Color c)
{
    float hue = c.GetHue();
    // 拆分为12个基础色阶梯，需要更粗/细的阶梯可以调整这个值（6/18/24均可）
    const int stepCount = 12;
    float step = 360f / stepCount;
    int bucket = (int)Math.Round(hue / step);
    // 处理色相环首尾红色区衔接问题，避免359度和0度的同色被拆分到不同桶
    if (bucket >= stepCount) bucket = 0;
    return bucket;
}

/// <summary>
/// 计算人眼感知的颜色亮度，比直接RGB加权排序更符合视觉习惯
/// </summary>
public static float GetColorLuminance(Color c)
{
    return (0.299f * c.R + 0.587f * c.G + 0.114f * c.B) / 255f;
}

第二步：替换原有排序逻辑 #

普通List<Color>的排序写法：

var hexColorsSorted = tiledata
    // 第一层：按色相大阶梯排序，固定大色块边界，杜绝跨色阶乱跳
    .OrderBy(color => GetColorBucket(color))
    // 第二层：同色阶下按饱和度降序，高饱和纯色在前，低饱和灰调在后
    .ThenByDescending(color => color.GetSaturation())
    // 第三层：同饱和度下按感知亮度排序，形成规整明暗阶梯
    .ThenBy(color => GetColorLuminance(color))
    // 第四层：同亮度下按连续色相微调，让同阶梯内颜色过渡自然不生硬
    .ThenBy(color => color.GetHue());

兼容List<Tuple<Color>>的调用写法（和原有调用方式完全一致，假设Color存在Item3位置）：

var sortedTupleList = yourTupleList
    .OrderBy(t => GetColorBucket(t.Item3))
    .ThenByDescending(t => t.Item3.GetSaturation())
    .ThenBy(t => GetColorLuminance(t.Item3))
    .ThenBy(t => t.Item3.GetHue());

调参技巧 #

• 想要更粗的大色块阶梯，就把GetColorBucket里的stepCount调小（比如改成6就是红橙黄绿蓝紫6个基础大色阶）；想要更细腻的过渡就调大（比如24、36），匹配需要的阶梯密度即可
• 想要明暗阶梯反向（暗色在前亮色在后），把ThenBy(GetColorLuminance)改成ThenByDescending即可
• 如果需要保留原有RGB加权的排序逻辑，可以在最后追加一层.ThenBy(o => o.Item3.R * 3 + o.Item3.G * 2 + o.Item3.B * 1)，不会破坏整体阶梯结构

这个方案先固定大的色阶边界，从根源避免跨色跳变的噪点，同色阶内按饱和度、亮度分层排列，最终呈现的就是参考图里的规整块面阶梯效果，不会出现细碎的杂乱噪点。

内容的提问来源于stack exchange，提问作者John Kens