公司动态
UIColor、HSV与RGB颜色空间转换全解:Colorful ColorfulEntity.swift颜色模型详解
UIColor、HSV与RGB颜色空间转换全解Colorful ColorfulEntity.swift颜色模型详解【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOSColorful 是一款用 Swift 编写的 iOS 取色器color picker组件其核心颜色模型位于Colorful/Classes/ColorfulEntity.swift。本文以该开源项目为例系统讲清 UIColor、HSV、RGB 三大颜色空间以及它们之间颜色转换的完整链路帮助新手快速看懂 iOS 颜色空间转换的底层原理。三大颜色空间入门RGB、HSV 与 UIColor先搞清楚概念这是理解一切转换的前提颜色空间全称描述颜色的方式RGBRed Green Blue红、绿、蓝三通道混合每通道 0–255HSVHue Saturation Value(Brightness)色调什么色 饱和度纯度 明度亮暗UIColorUIKit 颜色类型iOS 统一颜色类型内部可承载 RGB、HSB、灰度等多种表示取色器为什么选 HSV 而不是 RGB因为人脑对颜色的直觉是色调 纯度 明暗——鲜亮一点的红色这种说法天然就是 HSV 语言。Colorful 的交互正是如此圆形色轮负责选 Hue角度和 Saturation半径右侧滑杆负责选 Brightness。Colorful 颜色模型的 3 个核心结构体Colorful 用一个轻量的 Swift struct 把颜色建模为三层全部定义在Colorful/Classes/ColorfulEntity.swift中结构体字段职责HSVColorcolorSpace / hue / saturation / brightness完整颜色取色器当前选中色的数据模型HSColorcolorSpace / hue / saturation不含明度的颜色用于色轮位置的正反向计算RGBColorred / green / blue均为 UInt80–255 的 RGB 结果供位图像素写入使用此外还有一个HRColorSpace枚举同文件 L11–L14定义了两种可选色域.sRGB标准 sRGB 色域绝大多数图片与网页的默认颜色空间.extendedSRGB扩展 sRGB 色域对应 Apple Display P3 广色域能呈现比 sRGB 更鲜艳、更深的颜色。 为什么叫 extendedSRGB 而不是直接叫 P3因为UIColor(displayP3Red:green:blue:alpha:)返回的颜色在扩展范围 sRGB色彩空间中表达通道值允许超出 0–1 范围这是 Apple 官方的实现方式。UIColor 转 HSV官方 getHue API 的实战用法把任意一个UIColor拆成 HSV关键是HSVColor的init(color:colorSpace:)方法Colorful/Classes/ColorfulEntity.swiftL36–L62它分三步完成色域归一化先通过cgColor.converted(to:intent:options:)把输入颜色转换到目标色彩空间sRGB 或 Display P3保证读到的通道值是正确的解释结果提取通道分量从转换后的 CGColor 中读取 RGB 分量若分量不足 3 个比如灰度色直接复制同一值一步转 HSV调用 UIKit 自带的getHue(_:saturation:brightness:alpha:)完成 RGB → HSV 换算。核心就这一小段UIColor(red: red, green: green, blue: blue, alpha: 1) .getHue(h, saturation: s, brightness: b, alpha: nil)这就是RGB 转 HSV的官方入口系统内部处理了全部三角函数与最大值判断不需要手写任何公式。HSV 转 RGB一行代码生成 UI 颜色反向转换更简单。HSVColor的计算属性sRGBUIColor同文件 L75–L77UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1)用UIColor的init(hue:saturation:brightness:alpha:)构造器由 HSV 参数拼出 RGB 颜色这是HSV 转 UIColor的标准姿势。接着rgbColor属性L68–L73再把它换算成 0–255 的UInt8三元组RGBColor供色轮位图的每个像素直接使用。sRGB 与 extendedSRGBDisplay P3 广色域详解输出最终颜色时uiColor属性L90–L97按色域分两条路.sRGB→ 直接返回UIColor(hue:...)构造的 sRGB 颜色.extendedSRGB→ 先把 HSV 转成 sRGB 下的 0–255RGBColor再把这组数值作为 P3 通道值喂给UIColor(displayP3Red:green:blue:alpha:)还原广色域表现。这里有个值得记住的技巧同一组数字换一种色彩空间去解释就能得到更鲜艳的颜色。这正是数值不变、解释变了的广色域思路。色轮位图在Colorful/Classes/ColorMapView.swift的createColorMapImage方法L31–L67中也完整跑了一遍转换闭环逐像素扫描用极坐标公式算出每个点的 HS 值再经 HSV → RGB 写入位图缓冲最后用对应的CGColorSpaceDisplay P3 或 sRGB封装成CGImage显示。一个巧妙的细节光标边框 borderColor 自适应borderColor属性Colorful/Classes/ColorfulEntity.swiftL99–L107体现了体验细节当明度 0.7 且饱和度 0.4 时判定为浅色光标边框改用深灰色否则用白色。这样取色光标在浅、深两种颜色上都清晰可见——判断颜色深浅用的依然是 HSV 分量而不是 RGB。ColorPicker 交互全流程模型如何驱动 UIHSVColor不只是个转换工具它是整个取色器的单一数据源。看Colorful/Classes/ColorPicker.swift的主流程初始设色set(color:colorSpace:)L59–L66用任意 UIColor 构造HSVColor一次性刷新所有部件拖拽 / 点按色轮从触点位置反算出HSColor再通过with(brightness:)ColorfulEntity.swiftL110–L114叠加当前明度得到新的HSVColor滑动明度条Colorful/Classes/BrightnessSlider.swift把滚动偏移量换算成 0–1 的明度值回写模型反馈与事件颜色一变就触发触感反馈haptic feedback并发送.valueChanged事件调用方只需读取colorPicker.color即可拿到最新UIColor。全程遵循视图不保存颜色状态、模型是唯一数据源的单向数据流这是整个组件代码如此精简的关键。总结UIColor ⇄ HSV ⇄ RGB 三条转换路径速查表转换方向Colorful 中的实现核心 APIUIColor → HSVHSVColor(color:colorSpace:)UIColor.getHue(_:saturation:brightness:alpha:)HSV → UIColorHSVColor.uiColorUIColor(hue:saturation:brightness:alpha:)HSV → RGB0–255HSVColor.rgbColorUIColor.getRed(_:green:blue:alpha:)RGB 数值 → 广色域 UIColorextendedSRGBUIColorUIColor(displayP3Red:green:blue:alpha:)想上手体验的话Colorful 支持 CocoaPodsPodfile 中声明pod Colorful, ~ 3.0与 Swift Package Manager见项目根目录Package.swift两种集成方式最低支持 iOS 11。无论是自己开发取色器还是在 App 里做颜色处理记住上面这张速查表就覆盖了 90% 的 iOS 颜色空间转换场景。 延伸阅读项目内关键源码路径颜色模型与全部转换逻辑Colorful/Classes/ColorfulEntity.swift取色器主组件与交互事件Colorful/Classes/ColorPicker.swift色轮位图生成与极坐标映射Colorful/Classes/ColorMapView.swift明度滑杆与触感反馈Colorful/Classes/BrightnessSlider.swift、Colorful/Classes/BrightnessCursor.swift示例工程Example/Colorful/ViewController.swift【免费下载链接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.项目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考