換全解：Colorful ColorfulEntity.swift顏色模型詳解)
UIColor、HSV與RGB顏色空間轉(zhuǎn)換全解Colorful ColorfulEntity.swift顏色模型詳解【免費(fèi)下載鏈接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOSColorful 是一款用 Swift 編寫的 iOS 取色器color picker組件其核心顏色模型位于Colorful/Classes/ColorfulEntity.swift。本文以該開源項(xiàng)目為例系統(tǒng)講清 UIColor、HSV、RGB 三大顏色空間以及它們之間顏色轉(zhuǎn)換的完整鏈路幫助新手快速看懂 iOS 顏色空間轉(zhuǎn)換的底層原理。三大顏色空間入門RGB、HSV 與 UIColor先搞清楚概念這是理解一切轉(zhuǎn)換的前提顏色空間全稱描述顏色的方式RGBRed Green Blue紅、綠、藍(lán)三通道混合每通道 0–255HSVHue Saturation Value(Brightness)色調(diào)什么色 飽和度純度 明度亮暗UIColorUIKit 顏色類型iOS 統(tǒng)一顏色類型內(nèi)部可承載 RGB、HSB、灰度等多種表示取色器為什么選 HSV 而不是 RGB因?yàn)槿四X對(duì)顏色的直覺是色調(diào) 純度 明暗——鮮亮一點(diǎn)的紅色這種說(shuō)法天然就是 HSV 語(yǔ)言。Colorful 的交互正是如此圓形色輪負(fù)責(zé)選 Hue角度和 Saturation半徑右側(cè)滑桿負(fù)責(zé)選 Brightness。Colorful 顏色模型的 3 個(gè)核心結(jié)構(gòu)體Colorful 用一個(gè)輕量的 Swift struct 把顏色建模為三層全部定義在Colorful/Classes/ColorfulEntity.swift中結(jié)構(gòu)體字段職責(zé)HSVColorcolorSpace / hue / saturation / brightness完整顏色取色器當(dāng)前選中色的數(shù)據(jù)模型HSColorcolorSpace / hue / saturation不含明度的顏色用于色輪位置的正反向計(jì)算RGBColorred / green / blue均為 UInt80–255 的 RGB 結(jié)果供位圖像素寫入使用此外還有一個(gè)HRColorSpace枚舉同文件 L11–L14定義了兩種可選色域.sRGB標(biāo)準(zhǔn) sRGB 色域絕大多數(shù)圖片與網(wǎng)頁(yè)的默認(rèn)顏色空間.extendedSRGB擴(kuò)展 sRGB 色域?qū)?yīng) Apple Display P3 廣色域能呈現(xiàn)比 sRGB 更鮮艷、更深的顏色。 為什么叫 extendedSRGB 而不是直接叫 P3因?yàn)閁IColor(displayP3Red:green:blue:alpha:)返回的顏色在擴(kuò)展范圍 sRGB色彩空間中表達(dá)通道值允許超出 0–1 范圍這是 Apple 官方的實(shí)現(xiàn)方式。UIColor 轉(zhuǎn) HSV官方 getHue API 的實(shí)戰(zhàn)用法把任意一個(gè)UIColor拆成 HSV關(guān)鍵是HSVColor的init(color:colorSpace:)方法Colorful/Classes/ColorfulEntity.swiftL36–L62它分三步完成色域歸一化先通過(guò)cgColor.converted(to:intent:options:)把輸入顏色轉(zhuǎn)換到目標(biāo)色彩空間sRGB 或 Display P3保證讀到的通道值是正確的解釋結(jié)果提取通道分量從轉(zhuǎn)換后的 CGColor 中讀取 RGB 分量若分量不足 3 個(gè)比如灰度色直接復(fù)制同一值一步轉(zhuǎn) HSV調(diào)用 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 轉(zhuǎn) HSV的官方入口系統(tǒng)內(nèi)部處理了全部三角函數(shù)與最大值判斷不需要手寫任何公式。HSV 轉(zhuǎn) RGB一行代碼生成 UI 顏色反向轉(zhuǎn)換更簡(jiǎn)單。HSVColor的計(jì)算屬性sRGBUIColor同文件 L75–L77UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1)用UIColor的init(hue:saturation:brightness:alpha:)構(gòu)造器由 HSV 參數(shù)拼出 RGB 顏色這是HSV 轉(zhuǎn) UIColor的標(biāo)準(zhǔn)姿勢(shì)。接著rgbColor屬性L68–L73再把它換算成 0–255 的UInt8三元組RGBColor供色輪位圖的每個(gè)像素直接使用。sRGB 與 extendedSRGBDisplay P3 廣色域詳解輸出最終顏色時(shí)uiColor屬性L90–L97按色域分兩條路.sRGB→ 直接返回UIColor(hue:...)構(gòu)造的 sRGB 顏色.extendedSRGB→ 先把 HSV 轉(zhuǎn)成 sRGB 下的 0–255RGBColor再把這組數(shù)值作為 P3 通道值喂給UIColor(displayP3Red:green:blue:alpha:)還原廣色域表現(xiàn)。這里有個(gè)值得記住的技巧同一組數(shù)字換一種色彩空間去解釋就能得到更鮮艷的顏色。這正是數(shù)值不變、解釋變了的廣色域思路。色輪位圖在Colorful/Classes/ColorMapView.swift的createColorMapImage方法L31–L67中也完整跑了一遍轉(zhuǎn)換閉環(huán)逐像素掃描用極坐標(biāo)公式算出每個(gè)點(diǎn)的 HS 值再經(jīng) HSV → RGB 寫入位圖緩沖最后用對(duì)應(yīng)的CGColorSpaceDisplay P3 或 sRGB封裝成CGImage顯示。一個(gè)巧妙的細(xì)節(jié)光標(biāo)邊框 borderColor 自適應(yīng)borderColor屬性Colorful/Classes/ColorfulEntity.swiftL99–L107體現(xiàn)了體驗(yàn)細(xì)節(jié)當(dāng)明度 0.7 且飽和度 0.4 時(shí)判定為淺色光標(biāo)邊框改用深灰色否則用白色。這樣取色光標(biāo)在淺、深兩種顏色上都清晰可見——判斷顏色深淺用的依然是 HSV 分量而不是 RGB。ColorPicker 交互全流程模型如何驅(qū)動(dòng) UIHSVColor不只是個(gè)轉(zhuǎn)換工具它是整個(gè)取色器的單一數(shù)據(jù)源?？碈olorful/Classes/ColorPicker.swift的主流程初始設(shè)色set(color:colorSpace:)L59–L66用任意 UIColor 構(gòu)造HSVColor一次性刷新所有部件拖拽 / 點(diǎn)按色輪從觸點(diǎn)位置反算出HSColor再通過(guò)with(brightness:)ColorfulEntity.swiftL110–L114疊加當(dāng)前明度得到新的HSVColor滑動(dòng)明度條Colorful/Classes/BrightnessSlider.swift把滾動(dòng)偏移量換算成 0–1 的明度值回寫模型反饋與事件顏色一變就觸發(fā)觸感反饋haptic feedback并發(fā)送.valueChanged事件調(diào)用方只需讀取colorPicker.color即可拿到最新UIColor。全程遵循視圖不保存顏色狀態(tài)、模型是唯一數(shù)據(jù)源的單向數(shù)據(jù)流這是整個(gè)組件代碼如此精簡(jiǎn)的關(guān)鍵?？偨Y(jié)UIColor ? HSV ? RGB 三條轉(zhuǎn)換路徑速查表轉(zhuǎn)換方向Colorful 中的實(shí)現(xiàn)核心 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 數(shù)值 → 廣色域 UIColorextendedSRGBUIColorUIColor(displayP3Red:green:blue:alpha:)想上手體驗(yàn)的話Colorful 支持 CocoaPodsPodfile 中聲明pod Colorful, ~ 3.0與 Swift Package Manager見項(xiàng)目根目錄Package.swift兩種集成方式最低支持 iOS 11。無(wú)論是自己開發(fā)取色器還是在 App 里做顏色處理記住上面這張速查表就覆蓋了 90% 的 iOS 顏色空間轉(zhuǎn)換場(chǎng)景。 延伸閱讀項(xiàng)目?jī)?nèi)關(guān)鍵源碼路徑顏色模型與全部轉(zhuǎn)換邏輯Colorful/Classes/ColorfulEntity.swift取色器主組件與交互事件Colorful/Classes/ColorPicker.swift色輪位圖生成與極坐標(biāo)映射Colorful/Classes/ColorMapView.swift明度滑桿與觸感反饋Colorful/Classes/BrightnessSlider.swift、Colorful/Classes/BrightnessCursor.swift示例工程Example/Colorful/ViewController.swift【免費(fèi)下載鏈接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 UIColor、HSV與RGB顏色空間轉(zhuǎn)換全解：Colorful ColorfulEntity.swift顏色模型詳解
UIColor、HSV與RGB顏色空間轉(zhuǎn)換全解Colorful ColorfulEntity.swift顏色模型詳解【免費(fèi)下載鏈接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOSColorful 是一款用 Swift 編寫的 iOS 取色器color picker組件其核心顏色模型位于Colorful/Classes/ColorfulEntity.swift。本文以該開源項(xiàng)目為例系統(tǒng)講清 UIColor、HSV、RGB 三大顏色空間以及它們之間顏色轉(zhuǎn)換的完整鏈路幫助新手快速看懂 iOS 顏色空間轉(zhuǎn)換的底層原理。三大顏色空間入門RGB、HSV 與 UIColor先搞清楚概念這是理解一切轉(zhuǎn)換的前提顏色空間全稱描述顏色的方式RGBRed Green Blue紅、綠、藍(lán)三通道混合每通道 0–255HSVHue Saturation Value(Brightness)色調(diào)什么色 飽和度純度 明度亮暗UIColorUIKit 顏色類型iOS 統(tǒng)一顏色類型內(nèi)部可承載 RGB、HSB、灰度等多種表示取色器為什么選 HSV 而不是 RGB因?yàn)槿四X對(duì)顏色的直覺是色調(diào) 純度 明暗——鮮亮一點(diǎn)的紅色這種說(shuō)法天然就是 HSV 語(yǔ)言。Colorful 的交互正是如此圓形色輪負(fù)責(zé)選 Hue角度和 Saturation半徑右側(cè)滑桿負(fù)責(zé)選 Brightness。Colorful 顏色模型的 3 個(gè)核心結(jié)構(gòu)體Colorful 用一個(gè)輕量的 Swift struct 把顏色建模為三層全部定義在Colorful/Classes/ColorfulEntity.swift中結(jié)構(gòu)體字段職責(zé)HSVColorcolorSpace / hue / saturation / brightness完整顏色取色器當(dāng)前選中色的數(shù)據(jù)模型HSColorcolorSpace / hue / saturation不含明度的顏色用于色輪位置的正反向計(jì)算RGBColorred / green / blue均為 UInt80–255 的 RGB 結(jié)果供位圖像素寫入使用此外還有一個(gè)HRColorSpace枚舉同文件 L11–L14定義了兩種可選色域.sRGB標(biāo)準(zhǔn) sRGB 色域絕大多數(shù)圖片與網(wǎng)頁(yè)的默認(rèn)顏色空間.extendedSRGB擴(kuò)展 sRGB 色域?qū)?yīng) Apple Display P3 廣色域能呈現(xiàn)比 sRGB 更鮮艷、更深的顏色。 為什么叫 extendedSRGB 而不是直接叫 P3因?yàn)閁IColor(displayP3Red:green:blue:alpha:)返回的顏色在擴(kuò)展范圍 sRGB色彩空間中表達(dá)通道值允許超出 0–1 范圍這是 Apple 官方的實(shí)現(xiàn)方式。UIColor 轉(zhuǎn) HSV官方 getHue API 的實(shí)戰(zhàn)用法把任意一個(gè)UIColor拆成 HSV關(guān)鍵是HSVColor的init(color:colorSpace:)方法Colorful/Classes/ColorfulEntity.swiftL36–L62它分三步完成色域歸一化先通過(guò)cgColor.converted(to:intent:options:)把輸入顏色轉(zhuǎn)換到目標(biāo)色彩空間sRGB 或 Display P3保證讀到的通道值是正確的解釋結(jié)果提取通道分量從轉(zhuǎn)換后的 CGColor 中讀取 RGB 分量若分量不足 3 個(gè)比如灰度色直接復(fù)制同一值一步轉(zhuǎn) HSV調(diào)用 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 轉(zhuǎn) HSV的官方入口系統(tǒng)內(nèi)部處理了全部三角函數(shù)與最大值判斷不需要手寫任何公式。HSV 轉(zhuǎn) RGB一行代碼生成 UI 顏色反向轉(zhuǎn)換更簡(jiǎn)單。HSVColor的計(jì)算屬性sRGBUIColor同文件 L75–L77UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1)用UIColor的init(hue:saturation:brightness:alpha:)構(gòu)造器由 HSV 參數(shù)拼出 RGB 顏色這是HSV 轉(zhuǎn) UIColor的標(biāo)準(zhǔn)姿勢(shì)。接著rgbColor屬性L68–L73再把它換算成 0–255 的UInt8三元組RGBColor供色輪位圖的每個(gè)像素直接使用。sRGB 與 extendedSRGBDisplay P3 廣色域詳解輸出最終顏色時(shí)uiColor屬性L90–L97按色域分兩條路.sRGB→ 直接返回UIColor(hue:...)構(gòu)造的 sRGB 顏色.extendedSRGB→ 先把 HSV 轉(zhuǎn)成 sRGB 下的 0–255RGBColor再把這組數(shù)值作為 P3 通道值喂給UIColor(displayP3Red:green:blue:alpha:)還原廣色域表現(xiàn)。這里有個(gè)值得記住的技巧同一組數(shù)字換一種色彩空間去解釋就能得到更鮮艷的顏色。這正是數(shù)值不變、解釋變了的廣色域思路。色輪位圖在Colorful/Classes/ColorMapView.swift的createColorMapImage方法L31–L67中也完整跑了一遍轉(zhuǎn)換閉環(huán)逐像素掃描用極坐標(biāo)公式算出每個(gè)點(diǎn)的 HS 值再經(jīng) HSV → RGB 寫入位圖緩沖最后用對(duì)應(yīng)的CGColorSpaceDisplay P3 或 sRGB封裝成CGImage顯示。一個(gè)巧妙的細(xì)節(jié)光標(biāo)邊框 borderColor 自適應(yīng)borderColor屬性Colorful/Classes/ColorfulEntity.swiftL99–L107體現(xiàn)了體驗(yàn)細(xì)節(jié)當(dāng)明度 0.7 且飽和度 0.4 時(shí)判定為淺色光標(biāo)邊框改用深灰色否則用白色。這樣取色光標(biāo)在淺、深兩種顏色上都清晰可見——判斷顏色深淺用的依然是 HSV 分量而不是 RGB。ColorPicker 交互全流程模型如何驅(qū)動(dòng) UIHSVColor不只是個(gè)轉(zhuǎn)換工具它是整個(gè)取色器的單一數(shù)據(jù)源?？碈olorful/Classes/ColorPicker.swift的主流程初始設(shè)色set(color:colorSpace:)L59–L66用任意 UIColor 構(gòu)造HSVColor一次性刷新所有部件拖拽 / 點(diǎn)按色輪從觸點(diǎn)位置反算出HSColor再通過(guò)with(brightness:)ColorfulEntity.swiftL110–L114疊加當(dāng)前明度得到新的HSVColor滑動(dòng)明度條Colorful/Classes/BrightnessSlider.swift把滾動(dòng)偏移量換算成 0–1 的明度值回寫模型反饋與事件顏色一變就觸發(fā)觸感反饋haptic feedback并發(fā)送.valueChanged事件調(diào)用方只需讀取colorPicker.color即可拿到最新UIColor。全程遵循視圖不保存顏色狀態(tài)、模型是唯一數(shù)據(jù)源的單向數(shù)據(jù)流這是整個(gè)組件代碼如此精簡(jiǎn)的關(guān)鍵?？偨Y(jié)UIColor ? HSV ? RGB 三條轉(zhuǎn)換路徑速查表轉(zhuǎn)換方向Colorful 中的實(shí)現(xiàn)核心 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 數(shù)值 → 廣色域 UIColorextendedSRGBUIColorUIColor(displayP3Red:green:blue:alpha:)想上手體驗(yàn)的話Colorful 支持 CocoaPodsPodfile 中聲明pod Colorful, ~ 3.0與 Swift Package Manager見項(xiàng)目根目錄Package.swift兩種集成方式最低支持 iOS 11。無(wú)論是自己開發(fā)取色器還是在 App 里做顏色處理記住上面這張速查表就覆蓋了 90% 的 iOS 顏色空間轉(zhuǎn)換場(chǎng)景。 延伸閱讀項(xiàng)目?jī)?nèi)關(guān)鍵源碼路徑顏色模型與全部轉(zhuǎn)換邏輯Colorful/Classes/ColorfulEntity.swift取色器主組件與交互事件Colorful/Classes/ColorPicker.swift色輪位圖生成與極坐標(biāo)映射Colorful/Classes/ColorMapView.swift明度滑桿與觸感反饋Colorful/Classes/BrightnessSlider.swift、Colorful/Classes/BrightnessCursor.swift示例工程Example/Colorful/ViewController.swift【免費(fèi)下載鏈接】Color-Picker-for-iOSColorful: iOS color picker built with Swift.項(xiàng)目地址: https://gitcode.com/gh_mirrors/co/Color-Picker-for-iOS創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考