DEV Community

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

Posted on • Originally published at simplykyra.com

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 "Color(" which includes the RGB values

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 ".background(Color(red: 0.4192, green: 0.2358, blue: 0.3450))"

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!

Top comments (0)