--- title: "Standard Colors | Explore SwiftUI" description: "The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." canonical_url: "https://exploreswiftui.com/library/color/standard-colors" meta: author: "Explore SwiftUI" "og:description": "The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Standard%2BColors%2Cdescription_The%2BSwiftUI%2Bstandard%2Bcolors%2Ccategory_Color%2Cimage_~L2FwaS9pbWFnZXMvNy92YXJpYW50cy83NT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2NvbG9yL3N0YW5kYXJkLWNvbG9ycyI%2Cs_S2Ihkr2LqwNM-Z9x.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Standard Colors | Explore SwiftUI" "twitter:description": "The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Standard%2BColors%2Cdescription_The%2BSwiftUI%2Bstandard%2Bcolors%2Ccategory_Color%2Cimage_~L2FwaS9pbWFnZXMvNy92YXJpYW50cy83NT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L2NvbG9yL3N0YW5kYXJkLWNvbG9ycyI%2Cs_S2Ihkr2LqwNM-Z9x.png" "twitter:title": "Standard 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=7) # **Standard Colors** The SwiftUI standard colors ![Standard Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/7/variants/75?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 13.0+ iPadOS 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-standard-colors) ``` VStack { HStack { smallRect .foregroundStyle(.black) smallRect .foregroundStyle(.blue) smallRect .foregroundStyle(.brown) smallRect .foregroundStyle(.clear) } HStack { smallRect .foregroundStyle(.cyan) smallRect .foregroundStyle(.gray) smallRect .foregroundStyle(.green) smallRect .foregroundStyle(.indigo) } HStack { smallRect .foregroundStyle(.mint) smallRect .foregroundStyle(.orange) smallRect .foregroundStyle(.pink) smallRect .foregroundStyle(.purple) } HStack { smallRect .foregroundStyle(.red) smallRect .foregroundStyle(.teal) smallRect .foregroundStyle(.white) smallRect .foregroundStyle(.yellow) } } ``` ### **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/) ![Page Screen Sheet Size - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/144/variants/478?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Page Screen Sheet Size** On devices smaller than a page of paper, such as iPhone, Apple Watch, and 8" or 11" iPads, the sheet fills the entire height and, unlike the default sheet on iPad, the full width. On macOS, .page behaves like .fitted. ![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 ![AccessoryCircularCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/42/variants/412?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryCircularCapacityGaugeStyle** A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value ![TabsPickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/233/variants/182?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TabsPickerStyle** A picker style that presents options as segmented tabs. On macOS, this style produces a segmented picker with a visual treatment that distinguishes tab navigation from value selection. On iOS, tvOS, and visionOS, the visual appearance matches that of the standard standard .segmented style. On all supported platforms, VoiceOver announces options as tabs. ![Content Unavailable Search - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/1/variants/14?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Content Unavailable Search** A pre-built placeholder for empty search results ![Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/31/variants/339?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Styles** A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy ![Move Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/128/variants/361?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Move Disabled** Adds a condition for whether the view’s view hierarchy is movable. ![Button Border Shape - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/32/variants/179?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Border Shape** A shape used to draw a button’s border. ```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/standard-colors#webpage","@type":"WebPage","dateModified":"2025-05-31T17:51:44.968Z","datePublished":"2025-05-29T08:33:51.377Z","description":"The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Standard Colors","url":"https://exploreswiftui.com/library/color/standard-colors","breadcrumb":{"@id":"https://exploreswiftui.com/library/color/standard-colors#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/color/standard-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/standard-colors#article","dateModified":"2025-05-31T17:51:44.968Z","datePublished":"2025-05-29T08:33:51.377Z","description":"The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","headline":"Standard Colors","inLanguage":"en-US","name":"Standard Colors","thumbnailUrl":"https://exploreswiftui.com/api/images/7/variants/75?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/color/standard-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/standard-colors#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/color/standard-colors#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/color#Getting-standard-colors","codeSampleType":"full example","description":"The SwiftUI standard colors. Learn how to use Standard Colors in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Standard Colors SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"VStack {\n HStack {\n smallRect\n .foregroundStyle(.black)\n smallRect\n .foregroundStyle(.blue)\n smallRect\n .foregroundStyle(.brown)\n smallRect\n .foregroundStyle(.clear)\n }\n HStack {\n smallRect\n .foregroundStyle(.cyan)\n smallRect\n .foregroundStyle(.gray)\n smallRect\n .foregroundStyle(.green)\n smallRect\n .foregroundStyle(.indigo)\n }\n HStack {\n smallRect\n .foregroundStyle(.mint)\n smallRect\n .foregroundStyle(.orange)\n smallRect\n .foregroundStyle(.pink)\n smallRect\n .foregroundStyle(.purple)\n }\n HStack {\n smallRect\n .foregroundStyle(.red)\n smallRect\n .foregroundStyle(.teal)\n smallRect\n .foregroundStyle(.white)\n smallRect\n .foregroundStyle(.yellow)\n }\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Color"},{"@type":"Thing","name":"Standard Colors"}]},{"@id":"https://exploreswiftui.com/library/color/standard-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":"Standard Colors","item":"https://exploreswiftui.com/library/color/standard-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/7/variants/75?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/7/variants/75?v=1790073478842&r=2"}]} ```