--- title: "Gauge Colors | Explore SwiftUI" description: "Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples." canonical_url: "https://exploreswiftui.com/library/gauge/gauge-colors" meta: author: "Explore SwiftUI" "og:description": "Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Gauge%2BColors%2Cdescription_Customizing%2Bthe%2Bcolors%2Bof%2Bdifferent%2Bstyles%2Bwith%2Bminimal%2Beffort%2Ccategory_Gauge%2Cimage_~L2FwaS9pbWFnZXMvNDgvdmFyaWFudHMvMjYxP3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L2dhdWdlL2dhdWdlLWNvbG9ycyI%2Cs_iCm7y1tFyvpXfKtI.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Gauge Colors | Explore SwiftUI" "twitter:description": "Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Gauge%2BColors%2Cdescription_Customizing%2Bthe%2Bcolors%2Bof%2Bdifferent%2Bstyles%2Bwith%2Bminimal%2Beffort%2Ccategory_Gauge%2Cimage_~L2FwaS9pbWFnZXMvNDgvdmFyaWFudHMvMjYxP3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L2dhdWdlL2dhdWdlLWNvbG9ycyI%2Cs_iCm7y1tFyvpXfKtI.png" "twitter:title": "Gauge 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=48) # **Gauge Colors** Customizing the colors of different styles with minimal effort ![Gauge Colors - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/48/variants/261?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 7.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs](https://developer.apple.com/documentation/swiftui/gauge) ``` @State private var currentValue = 0.42 var body: some View { VStack { HStack { Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") .foregroundColor(.indigo) } minimumValueLabel: { Text("0") .foregroundColor(.mint) } maximumValueLabel: { Text("100") .foregroundColor(.blue) } .gaugeStyle(.accessoryCircular) Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("100") } .gaugeStyle(.accessoryCircularCapacity) } Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("100") } .gaugeStyle(.linearCapacity) Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("100") } .gaugeStyle(.accessoryLinear) Gauge(value: currentValue) { Text("Foo") } currentValueLabel: { Text("42") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("100") } .gaugeStyle(.accessoryLinearCapacity) } .tint(Gradient(colors: [.green, .orange, .red])) .foregroundStyle(.brown) } ``` ### **Found an issue or have a suggestion?** Created: June 3, 2025Updated: December 27, 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 Gauge Components ** [**View all **](https://exploreswiftui.com/library/gauge) ![CircularGaugeStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/47/variants/263?v=1790073478842&r=2&w=412&q=75&f=webp) ### **CircularGaugeStyle** A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value ![ 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 ![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 ![AccessoryLinearGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/44/variants/253?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryLinearGaugeStyle** A gauge style that displays 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 ![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 ![AccessoryCircularGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/41/variants/219?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryCircularGaugeStyle** A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value ![Min Max Current Value Gauge - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/40/variants/231?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Min Max Current Value Gauge** Creates a gauge showing a value within a range and describes the gauge’s current, minimum, and maximum values ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Button Tint - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/34/variants/408?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Button Tint** Sets the buttons tint color ![App Store Overlay - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/224/variants/269?v=1790073478842&r=2&w=412&q=75&f=webp) ### **App Store Overlay** Presents a StoreKit overlay when a given condition is true. ![Sheet Corner Radius - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/142/variants/468?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Sheet Corner Radius** Requests that the presentation have a specific corner radius. ![Toolbar Title Alignment - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/258/variants/2111?v=1793542963212&r=2&w=412&q=75&f=webp) ### **Toolbar Title Alignment** Sets the preferred alignment of the navigation bar’s title. The navigation bar resolves the alignment of its title automatically based on context, and toolbar roles. Use this modifier to override that resolution. ![Navigation Container Background - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/172/variants/529?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Container Background** Sets the container background of the enclosing container using a view. ![CompactMenuControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/54/variants/400?v=1790073478842&r=2&w=412&q=75&f=webp) ### **CompactMenuControlGroupStyle** A control group style that presents its content as a compact menu when the user presses the control, or as a submenu when nested within a larger menu ![HelpLink - macOS - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/77/variants/30?v=1790073478842&r=2&w=412&q=75&f=webp) ### **HelpLink** A button with a standard appearance that opens app-specific help documentation ![ProgressView - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/78/variants/65?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ProgressView** The different ProgressView initializers ```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/gauge/gauge-colors#webpage","@type":"WebPage","dateModified":"2025-12-27T19:14:19.173Z","datePublished":"2025-06-03T19:51:25.491Z","description":"Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples.","name":"Gauge Colors","url":"https://exploreswiftui.com/library/gauge/gauge-colors","breadcrumb":{"@id":"https://exploreswiftui.com/library/gauge/gauge-colors#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/gauge/gauge-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/gauge/gauge-colors#article","dateModified":"2025-12-27T19:14:19.173Z","datePublished":"2025-06-03T19:51:25.491Z","description":"Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples.","headline":"Gauge Colors","inLanguage":"en-US","name":"Gauge Colors","thumbnailUrl":"https://exploreswiftui.com/api/images/48/variants/261?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/gauge/gauge-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/gauge/gauge-colors#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/gauge/gauge-colors#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/gauge","codeSampleType":"full example","description":"Customizing the colors of different styles with minimal effort. Learn how to use Gauge Colors in SwiftUI with visual code examples.","name":"Gauge Colors SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"@State private var currentValue = 0.42\n\nvar body: some View {\n VStack {\n HStack {\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n .foregroundColor(.indigo)\n } minimumValueLabel: {\n Text(\"0\")\n .foregroundColor(.mint)\n } maximumValueLabel: {\n Text(\"100\")\n .foregroundColor(.blue)\n }\n .gaugeStyle(.accessoryCircular)\n\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n }\n .gaugeStyle(.accessoryCircularCapacity)\n }\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n }\n .gaugeStyle(.linearCapacity)\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n }\n .gaugeStyle(.accessoryLinear)\n\n Gauge(value: currentValue) {\n Text(\"Foo\")\n } currentValueLabel: {\n Text(\"42\")\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n }\n .gaugeStyle(.accessoryLinearCapacity)\n }\n .tint(Gradient(colors: [.green, .orange, .red]))\n .foregroundStyle(.brown)\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Gauge"},{"@type":"Thing","name":"Gauge Colors"}]},{"@id":"https://exploreswiftui.com/library/gauge/gauge-colors#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Gauge","item":"https://exploreswiftui.com/library/gauge","position":2},{"@type":"ListItem","name":"Gauge Colors","item":"https://exploreswiftui.com/library/gauge/gauge-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/48/variants/261?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/48/variants/261?v=1790073478842&r=2"}]} ```