logo

App Information

  1. Add your app's name.
  1. Choose your icon background color.
Image without caption
  1.  When you upload your app icon in a PNG format with a minimum size of 1024x1024, the platform will suggest a palette that will work with your app icon color theme. You can Click 'Apply' at this point.
Image without caption
This platform made it easy for you to pick the right palette with the right color design for your app icon. If you want to make your own color scheme, you must have knowledge of how colors work scientifically and how to choose the right colors for you.
Image without caption

App Theme

The app theme is where you control the design theme for both Android and iOS

Android Theme

You have here two choices, either Material Design 3 or Material Design 2:
  • Material Design 3: With its bright colors and simple shapes, it focuses on flat design. It focuses on depth through shadows and layers.
  • Material Design 2: Adds dynamic color, rounded features, and more ways to customize the look. The goal is to make it more flexible and easy to use.
Image without caption

iOS Theme

You have here two choices, either Modern Theme or Classic Theme:
  • Modern Theme: Smooth, simple, and up-to-date with the latest design trends, with rounded edges and flexible plans.
  • Classic Theme: Based on older versions of iOS, it uses more traditional iOS design features like sharper edges and a more structured layout.
Image without caption

Source Color

With Android and iOS, you can pick the Source Color of your app, which is a set of colors used in an app's design to create its visual identity. The choice of the source color is based on your corporate logo, app logo, or trademark color.
Source Color is a single color that is used to generate three main key colors: primary, secondary, and tertiary.
These three key colors create tonal palettes composed of tonal increments for each key color; therefore, the Color Scheme will be generated automatically! which are a group of key color tones assigned to specific roles that get mapped to components.
Image without caption
  1.  The user-generated (wallpaper-based) method is used to turn a source color into a color scheme.
  1.  The content-based method uses the same source color to make a color scheme. Take a look at how the tones (how light or dark) of some colors are changed to make them look more like the source picture.
  1.  Custom colors, like brand colors, are run through the program one at a time, making a scheme that is unique to the brand.
Image without caption

Advanced Settings

If you need a specific primary, secondary or tertiary color key, you should first understand what these keys mean. First, let's talk about the color wheel and color theory to get a better sense of what colors are before we talk about PrimarySecondary, and Tertiary colors
Color theory combines art and science in a useful way to help people choose colors that go well together.
Image without caption
The color wheel has 12 main colors. On the color wheel, these are the colors: orange, purple, red, blue, yellow, green, mauve, turquoise, and chartreuse. There are three groups on the color wheel: primary colors, secondary colors, and tertiary colors. You can mix two colors to make a new color. This is called Color Theory.

Concept of Primary Colors

The idea of basic colors has been around for a long time. The choice of primary colors has changed over time in a number of areas that study color. Philosophers, color order systems, art historians, and scientists who study the physics of light and how we see colors have all written about basic colors.
Image without caption
Why we use primary colors?
A primary color is one of the basic colors on the color wheel. These colors can't be generated by mixing colors together; they can be combined to produce other color shades, which means that mixing two primary colors generates a Secondary Color.
Image without caption

Concept of Secondary Colors

There are secondary colors in between the primary colors. The final shade of the secondary colors will depend on how many primary colors you use. Any two primary colors can be mixed together to make a new color, which is what a secondary color is.
Secondary colors are generated by mixing two primary colors:
  • Purple (red + blue)
  • Orange (red + yellow)
  • Green (yellow + blue)
Image without caption
Why we use secondary colors?
The secondary color is used to draw attention to the primary color, which is still the main color in design. Mixing a primary color with a secondary color creates a Tertiary color.
Image without caption

Concept of Tertiary Colors

When you mix full saturation of one primary color with half saturation of another primary color and none of a third primary color, you get a tertiary color. Tertiary colors are made when secondary colors like orange, purple, and green are mixed in different amounts. There are six third-level colors. Additionally, you can make them by mixing all three primary colors.
Tertiary colors are AmberVermillionMagentaVioletTeal, and Chartreuse.
Why we use tertiary colors?
The tertiary colors are often used as complementary colors to emphasize the main color, which is helpful because it helps designers mix the colors they want better.
Image without caption

Concept of complementary Colors

Complementary colors can help you choose the right key colors. These are the colors that lie opposite each other on the color wheel.
Complementary colors
  • Purple-Yellow: Purple is complementary to Yellow [1–1]
  • Orange-Blue: Orange is complementary to Blue [2–2]
  • Red-Green: Green is complementary to Red [3–3]

How do you select key colors for your app?

  • Selecting an appropriate scheme can enhance your brand identity.
  • Consider the purpose and mood your app aims for, your brand identity, and your visuals.
  • Conduct user research to determine your color scheme.
  • If the primary color of your company's logo is green, it will serve as your primary key color, generating various shades. Consequently, you can maintain a single palette while still ensuring distinct elements stand out, and the same goes for secondary and tertiary key colors.
Image without caption
Here's where you customize your key colors:
Image without caption
The final color scheme will look like this:
You can get both light and dark themes through a single set of color roles. The dark theme colors are also given instantly.
Light Theme
Light Theme
Dark Theme
Dark Theme
Note that the color system is built on accessible color pairings. These color pairs provide an accessible minimum 3:1 contrast.

Examples on color schemes in your app

1. Android Light & dark Themes:
Image without caption
  • iOS Light & dark Themes
Image without caption
Image without caption
  • Automatic dark theme
Image without caption
2. Buttons:
Image without caption
  • For light and dark schemes, filled button color parts are used:
  1. Primary
  1. On primary
  1. On primary
Image without caption
  • For light and dark schemes, filled icon button color parts are used:
  1. Primary
  1. On primary
Image without caption
  • The color mappings are the same for FAB, small FAB, and big FAB. The primary FAB color parts that are used for light and dark schemes are:
  1. Primary container
  1. On primary container