颜色转换咨询：Swift实现HEX转HSL及特殊颜色对比需求

Hey there！完全懂你作为新手想实现HEX转HSL的需求，而且你选HSL来做色彩对比真的是个聪明的选择——正如你提到的：

HSL、HSV等色域的设计“更贴近人类视觉感知色彩属性的方式”

对于新手来说，我们可以把整个转换拆成两步：先把HEX颜色转成RGB分量，再把RGB转成HSL。下面我会一步步讲清楚，代码里也加了详细注释，跟着走就行～

第一步：处理HEX字符串并转成RGB值 #

HEX颜色通常是#RRGGBB或者#RGB（缩写形式，比如#FFF等价于#FFFFFF）的格式，我们首先要把它转换成0-1之间的RGB浮点值（这是后续计算HSL的基础）。

第二步：RGB转HSL #

HSL的三个分量分别是：

• Hue（色相）：0-360度，代表颜色的基本色调
• Saturation（饱和度）：0-1，代表颜色的鲜艳程度
• Lightness（亮度）：0-1，代表颜色的明暗程度

完整实现代码 #

下面是一个专门为新手写的扩展，直接用就行，不管你是用UIKit还是SwiftUI都能适配：

import UIKit // 如果用SwiftUI，替换成import SwiftUI

extension UIColor { // SwiftUI的话改成extension Color
    // 从HEX字符串创建UIColor，并返回对应的HSL值
    static func hslFromHex(_ hexString: String) -> (hue: CGFloat, saturation: CGFloat, lightness: CGFloat)? {
        // 第一步：处理HEX字符串，去掉#，统一转成大写
        var cleanedHex = hexString.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
        if cleanedHex.hasPrefix("#") {
            cleanedHex.remove(at: cleanedHex.startIndex)
        }
        
        // 处理缩写的HEX（比如#FFF → #FFFFFF）
        if cleanedHex.count == 3 {
            cleanedHex = cleanedHex.map { String(repeating: $0, count: 2) }.joined()
        }
        
        // 确保处理后的HEX是6位字符
        guard cleanedHex.count == 6, let rgbValue = UInt64(cleanedHex, radix: 16) else {
            print("无效的HEX格式，请检查输入！")
            return nil
        }
        
        // 提取RGB分量，转成0-1的浮点值
        let red = CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0
        let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0
        let blue = CGFloat(rgbValue & 0x0000FF) / 255.0
        
        // 第二步：RGB转HSL
        let maxComponent = max(red, green, blue)
        let minComponent = min(red, green, blue)
        var hue: CGFloat = 0.0
        let saturation: CGFloat
        let lightness = (maxComponent + minComponent) / 2.0
        
        if maxComponent == minComponent {
            // 灰度色，色相为0，饱和度为0
            saturation = 0.0
        } else {
            let delta = maxComponent - minComponent
            saturation = lightness > 0.5 ? delta / (2.0 - maxComponent - minComponent) : delta / (maxComponent + minComponent)
            
            // 计算色相
            switch maxComponent {
            case red:
                hue = (green - blue) / delta + (green < blue ? 6.0 : 0.0)
            case green:
                hue = (blue - red) / delta + 2.0
            case blue:
                hue = (red - green) / delta + 4.0
            default:
                hue = 0.0
            }
            hue /= 6.0
        }
        
        // 把色相转成0-360度，饱和度和亮度保持0-1
        return (hue * 360, saturation, lightness)
    }
}

怎么用这个代码？ #

非常简单，直接调用这个方法就行：

// 示例：把#FF5733转成HSL
if let hsl = UIColor.hslFromHex("#FF5733") {
    print("色相：\(hsl.hue)°，饱和度：\(hsl.saturation)，亮度：\(hsl.lightness)")
    // 输出大概是：色相：10.0°，饱和度：1.0，亮度：0.65
}

新手注意点 #

• 如果用SwiftUI，只需要把UIColor改成Color，并导入SwiftUI即可
• 输入的HEX字符串可以带#也可以不带，支持3位缩写和6位完整格式
• 如果返回nil，说明你的HEX格式不对，检查一下是不是输入了非十六进制字符哦～

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