径向渐变出现意外灰色，如何平滑红到白的渐变过渡？

嘿，这个坑我之前也踩过！你遇到的红色到白色渐变出现灰色，大概率是颜色空间不匹配导致的色彩插值异常，咱们一步步来搞定它：

核心原因 #

Core Graphics默认的色彩插值如果用了设备相关的RGB空间，红到白的过渡会因为色彩空间的特性产生偏灰的中间色；而咱们日常视觉认知里的平滑过渡，需要基于标准的sRGB色彩空间来计算。

解决方案1：在drawRect中正确设置sRGB渐变 #

直接在draw(_ rect:)（Swift对应方法）里明确指定sRGB颜色空间，确保渐变的色彩插值符合视觉预期：

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    
    // 明确指定标准sRGB颜色空间
    let srgbColorSpace = CGColorSpace(name: CGColorSpace.sRGB)!
    
    // 创建基于sRGB的红色和白色（UIColor默认就是sRGB，这里也可以显式声明）
    let redColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0).cgColor
    let whiteColor = UIColor.white.cgColor
    
    // 定义渐变的颜色数组和位置锚点
    let gradientColors: [CGColor] = [redColor, whiteColor]
    let gradientLocations: [CGFloat] = [0.0, 1.0]
    
    // 创建渐变对象
    guard let radialGradient = CGGradient(colorsSpace: srgbColorSpace,
                                         colors: gradientColors as CFArray,
                                         locations: gradientLocations) else { return }
    
    // 设置径向渐变的中心、起始/结束半径
    let gradientCenter = CGPoint(x: rect.midX, y: rect.midY)
    let startRadius: CGFloat = 0.0
    let endRadius = min(rect.width, rect.height) / 2.0
    
    // 绘制渐变
    context.drawRadialGradient(radialGradient,
                               startCenter: gradientCenter,
                               startRadius: startRadius,
                               endCenter: gradientCenter,
                               endRadius: endRadius,
                               options: [])
}

解决方案2：用CAGradientLayer实现（更简洁） #

如果不想手动写drawRect逻辑，用CAGradientLayer也能轻松搞定，只要确保颜色用标准sRGB（UIColor默认就是）：

// 在ViewController的viewDidLoad里添加渐变层
override func viewDidLoad() {
    super.viewDidLoad()
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = self.view.bounds
    // 设置径向渐变类型
    gradientLayer.type = .radial
    // 渐变中心（默认就是中心，这里可以按需调整）
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.5)
    // 渐变半径
    gradientLayer.radius = min(self.view.bounds.width, self.view.bounds.height) / 2.0
    // 颜色数组（红→白）
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.white.cgColor]
    
    self.view.layer.addSublayer(gradientLayer)
}

关键注意点 #

• 不要混用不同颜色空间的颜色：比如一个颜色用设备RGB，另一个用sRGB，插值时就会出现异常色调。
• 如果是自定义颜色，一定要确认是基于sRGB创建的（UIColor的初始化方法默认都是sRGB，除非你手动指定了其他颜色空间）。

这样调整后，红色到白色的过渡就会是平滑的亮色调渐变，不会再出现难看的灰色啦～

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