【Xcode/Swift】Swiftで使える『Color』『UIColor』のチートシート

この記事では、SwiftUIで使うColor、UIKitで使うUIColorなど、色に関することを色々とまとめていこうと思います。

SwiftUIでのColorの使い方

基本的な使い方

以下のように、.foregroundColorや、.backgroundColorなどに指定したりします。

struct ContentView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(Color.red)
    }
}

また、Color自身一つのオブジェクトなので、以下のような使い方もできます。

struct ContentView: View {
    var body: some View {
        Color.red
            .frame(width: 300, height: 300)
    }
}

Colorの省略

代入する値が、Colorと確定している箇所では、Colorを省略することができます。

struct ContentView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.red)
    }
}

ColorでUIColorを使う

SwiftUIでUIColorを使うこともできます。

以下のように、uicolor:という引数に代入してあげれば使えます。

Color(uiColor: UIColor.red)

ちなみに、uicolor:は省略可能です。

Color(UIColor.red)

もっというと、UIColorも省略可能です。

Color(.red)

なので、Color.redとColor(.red)では、同じように記述しているようで、前者はColor、後者はUIColorとなっております。

Assetsを使う

①Assetsを選択
②プラスボタンをクリック
③Color Setを選択
④名前をつける
⑤Any Appearanceをクリック
⑥ (Show the Attributes inspector)をクリック
⑦Colorを設定

上記のように色を設定したら、その名前を""で書こうとその色が使えます。

Color("originalColor")

RGB、HSVで指定

以下のように記述すると、RGB、HSVで指定できたりします。値は0〜1の間で指定します。

RGB

red: 赤、green: 緑、blue: 青、opacity:透明度

Color(red: 1, green: 0.2, blue: 0.2, opacity: 1)

HSV

hue: 色相、saturation: 彩度、brightness: 明度、opacity:透明度

Color(hue: 0.7, saturation: 0.8, brightness: 0.9, opacity: 1)

色一覧

Color

Standard colors

色はライトモードとダークモードで若干違います。

Semantic colors

UIColor

Label colors

Fill colors

Text colors

Tint color

Standard content background colors

Grouped content background colors

Separator colors

Link color

Nonadaptable colors

Adaptable colors

Adaptable gray colors

Transparent color

Fixed colors