🎨
[SwiftUI]Color, UIColor, Materialの一覧
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などを自作したい場合などに、純正とまったく同じ色に指定できます。
: 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値も確認できます。
-
NavigationViewの中には指定できますが、いろいろと制約があります。 ↩︎
Discussion