There are tools that will help you choose a colors palette in a few seconds. You can also go to any of the resources below and find inspiration for your next project.
How to choose colors?
When choosing a color palette for your design, there are some factors to keep in mind.
- Color Theory: It is best to familiarize yourself with color theory. This will facilitate the process of selecting colors.
- Contrast: This is one of the most important aspects of design. Almost all design tools have plugins that help you check if your design passes the color test. There are many useful tools for working with colors in the Bookmarks section
- Color Psychology: Color psychology is a branch of science that studies colors and how different shades of color can evoke certain emotions. There’s a good Creative design blog article that talks about how colors are associated with people’s emotions.
- Overuse of colors: As a beginner, you can choose a main color and stick to it so that you don’t get overwhelmed by choosing multiple colors.
Tools for working with colors
There are several interesting programs that can be used to generate color palettes.
Adobe Colors
Adobe Colors lets you create color themes using a color wheel. It also gives you the ability to create color sets and gradients based on an image you can upload. Adobe Colors also has digital accessibility tools.
Paletton
In Paletton, you first select the desired scheme: mono (mono), complementary (complementary), triadic (triadic), tetrahedral (tetradic), analog (analogous), or accented analog (accented analog). Then, when you change one color on the color wheel, the others change accordingly.
Coolors
Coolors helps you create new color palettes, as well as choose from a variety of already provided ones.
Sip color app
Sip is a color picker that lets you organize and share colors. This app is available for macOS and iOS.
Inspiration
The resources provided are very helpful when it comes to finding inspiration.
Dribbble
Dribbble has many user interface layouts with different color schemes. It also allows you to sort the designs based on the selected color.
Icy Colors
Muzli Colors by InVision is a great tool when it comes to inspiration. In addition, it allows you to generate color schemes. Another great thing is that it will show you user interfaces that use the selected color palette.
Guiding principles of design
Apple and Google talk about colors in their guidelines. These guidelines can help designers create a color theme that works best for them.
iOS guidelines
Apple provides iOS guidelines for using colors for iOS apps.
Material Design
Material Design is an open source color system that has a lot of information about what colors to choose. They also provide a color picker to test palettes as well as contrast.
Nix Color
Nix Color is a cool piece of hardware that brings physical colors to your app. It scans the actual color and imports it into its mobile app. While it’s not 100% accurate, it does a pretty good job. So, if you’ve ever wanted to take a specific color out of a flower or any surface, this is the tool that will do the job.
How to choose colors from a photo
There are many exciting options for taking colors from our surroundings and using them in our designs. With Adobe Color, you can use your photos or images to extract their colors and create a palette. Let’s go to Adobe Color and drag the image.
You will notice that Adobe Color will scan the photo and suggest a color palette.
If you like the suggested color palette, you can save and publish it; otherwise, you can move the color palettes and choose the color you like. In our case, we will select a couple of different colors from the photo.
Now that we’re happy with our palette, let’s save it. Then add some tags, rename it Purple Lights DN and publish it to the Adobe Color Community if you like.
Click on the Research tab. In the search box, type Purple Lights DN to find the color palette.
Next, hover over the color palette and download the JPG version of the color palette. So we can load the JPEG into our Figma file to use as a reference.
Now press F to create a new bezel for the 44mm Apple Watch. The point is to use some colors from the color palette to create the background.
Then press O and create a 245×245 oval. Let’s add a radial gradient to it.
Change the colors to #2D038B. As for the second color, let’s change its opacity to 10%.
Let’s add some effects. Select the circle and add a layer blur with Blur 93.91.
Duplicate the oval. For the new oval, change the color to another color from the color palette. Below we have changed it to #CA267F.
Next, let’s place both circles inside the Apple Watch bezel, and you’ll see the effect we’ve created inside the bezel.
Finally, let’s place our logo in the frame. Be sure to center it vertically and horizontally.
Conclusion
When it comes to choosing colors for your app, it’s best to choose colors that reflect your brand. Color scheme can play a very important role in how users perceive your brand.
Addition info
Learn the basics of UI design with movies
Films as an art form have been widespread in our society long before people started studying visual design or just design as a discipline. The first film was released in 1888 under the title Roundhay Garden Scene. It was a short silent film (2 seconds) recorded by the French inventor Louis Leprince.
Since then, the world has experienced many revolutions, wars, inventions and pandemics. Each of these events in one way or another had a special impact on the film industry, making it what we know it today.
With the development of visual communication comes visual design. Since the word “design” actually refers to solving problems, and not just creating attractive artifacts, then each problem solving technique has a set of fundamental laws / principles / theories / formulas on the basis of which this method is applied. The same goes for visual design.
During the decades of cinema as a commercial industry, as well as art studies in colleges, people began to buy tickets for shows through digital interfaces on their devices. These devices needed to be made easier to use and learn, which was a challenge in itself. To solve this problem, a new design discipline emerged, namely user interface design.
Although this is not exactly the reason that led to the birth of an entirely new field of design. But it’s one of the many ways cinema and UI design connect. Let’s jump right into the basics of UI design using our favorite movies as an example.
Balance
This is a common thing that can be found in any stable design, unless it has been deliberately broken.
Balance can be understood as the distribution of the visual weight of objects, colors, textures and space. If there is a lot of content on the screen, it should be balanced to make the design look stable.
Symmetry is one way to achieve balance in visual design. Nature loves symmetry, and so do our eyes. Symmetrically balanced elements help reduce image noise and make it look familiar.
