🦅

[SwiftUI]Color, UIColor, Materialの一覧

2022/08/16に公開

Swift

SwiftUI

tech

SwiftUIで使用できる色

SwiftUIでは、
SwiftUIのColor

Color.orange

UIKitでのUIColor

Color(UIColor.systemOrange)

などを使って色を指定できます。

各値の数値を指定して、好きな色を作ることもできます。

//RGBと不透明度を指定
Color(red: 1.0, green: 0.58, blue: 0.0, opacity: 1.0)

//グレースケールと不透明度を指定
Color(white: 0.5, opacity: 1.0)

定義されている色を使用するメリット

先述したように色を自分で作ることもできますが、

Color.orange

などのように、基本的な色は定義されています。
定義されている色を使用することでライトモード、ダークモード、アクセシビリティの状態に応じて、自動的に最適な色に変化させることができます。

Name	Default	Accessible
.orange	red: 1.0, green: 0.58, blue: 0.0, opacity: 1.0	red: 0.79, green: 0.2, blue: 0.0, opacity: 1.0

またUIColorはApple純正のコンポーネントに使われている色を指定することができ、
SwiftUIにはない^[1]SearchBarなどを自作したい場合などに、純正とまったく同じ色に指定できます。

色の見本は、ライトモードの場合、白い背景に黒文字で"黒文字"と書かれた上に色のViewが乗っています。
ダークモードはその逆です。

Light	Dark

黒文字, 白文字などの文字が見えている場合は、色に透明度があるということです。
色の見本の下に"red: 0.0, green: 0.0, blue: 0.0, opacity: 0.0"や"white: 0.0, opacity: 0.0"と書かれているものは、背景の色を含めない色そのものの構成要素です。
表記方法にブレがある理由は、Appleの色の構造体に完全に一致させているためです。

: Color

Standard colors

Name	Light	Dark
.black	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0
.blue	red: 0.0, green: 0.48, blue: 1.0, opacity: 1.0	red: 0.04, green: 0.52, blue: 1.0, opacity: 1.0
.brown	red: 0.64, green: 0.52, blue: 0.37, opacity: 1.0	red: 0.67, green: 0.56, blue: 0.41, opacity: 1.0
.clear	red: 0.0, green: 0.0, blue: 0.0, opacity: 0.0	red: 0.0, green: 0.0, blue: 0.0, opacity: 0.0
.cyan	red: 0.2, green: 0.68, blue: 0.9, opacity: 1.0	red: 0.39, green: 0.82, blue: 1.0, opacity: 1.0
.gray	red: 0.56, green: 0.56, blue: 0.58, opacity: 1.0	red: 0.56, green: 0.56, blue: 0.58, opacity: 1.0
.green	red: 0.2, green: 0.78, blue: 0.35, opacity: 1.0	red: 0.19, green: 0.82, blue: 0.35, opacity: 1.0
.indigo	red: 0.35, green: 0.34, blue: 0.84, opacity: 1.0	red: 0.37, green: 0.36, blue: 0.9, opacity: 1.0
.mint	red: 0.0, green: 0.78, blue: 0.75, opacity: 1.0	red: 0.39, green: 0.9, blue: 0.89, opacity: 1.0
.orange	red: 1.0, green: 0.58, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.62, blue: 0.04, opacity: 1.0
.pink	red: 1.0, green: 0.18, blue: 0.33, opacity: 1.0	red: 1.0, green: 0.22, blue: 0.37, opacity: 1.0
.purple	red: 0.69, green: 0.32, blue: 0.87, opacity: 1.0	red: 0.75, green: 0.35, blue: 0.95, opacity: 1.0
.red	red: 1.0, green: 0.23, blue: 0.19, opacity: 1.0	red: 1.0, green: 0.27, blue: 0.23, opacity: 1.0
.teal	red: 0.19, green: 0.69, blue: 0.78, opacity: 1.0	red: 0.25, green: 0.78, blue: 0.88, opacity: 1.0
.white	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0
.yellow	red: 1.0, green: 0.8, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.84, blue: 0.04, opacity: 1.0

Semantic colors

Name	Light	Dark
.accentColor	red: 0.0, green: 0.48, blue: 1.0, opacity: 1.0	red: 0.04, green: 0.52, blue: 1.0, opacity: 1.0
.primary	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0
.secondary	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.6	red: 0.92, green: 0.92, blue: 0.96, opacity: 0.6

: UIColor

UI element colors

Label colors

Name	Light	Dark
.label	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0
.secondaryLabel	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.6	red: 0.92, green: 0.92, blue: 0.96, opacity: 0.6
.tertiaryLabel	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.3	red: 0.92, green: 0.92, blue: 0.96, opacity: 0.3
.quaternaryLabel	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.18	red: 0.46, green: 0.46, blue: 0.5, opacity: 0.18

Fill colors

Name	Light	Dark
.systemFill	red: 0.47, green: 0.47, blue: 0.5, opacity: 0.2	red: 0.47, green: 0.47, blue: 0.5, opacity: 0.36
.secondarySystemFill	red: 0.47, green: 0.47, blue: 0.5, opacity: 0.16	red: 0.47, green: 0.47, blue: 0.5, opacity: 0.32
.tertiarySystemFill	red: 0.46, green: 0.46, blue: 0.5, opacity: 0.12	red: 0.46, green: 0.46, blue: 0.5, opacity: 0.24
.quaternarySystemFill	red: 0.45, green: 0.45, blue: 0.5, opacity: 0.08	red: 0.46, green: 0.46, blue: 0.5, opacity: 0.18

Text colors

Name	Light	Dark
.placeholderText	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.3	red: 0.92, green: 0.92, blue: 0.96, opacity: 0.3

Tint color

Name	Light	Dark
.tintColor	red: 0.0, green: 0.48, blue: 1.0, opacity: 1.0	red: 0.04, green: 0.52, blue: 1.0, opacity: 1.0

Standard content background colors

Name	Light	Dark
.systemBackground	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0
.secondarySystemBackground	red: 0.95, green: 0.95, blue: 0.97, opacity: 1.0	red: 0.11, green: 0.11, blue: 0.12, opacity: 1.0
.tertiarySystemBackground	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0	red: 0.17, green: 0.17, blue: 0.18, opacity: 1.0

Grouped content background colors

Name	Light	Dark
.systemGroupedBackground	red: 0.95, green: 0.95, blue: 0.97, opacity: 1.0	red: 0.0, green: 0.0, blue: 0.0, opacity: 1.0
.secondarySystemGroupedBackground	red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0	red: 0.11, green: 0.11, blue: 0.12, opacity: 1.0
.tertiarySystemGroupedBackground	red: 0.95, green: 0.95, blue: 0.97, opacity: 1.0	red: 0.17, green: 0.17, blue: 0.18, opacity: 1.0

Separator colors

Name	Light	Dark
.separator	red: 0.24, green: 0.24, blue: 0.26, opacity: 0.29	red: 0.33, green: 0.33, blue: 0.35, opacity: 0.6
.opaqueSeparator	red: 0.78, green: 0.78, blue: 0.78, opacity: 1.0	red: 0.22, green: 0.22, blue: 0.23, opacity: 1.0

Link color

Name	Light	Dark
.link	red: 0.0, green: 0.48, blue: 1.0, opacity: 1.0	red: 0.04, green: 0.52, blue: 1.0, opacity: 1.0

Nonadaptable colors

Name	Light	Dark
.darkText	white: 0.0, opacity: 1.0	white: 0.0, opacity: 1.0
.lightText	white: 1.0, opacity: 0.6	white: 1.0, opacity: 0.6

Standard colors

Adaptable colors

Name	Light	Dark
.systemBlue	red: 0.0, green: 0.48, blue: 1.0, opacity: 1.0	red: 0.04, green: 0.52, blue: 1.0, opacity: 1.0
.systemBrown	red: 0.64, green: 0.52, blue: 0.37, opacity: 1.0	red: 0.67, green: 0.56, blue: 0.41, opacity: 1.0
.systemCyan	red: 0.2, green: 0.68, blue: 0.9, opacity: 1.0	red: 0.39, green: 0.82, blue: 1.0, opacity: 1.0
.systemGreen	red: 0.2, green: 0.78, blue: 0.35, opacity: 1.0	red: 0.19, green: 0.82, blue: 0.35, opacity: 1.0
.systemIndigo	red: 0.35, green: 0.34, blue: 0.84, opacity: 1.0	red: 0.37, green: 0.36, blue: 0.9, opacity: 1.0
.systemMint	red: 0.0, green: 0.78, blue: 0.75, opacity: 1.0	red: 0.39, green: 0.9, blue: 0.89, opacity: 1.0
.systemOrange	red: 1.0, green: 0.58, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.62, blue: 0.04, opacity: 1.0
.systemPink	red: 1.0, green: 0.18, blue: 0.33, opacity: 1.0	red: 1.0, green: 0.22, blue: 0.37, opacity: 1.0
.systemPurple	red: 0.69, green: 0.32, blue: 0.87, opacity: 1.0	red: 0.75, green: 0.35, blue: 0.95, opacity: 1.0
.systemRed	red: 1.0, green: 0.23, blue: 0.19, opacity: 1.0	red: 1.0, green: 0.27, blue: 0.23, opacity: 1.0
.systemTeal	red: 0.19, green: 0.69, blue: 0.78, opacity: 1.0	red: 0.25, green: 0.78, blue: 0.88, opacity: 1.0
.systemYellow	red: 1.0, green: 0.8, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.84, blue: 0.04, opacity: 1.0

Adaptable gray colors

Name	Light	Dark
.systemGray	red: 0.56, green: 0.56, blue: 0.58, opacity: 1.0	red: 0.95, green: 0.95, blue: 0.97, opacity: 1.0
.systemGray2	red: 0.68, green: 0.68, blue: 0.7, opacity: 1.0	red: 0.39, green: 0.39, blue: 0.4, opacity: 1.0
.systemGray3	red: 0.78, green: 0.78, blue: 0.8, opacity: 1.0	red: 0.28, green: 0.28, blue: 0.29, opacity: 1.0
.systemGray4	red: 0.82, green: 0.82, blue: 0.84, opacity: 1.0	red: 0.23, green: 0.23, blue: 0.24, opacity: 1.0
.systemGray5	red: 0.9, green: 0.9, blue: 0.92, opacity: 1.0	red: 0.17, green: 0.17, blue: 0.18, opacity: 1.0
.systemGray6	red: 0.95, green: 0.95, blue: 0.97, opacity: 1.0	red: 0.11, green: 0.11, blue: 0.12, opacity: 1.0

Transparent color

Name	Light	Dark
.clear	white: 0.0, opacity: 0.0	white: 0.0, opacity: 0.0

Fixed colors

Name	Light	Dark
.black	white: 0.0, opacity: 1.0	white: 0.0, opacity: 1.0
.blue	red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0	red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0
.brown	red: 0.6, green: 0.4, blue: 0.2, opacity: 1.0	red: 0.6, green: 0.4, blue: 0.2, opacity: 1.0
.cyan	red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0	red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0
.darkGray	white: 0.33, opacity: 1.0	white: 0.33, opacity: 1.0
.gray	white: 0.5, opacity: 1.0	white: 0.5, opacity: 1.0
.green	red: 0.0, green: 1.0, blue: 0.0, opacity: 1.0	red: 0.0, green: 1.0, blue: 0.0, opacity: 1.0
.lightGray	white: 0.67, opacity: 1.0	white: 0.67, opacity: 1.0
.magenta	red: 1.0, green: 0.0, blue: 1.0, opacity: 1.0	red: 1.0, green: 0.0, blue: 1.0, opacity: 1.0
.orange	red: 1.0, green: 0.5, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.5, blue: 0.0, opacity: 1.0
.purple	red: 0.5, green: 0.0, blue: 0.5, opacity: 1.0	red: 0.5, green: 0.0, blue: 0.5, opacity: 1.0
.red	red: 1.0, green: 0.0, blue: 0.0, opacity: 1.0	red: 1.0, green: 0.0, blue: 0.0, opacity: 1.0
.white	white: 1.0, opacity: 1.0	white: 1.0, opacity: 1.0
.yellow	red: 1.0, green: 1.0, blue: 0.0, opacity: 1.0	red: 1.0, green: 1.0, blue: 0.0, opacity: 1.0

: Material

Viewのbackgroundなどを、すりガラス風の見た目にできます。

Name	Light	Dark
.ultraThinMaterial
.thinMaterial
.regularMaterial
.thickMaterial
.ultraThickMaterial
.bar

色関連の便利そうなモノ

文字色をライトモードとダークモードで別の色を指定する方法

文字色をライトモードの時は赤色にダークモードの時は黄色にしています。

@Environment(\.colorScheme) private var colorScheme

var body: some View {
    VStack {
        Text("Hello, world!")
            .foregroundColor(colorScheme == .dark ? Color.yellow: Color.red)
    }
}

↓colorschemeについての説明

Color, UIColorから色の要素を求める関数

func getColorElements(_ color: UIColor) -> (red: CGFloat?, green: CGFloat?, blue: CGFloat?, white: CGFloat?, opacity: CGFloat) {
    let components = color.cgColor.components!

    if components.count == 4 {
        return (red: components[0], green: components[1], blue: components[2], white: nil, opacity: components[3])
    } else {
        return (red: nil, green: nil, blue: nil, white: components[0], opacity: components[1])
    }
}

RGB値の色の場合

print(getColorElements(.orange))
// ↓戻り値
// (red: Optional(1.0), green: Optional(0.5), blue: Optional(0.0), white: nil, opacity: 1.0)

グレースケール値の色の場合

print(getColorElements(.gray))
// ↓戻り値
// (red: nil, green: nil, blue: nil, white: Optional(0.5), opacity: 1.0)

"SwiftUIで使用できる色"を確認できるアプリ

この記事で紹介したすべてのColor, Materialを実機で確認できるアプリをGitHubに公開しました。
ライトモード、ダークモード時のより詳しいRGB値や、アクセシビリティモード時のRGB値も確認できます。

https://github.com/kame-08/ColorChart

脚注

NavigationViewの中には指定できますが、いろいろと制約があります。 ↩︎

SwiftUIで使用できる色

定義されている色を使用するメリット

: Color

Standard colors

Semantic colors

: UIColor

UI element colors

Label colors

Fill colors

Text colors

Tint color

Standard content background colors

Grouped content background colors

Separator colors

Link color

Nonadaptable colors

Standard colors

Adaptable colors

Adaptable gray colors

Transparent color

Fixed colors

: Material

色関連の便利そうなモノ

文字色をライトモードとダークモードで別の色を指定する方法

Color, UIColorから色の要素を求める関数

"SwiftUIで使用できる色"を確認できるアプリ

Discussion