SwiftUI 系统颜色表查询 - 看川博客

看川博客

iOS 越狱隐藏：从 Dopamine 到 RootHide 我被 AI "蒸馏" 了 - 看川博客距离上线只差一个软件著作权证书 - 看川博客开发简报(2)：开发者需要先进的工具 - 看川博客比越狱更棘手！iOS vPhone 虚拟机成黑灰产新温床 - 看川博客开发简报(1)：拥抱 AI、别无选择 - 看川博客糟糕！我的 OpenClaw 中了病毒 - 看川博客今天你用了多少词元？ - 看川博客闪忆 LiveMem：把回忆做成会动的壁纸 - 看川博客 Swift 从 ObservableObject 迁移到 @Observable 的再讨论视频帧截图（Video2Frame）专业视频抽帧截图工具 - 看川博客录音记事本 - 专业安全的录音工具 App - 看川博客 Swift 从 ObservableObject 迁移到 @Observable 从 Apple Distribution Managed 证书提取备案所需公钥和 SHA1 条码助手 iOS 2.0.0 升级指南 - 看川博客 SwiftUI Menu checkmark 文本对齐 - 看川博客 C++ RTTI 信息对二进制体积和安全性的影响 - 看川博客读马伯庸《长安的荔枝》 - 看川博客 SwiftUI List selection 的使用提示 - 看川博客 PHP json_encode UTF-8 中文编码问题 - 看川博客我为什么重新运营微信公众号 - 看川博客使用 TrollStore(巨魔) 在非越狱设备上安装任意 IPA - 看川博客条码助手小程序更新 - 看川博客 iOS 18 中 libdyld.dylib/dyld 的一些变化涨粉神器？解密“抖音黑科技”云端商城 - 看川博客

2025-03-17 · via 看川博客

在使用 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

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

看川博客

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