Copy the code below and paste it in place of the code in the stylesheet in order to make these changes affect all your pages.

{% color "primary" color="#085bd6", export_to_template_context=True %} /* change your site's color here */

{% color "secondary" color="#085bd6", export_to_template_context=True %} /* change your site's secondary color here */

{% set baseFontFamily = "Montserrat" %} /* Add the font family you wish to use. You may need to import it above. */

{% set headerFontFamily = "Montserrat" %} /* This affects only headers on the site. Add the font family you wish to use. You may need to import it above. */

{% set textColor = "#565656" %} /* This sets the universal color of dark text on the site */

{% set boxContainerWidth = "nonepx" %} /* 'none' makes your site full width. Match the 'pageCenter' value to make it boxed. */

{% set pageCenter = "1200px" %} /* This sets the width of the website */

{% set headerType = "static" %} /* To make this a fixed header, change the value to "fixed" - otherwise, set it to "static" */

{% set lightGreyColor = "#f7f7f7" %} /* This affects all grey background sections */

{% set baseFontWeight = "300" %} /* More than likely, you will use one of these values (higher = bolder): 300, 400, 700, 900 */

{% set headerFontWeight = "300" %} /* For Headers; More than likely, you will use one of these values (higher = bolder): 300, 400, 700, 900 */

{% set buttonRadius = '40px' %} /* "0" for square edges, "10px" for rounded edges, "40px" for pill shape; This will change all buttons */

After you have updated your stylesheet, make sure you turn this module off

A Quick Guide To Find The Perfect Colors For Your App

by Innovimobile Administrator on July 10, 2018

Color is important in our everyday lives.  A color scheme that clashes can ruin your concept, but if you follow our reference guide, you'll be sure not to make those mistakes.

A Brief History Lesson

People look at colors in different ways. You might see the color blue one way, when someone sees it lighter and someone sees it darker. Colors are the light waves that are visible to the naked eye. The visible spectrum runs from long-wave red all the way through short-wave violet. Infrared and ultraviolet bookend the narrow cross section of what we can see with our naked eye.

04-02_colorwheel

Color receptors in our eyes—often called cones and rod, read those light waves. Cones interpret color, and there are three different types of cones all tuned to different areas of the visible spectrum. Long-wave cones are stimulated by red light, medium-wave cones are stimulated by green light and short-wave cones are stimulated by blue light. Rods are used more for interpreting the intensity of light.

Modern Day

Most modern screens today use additive color mixing which can be found on your TV, smartphones and tablets. As kids we were taught about the primary colors like and mixing red, yellow and blue paint. When we produce colors from a light source like our iPhone we use red, green and blue (RGB) to correspond with the short, medium and long waves.

The Do’s & Don’ts

We all want an app that is visually pleasing to the eye but picking the wrong colors can have a negative impact. An example would be using a bold color (we’re talking neon pink, yellow or orange. yikes!) Pick a bold color to use at a minimum.

Avoid color mudding. Color combination is defined as hue, chroma and lightness. Hue is a color perceived to fall on the color wheel. Chroma is the purity of a color–low chroma reads dull and gray and high chroma reads sharp and vibrant. Lightness is the amount of light produced from black to white.

You don’t want to have a hue gradient that goes from red to cyan, you will create a dull grey color in the middle and you don’t want that.

Do use appropriate contrast. Believe it or not, a lot of people today are color blind. Design for eyes that have a full range of color with a minimum level of contrast. A great tip- view everything in grayscale.

Do ask for people's opinions. Just because you love one design, doesn’t mean everyone else will. Instead come up with a few different color designs and ask people who might be your potential market. Get good and bad feedback. Criticism is super important, don’t take offense from it! Instead bounce ideas off of other people, including your peers.  

Do choose colors appropriately. Once you’ve played around with different color pallets  it’s time to chose your color scheme for your app. If you created an app for relaxation or meditation you probably aren’t going to use yellows or reds. If you created more of a social app, keep the colors neutral. The colors should be appealing for all target markets and always keep in mind age, sex and location.  

Finding the perfect color for your app may be stressful, but we hope this quick reference guide answered any questions you may have! Be sure to check out our other blog posts for other information.

Topics: Design, Icon, marketing, Graphic Design