如何通过UIColor实现柔化及相近差异化色彩效果？

嘿，这个问题我刚好之前做UI优化的时候研究过！要实现这种和原色调相近但更柔和的色彩效果，其实核心是对颜色的饱和度、亮度或者进行色彩混合来调整，用UIColor完全可以搞定，我给你分享几个实用的方法：

颜色太刺眼大多是因为饱和度太高，降低饱和度能让颜色变得温和，再稍微提高一点亮度，就能得到那种柔而不淡的效果。我们可以利用UIColor的HSB（色相-饱和度-亮度）模型来调整，因为色相不变的话，色调就会和原颜色保持一致。

给UIColor写个扩展方法就很方便复用：

extension UIColor {
    func softedColor(withSaturationFactor saturationFactor: CGFloat = 0.6, brightnessFactor: CGFloat = 0.9) -> UIColor {
        var hue: CGFloat = 0
        var saturation: CGFloat = 0
        var brightness: CGFloat = 0
        var alpha: CGFloat = 0
        
        // 把当前颜色转成HSB空间
        guard self.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) else {
            return self // 如果转换失败，返回原颜色
        }
        
        // 调整饱和度和亮度，这里的系数可以根据需求调整
        let newSaturation = saturation * saturationFactor
        let newBrightness = min(brightness * brightnessFactor, 1.0) // 不要超过1.0，避免过曝
        
        return UIColor(hue: hue, saturation: newSaturation, brightness: newBrightness, alpha: alpha)
    }
}

举个例子：原颜色是UIColor.systemBlue，调用systemBlue.softedColor()就能得到一个柔和的天蓝色，和原色调完全统一，但质感更温润。

如果想要更浅的柔化效果，直接把原颜色和白色按比例混合就行，适合做卡片背景、次要按钮这类需要低存在感的元素。

同样写个扩展方法：

extension UIColor {
    func mixedWithWhite(ratio: CGFloat = 0.3) -> UIColor {
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        
        guard self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) else {
            return self
        }
        
        // 按比例混合白色（RGB都是1.0）
        let newRed = red * (1 - ratio) + 1.0 * ratio
        let newGreen = green * (1 - ratio) + 1.0 * ratio
        let newBlue = blue * (1 - ratio) + 1.0 * ratio
        
        return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
    }
}

比如UIColor.systemPink.mixedWithWhite(ratio: 0.4)，就能得到一个柔和的淡粉色，完全保留原色调的感觉，但不会太艳丽。

如果不想颜色太浅，而是想要一种低对比度的沉稳柔化效果，可以混合中性灰色（比如RGB(0.5,0.5,0.5)），这种方式适合做深色模式下的柔化处理。

扩展方法类似：

extension UIColor {
    func mixedWithNeutralGray(ratio: CGFloat = 0.2) -> UIColor {
        let grayRed: CGFloat = 0.5
        let grayGreen: CGFloat = 0.5
        let grayBlue: CGFloat = 0.5
        
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        
        guard self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) else {
            return self
        }
        
        let newRed = red * (1 - ratio) + grayRed * ratio
        let newGreen = green * (1 - ratio) + grayGreen * ratio
        let newBlue = blue * (1 - ratio) + grayBlue * ratio
        
        return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
    }
}

如果你的App需要支持明暗模式，别忘了把柔化后的颜色也做成动态的，比如：

let softDynamicBlue = UIColor { traitCollection in
    let baseColor = traitCollection.userInterfaceStyle == .dark ? UIColor.systemBlue : UIColor.systemBlue
    return baseColor.softedColor()
}

这样在明暗模式下，柔化色都会和当前模式的基础色匹配。

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