原文链接：[SwiftUI]Color, UIColor, Materialの一覧

SwiftUIで使用できる色

SwiftUIでは、
SwiftUIのColor

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)

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

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

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

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にはない SearchBarなどを自作したい場合などに、純正とまったく同じ色に指定できます。

: 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!")
            .foregroundStyle(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値も確認できます。

github ColorChart