DEV Community

Cover image for How I Easily Used My Custom Color in My SwiftUI Project
Kyra
Kyra

Posted on • Edited on • Originally published at simplykyra.com

2 1 1 1 1

How I Easily Used My Custom Color in My SwiftUI Project

I just wanted to start out by saying that this is an abridged version of my original published version from February 9, 2022 that you can find on my website here.


A while back I decided to procrastinate a coding conundrum by finally figuring out how to bring one of my favorite colors to my SwiftUI project using the SwiftUI.Color struct. It was so simple to do!

I started out by seeing what information I'd need about the color by typing in Color( and looking through the auto-complete recommendations within the resulting popup. From here I knew I needed the decimal number version of each RGB value.

Image shows the dropdown showing how to complete the text

With that known I next went to the Color Hex website and looked up my color. I then scrolled down to find the percentage used of red, green, and blue to create this color.

Screenshot of the Color Hex page for #60364f

In the above example the color #60364f is shown in the bottom left grid to be made of 41.92% red, 23.58% green, and 34.50% blue. Once you convert the percentages into decimal and insert them into the above Color struct it becomes Color(red: 0.4192, green: 0.2358, blue: 0.3450). In the following example I used both the purple color and another custom color, following the same steps, in the background modifier for two different controls.

Image shows the example and source code for

I later turned my custom color into a shared variable that lives in one spot in my code. This way if I ever rebrand I can easily change one line and I'm good to go in every spot it's used.

I hope this post helps you out and if you want more information about it the full version from February 9, 2022 can be found here. Hope you're having a great day!

Have a great day!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools