SwiftUI 系统颜色表查询

转载 2025-03-17

在使用 SwiftUI 开发时，使用系统预置的颜色无论是在 UI 效果还是在可维护性上都是比较推荐的。这里原文转载一篇日语文章，展示了系统颜色值的一览表方便设计开发时查询取用。文章最后还提供了一个 Demo App 可用使用。

原文链接：[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

版权信息：本文为转载内容。

拥抱 Swift 和 SwiftUI
SwiftUI Menu checkmark 文本对齐
 SwiftUI List selection 的使用提示
 Swift 从 ObservableObject 迁移到 @Observable 的再讨论
 Swift并发编程 - 理解 async 和 await

发表留言

您的电子邮箱地址不会被公开，必填项已用*标注。发布的留言可能不会立即公开展示，请耐心等待审核通过。

SwiftUI 系统颜色表查询

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で使用できる色"を確認できるアプリ

相关文章：

留言板

发表留言

联系博主

搜索文章

文章分类

文章标签

文章归档