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!

Heroku

Tired of jumping between terminals, dashboards, and code?

Check out this demo showcasing how tools like Cursor can connect to Heroku through the MCP, letting you trigger actions like deployments, scaling, or provisioning—all without leaving your editor.

Learn More

Top comments (0)

Coherence image

Authenticated AI Chat, Just 15 Lines of Code

Multi-modal streaming chat (including charts) with your existing backend data. Choose from 10+ models from all leading providers. Total control and visibility.

Learn more