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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay