# Color

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [shapes](https://lochiwei.gitbook.io/ios/swiftui/shapes) ⟩ [ShapeStyle](https://lochiwei.gitbook.io/ios/swiftui/shapes/shapestyle) ⟩ <mark style="color:purple;">`Color`</mark> &#x20;

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:purple;">`Color`</mark> custom extensions：
  * [system](https://lochiwei.gitbook.io/ios/custom/ext/color+/system "mention")
    {% endtab %}

{% tab title="💾 程式" %}

```swift
// predefined colors
let red = Color.red

// Specify component values
let skyBlue = Color(red: 0.4627, green: 0.8392, blue: 1.0)         // RGB
let lemonYellow = Color(hue: 0.1639, saturation: 1, brightness: 1) // HSB
let steelGray = Color(white: 0.4745)

// Load a color from an Asset Catalog
let aqua = Color("aqua")

// Create a color instance from another color
#if os(iOS)
let linkColor = Color(uiColor: .link)         // UIColor
#elseif os(macOS)
let linkColor = Color(nsColor: .linkColor)    // NSColor
#endif
```

{% endtab %}

{% tab title="💈範例" %}

```swift
// from Asset Catalog
let aqua = Color("aqua")

// RGB / HSL / grayscale
let skyBlue = Color(red: 0.46, green: 0.84, blue: 1.0)
let lemonYellow = Color(hue: 0.16, saturation: 1, brightness: 1)
let steelGray = Color(white: 0.47)

// from UIColor / NSColor:
#if os(iOS)
    let linkColor = Color(uiColor: .link)
#elseif os(macOS)
    let linkColor = Color(nsColor: .linkColor)
#endif

// predefined colors: 
[.black, .green, .purple]
```

{% endtab %}

{% tab title="🛠 工具" %}

* Color Names
  * [Color Names](https://colornames.org/search/)
  * Robert Cooper ⟩ [Color Namer](https://colornamer.robertcooper.me/)
  * Chirag Mehta ⟩ [Name that Color](https://chir.ag/projects/name-that-color/#473E24)
* Palettes
  * [Get Palettes](https://getpalettes.com/)
    {% endtab %}

{% tab title="色輪" %}
![color wheel](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FOzGCqHqXey4tHUzsfwyP%2Fcolor%20wheel%20\(hue\).png?alt=media\&token=c121d527-aa9e-4f61-ae83-5d341c3036a9)
{% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩ [ShapeStyle ](https://developer.apple.com/documentation/swiftui/shapestyle)⟩&#x20;
  * [Color](https://developer.apple.com/documentation/swiftui/color) ⟩ [ShapeStyle Implementations](https://developer.apple.com/documentation/swiftui/color/shapestyle-implementations?changes=_8) - define system colors (again).
  * List ⟩ [View Implementations](https://developer.apple.com/documentation/swiftui/list/view-implementations) ⟩ [saturation(\_:)](https://developer.apple.com/documentation/swiftui/list/saturation\(_:\))
* [Core Image](https://developer.apple.com/documentation/coreimage) ⟩ [Applying a Chroma Key Effect](https://developer.apple.com/documentation/coreimage/applying_a_chroma_key_effect) \
  ⭐️ - a.k.a. **bluescreening** or **greenscreening**.
* Human Interface Guidelines ⟩ [System Colors](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#system-colors) - colorful <mark style="color:red;">**swatches**</mark>.
* UIKit ⟩ [UIColor](https://developer.apple.com/documentation/uikit/uicolor) ⟩&#x20;
  * [Standard Colors](https://developer.apple.com/documentation/uikit/uicolor/standard_colors) - .systemBlue, .systemBrown ...
  * [UI Element Colors](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors) - .[`systemBackground`](https://developer.apple.com/documentation/uikit/uicolor/3173140-systembackground), ...
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] Design+Code ⟩ [Adaptive Layout](https://designcode.io/ios-design-handbook-adaptive-layout) ⟩ **Dynamic System Colors**
* [ ] MakeUseOf ⟩ [The 7 Best AI-Powered Online Color Palette Generators](https://www.makeuseof.com/ai-powered-online-color-palette-generators/)
* [x] Khanlou ⟩ [Name Your Colors!](https://khanlou.com/2022/04/name-your-colors/?utm_campaign=iOS%2BDev%2BWeekly\&utm_medium=email\&utm_source=iOS%2BDev%2BWeekly%2BIssue%2B556)
* [ ] [Natalia Panferova](https://twitter.com/natpanferova) ⟩ [Encode and Decode SwiftUI Color](https://nilcoalescing.com/blog/EncodeAndDecodeSwiftUIColor/)
  {% endtab %}

{% tab title="🗣 討論" %}

* [Is it possible to get color name in swift?](https://stackoverflow.com/questions/44672594/is-it-possible-to-get-color-name-in-swift)
* [How can I change a SwiftUI Color to UIColor?](https://stackoverflow.com/questions/57257704/how-can-i-change-a-swiftui-color-to-uicolor)
* [Get lighter and darker color variations for a given UIColor](https://stackoverflow.com/questions/38435308/get-lighter-and-darker-color-variations-for-a-given-uicolor) ⭐️ #todo
  {% endtab %}
  {% endtabs %}