---
title: "Semantic Colors | Explore SwiftUI"
description: "Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS."
canonical_url: "https://exploreswiftui.com/library/color/semantic-colors"
meta:
  author: "Explore SwiftUI"
  "og:description": "Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS."
  "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Semantic%2BColors%2Cdescription_Explore%2Bvisually%2Bwith%2Bcode%2Bexamples%2Ccategory_Color%2Cimage_~L2FwaS9pbWFnZXMvOC92YXJpYW50cy81MT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2NvbG9yL3NlbWFudGljLWNvbG9ycyI%2Cs_vu9HtmkzwNRgkEzi.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Semantic Colors | Explore SwiftUI"
  "twitter:description": "Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS."
  "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Semantic%2BColors%2Cdescription_Explore%2Bvisually%2Bwith%2Bcode%2Bexamples%2Ccategory_Color%2Cimage_~L2FwaS9pbWFnZXMvOC92YXJpYW50cy81MT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2NvbG9yL3NlbWFudGljLWNvbG9ycyI%2Cs_vu9HtmkzwNRgkEzi.png"
  "twitter:title": "Semantic Colors | Explore SwiftUI"
---

> Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt)

**Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=8)

# **Semantic Colors**

![Semantic Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/8/variants/51?v=1790073478842&r=2&w=800&q=80&f=webp)

### **Platform Compatibility**

iOS 13.0.+ macOS 10.15+ watchOS 6.0+ tvOS 13.0+ visionOS 1.0+

### **Tags**

### **SwiftUI Code**

[ Docs](https://developer.apple.com/documentation/swiftui/color#Getting-semantic-colors)

```
Text("Primary Text Color")
  .foregroundStyle(.primary)
Text("Secondary Text Color")
  .foregroundStyle(.secondary)
```

### **Found an issue or have a suggestion?**

Created: May 29, 2025Updated: May 31, 2025

![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png)

**Connect Wizard**

**Unlock insights App Store Connect doesn’t show you.**

[** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8)

### **More Color Components **

[**View all **](https://exploreswiftui.com/library/color)

![Color Opacity - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/16/variants/124?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Color Opacity**

The Color opacity modifier

![Color Gradient - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/15/variants/143?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Color Gradient**

The Color gradient modifier

![UIKit Separator Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/14/variants/57?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Separator Colors**

The UIKit separator colors that are also used in other components, such as the TextField

![UIKit Content Background colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/13/variants/53?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Content Background colors**

The UIKit colors that are also used in other components like in List and GroupBox

![UIKit Text Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/12/variants/55?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Text Colors**

The UIKit text colors that are also used in other components, such as the TextField

![UIKit Fill Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/11/variants/43?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Fill Colors**

![UIKit Label Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/10/variants/45?v=1790073478842&r=2&w=412&q=75&f=webp)

### **UIKit Label Colors**

![Color Variants - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/9/variants/209?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Color Variants**

HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles

### **Explore Other Components **

[**Browse all **](https://exploreswiftui.com/)

![Store View - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/213/variants/651?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Store View**

Creates a view to load and merchandise a collection of products from the App Store using product identifiers. Internally, ProductView is used, and therefore productViewStyle can also be applied here.

![InlinePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/179/variants/574?v=1790073478842&r=2&w=412&q=75&f=webp)

### **InlinePickerStyle**

A PickerStyle where each option is displayed inline with other views in the current container.

![Glass Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/87/variants/314?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Glass Button Styles**

A button style that applies glass border artwork based on the button’s context

![Toolbar Item Visibility Priority - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/238/variants/733?v=1792389091475&r=2&w=412&q=75&f=webp)

### **Toolbar Item Visibility Priority**

Defines the visibility priority for a toolbar item.

![ LinearGaugeStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/46/variants/264?v=1790073478842&r=2&w=412&q=75&f=webp)

### **LinearGaugeStyle**

A gauge style that displays a bar with a marker that appears at a point along the bar to indicate the gauge’s current value

![LinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/43/variants/267?v=1790073478842&r=2&w=412&q=75&f=webp)

### **LinearCapacityGaugeStyle**

A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases

![AccessoryLinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/45/variants/257?v=1790073478842&r=2&w=412&q=75&f=webp)

### **AccessoryLinearCapacityGaugeStyle**

A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases

![ToolbarItem Shared Background Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/92/variants/295?v=1790073478842&r=2&w=412&q=75&f=webp)

### **ToolbarItem Shared Background Visibility**

Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/color/semantic-colors#webpage","@type":"WebPage","dateModified":"2025-05-31T17:52:54.230Z","datePublished":"2025-05-29T08:49:04.933Z","description":"Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Semantic Colors","url":"https://exploreswiftui.com/library/color/semantic-colors","breadcrumb":{"@id":"https://exploreswiftui.com/library/color/semantic-colors#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/color/semantic-colors"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/color/semantic-colors#article","dateModified":"2025-05-31T17:52:54.230Z","datePublished":"2025-05-29T08:49:04.933Z","description":"Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS.","headline":"Semantic Colors","inLanguage":"en-US","name":"Semantic Colors","thumbnailUrl":"https://exploreswiftui.com/api/images/8/variants/51?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/color/semantic-colors","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/color/semantic-colors#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/color/semantic-colors#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/color#Getting-semantic-colors","codeSampleType":"full example","description":"Learn how to use Semantic Colors in SwiftUI. View code examples and platform compatibility for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Semantic Colors SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"Text(\"Primary Text Color\")\n  .foregroundStyle(.primary)\nText(\"Secondary Text Color\")\n  .foregroundStyle(.secondary)","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Color"},{"@type":"Thing","name":"Semantic Colors"}]},{"@id":"https://exploreswiftui.com/library/color/semantic-colors#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Color","item":"https://exploreswiftui.com/library/color","position":2},{"@type":"ListItem","name":"Semantic Colors","item":"https://exploreswiftui.com/library/color/semantic-colors","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/8/variants/51?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/8/variants/51?v=1790073478842&r=2"}]}
```