Nice to meet you, color! Color terminology explained.

Published On Oct 7 , 2021
Nice to meet you, color! Color terminology explained.

Nice to meet you, color! Color terminology explained.

Building on our article “Hello, Color!”, published last week, we’re going to cover some common color terminology. This will help you have conversations with team members and designers when you’re creating the look and feel of your app. Here we go with “color terminology explained”!

Color terminology explained

1. Color basics

The color wheel (the graphic on the right) is used in classical color theory based on painting and the color spectrum of the rainbow. It’s depicted in a circular shape which easily displays all twelve colors in the visible color spectrum. The color wheel is very helpful for understanding the relationships between colors and for creating harmonious color combinations and palettes. 

Hue is essentially the name of a pure color we use as a starting place to then create various shades, tints, and tones. When you choose a color from the color wheel, like blue-violet, or green, you’re choosing a hue. 

Foundational colors may also be thought of as background colors. They may be pure neutrals, black and white, or subtle tints and shades of those or other main colors in your scheme. 

Tints are lighter versions of any color that are created by adding white.

Shades are darker versions of any color that are created by adding black. 

Tones are created with a slightly more complex process compared to a tint or shade. Creating a tone involves adding both black and white (ie. grey) to a hue to “tone it down” and make it appear duller, or more neutral, than the original hue.

Saturation of a color indicates how pale or how bold it is, in relation to how it appears in both bright and weak light. Changing the saturation of a hue does not involve mixing it with other colors, but it does involve changing the intensity of the color.

2. Color 1-2-3

Photo by Annie Spratt on UnsplashPrimary colors are the three colors that every other color is created from: in a classic color wheel, and when using paint or similar medium, the primary colors are red, blue, and yellow. In an additive system, like RGB, the primary colors are red, green, and blue; whereas in a subtractive system, like CMYK, the primary colors are cyan, magenta, and yellow. In all of these systems, you cannot create the primary colors out of any other color, you must start with them.

Secondary colors on the color wheel are orange, green, and violet. They’re created by mixing equal amounts of the two primary colors on either side of them on the color wheel: red and yellow make orange; yellow and blue make green; blue and red make violet. In RGB and CMYK systems, your secondary combinations will be slightly different.

Tertiary colors are created by combining the two colors next to each other For example, referencing our trusty color wheel, combining half yellow and half green makes a color called yellow-green (or green-yellow, which is exactly the same). See the whole list of tertiary colors at the bottom of the color wheel graphic above. 

3. Common color palettes

Check out examples of all these combinations in last week’s article.

Analogous colors are next to each other on the color wheel. Yellow, yellow-green, and green are considered analogous colors.

Complementary colors are opposite each other on the color wheel. Red and green; Blue and Orange; Yellow and Violet are all complementary color pairs.

Grayscale is a color scheme which is composed entirely of shades of gray, the darkest tone being black.

Monochromatic palettes use tints and shades of one color to make a harmonious scheme.

Triadic A triadic color scheme integrates three colors that are evenly spaced out on the color wheel. Referencing the wheel at the top of this article, the most recognized triadic color combination includes the three primary colors: red, blue, yellow. That’s followed closely by the three secondary colors: orange, green, violet.

4. Color codes

CMYK is a color model used for color printing; it includes the colors cyan, magenta, yellow, and key (black). Each color represents one screen used in the printing process.

Hexadecimal code/Hex codes are the number-and-letter-combination codes that correspond to a unique definition for every color available on a RGB display –any computer or other digital screen including mobile phones.

RGB is an additive color model in which colors are created by adding various ratios of red, green, and blue. RGB is used for digital content displayed on computers and smartphones. 

5. UI uses of color

by Quinten Braem on UnsplashDenotative colors are purpose-oriented: they use color to help you move around an application or program. Denotative buttons tell you to “submit” your information and to navigate to the “next” screen. 

Interactive colors are assigned to interactive elements, such as hover-over buttons, clickable links, buttons. You want the color for these elements to stand out from the background so users can find them easily.

Now that you’ve had color terminology explained, you can feel more comfortable communicating with your team about your app project. Go ahead and ask your designer to bring down the saturation on that burnt orange hue you love, but is slightly dominating your palette. You’re ready to talk color!

Still got questions? Here are more articles and resources for learning about color theory and how to apply it to your projects.

A Color Wheel (physical product)

Color Glossary for Designers

A 7 Step Guide to Understanding Color Theory

7 Steps to Organize Colors for UI Design

 

Editor’s note: This article was created collaboratively by Kerry Abukhalaf and Addie Kugler-Lunt.


LimeTech is a creative tech company with a focus on innovation and adaptive change. We use technical know-how, design skills, and deep experience in entrepreneurship to help companies advance their business goals. Our specialties include mobile app developmentwebsite designtechnology planning, and remote work solutions.

color theory    mobile app development    ui design    visual design    

FRESH TECH — December — 2021

FRESH TECH — December — 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: Fresh design and tips....

Read more
Sneak peek: a mobile app for customized denim

Sneak peek: a mobile app for customized denim

Read more
Looking ahead in turbulent times

Looking ahead in turbulent times

COVID-19 has brought doubt, change, and instability the world over. The virus has wreaked havoc on our health and wellness—the very foundation from which personal development and prosperity are built.....

Read more
Everything is agile

Everything is agile

Everything is agile: the story of agile (and how it became everyone’s favorite work method) Origins Back in the 90s, software development was a laborious, time-consuming process, and products could....

Read more
Fresh Tech — October 2021

Fresh Tech — October 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: reimagine with intention.....

Read more
Hello, color! How to choose the right colors for your app.

Hello, color! How to choose the right colors for your app.

Hello, color! How to choose the right colors for your app. So, you’re building an app and you’re starting to think about your product’s look and feel. This process usually....

Read more
The 5 stages of design thinking (and how they can help your app development process)

The 5 stages of design thinking (and how they can help your app development process)

The 5 stages of design thinking (and how they can help your app development process) Whether you’re designing a new toothbrush, a stoplight, or a mobile app, the process of....

Read more
A glossary of agile software development terminology —  A to Z

A glossary of agile software development terminology —  A to Z

A glossary of agile software development terminology —  from A to Z Agile software development is a method used by the vast majority of software development teams. For the layperson,....

Read more
What is agile mobile app development?

What is agile mobile app development?

What is agile mobile app development? Agile as the new norm If you’re in the process of researching app development partners, you’ve likely heard the phrase “agile development” more than....

Read more
Fresh Tech — August 2021

Fresh Tech — August 2021

Fresh Tech — August — 2021 Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on....

Read more
LimeTech’s website design process

LimeTech’s website design process

LimeTech’s website design process Your new website. With all the things. You’ve got big ambitions for your site. But do you have a plan? Don’t worry — we do. Here....

Read more
The LimeTech approach

The LimeTech approach

The LimeTech approach The LimeTech approach involves business savvy, big-picture thinking, and total transparency. We understand the challenges of running a business in a fast-changing world. Find out how LimeTech....

Read more
The 4 stages of app prototyping

The 4 stages of app prototyping

The 4 stages of app prototyping There are lots of good reasons to start your app project with a prototype. Savvy entrepreneurs choose this method to save money, conduct early....

Read more
5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype You’re a savvy entrepreneur, right? So starting your app project with a low-stakes prototype just makes sense. Prototyping is the....

Read more
Creating your app monetization strategy

Creating your app monetization strategy

Creating your app monetization strategy So you’ve got a great idea for an app and you’ve done some planning. Now it’s time to think about revenue. How will you generate....

Read more
What to include in your mobile app marketing plan

What to include in your mobile app marketing plan

What to include in your mobile app marketing plan (and how to not get overwhelmed by the process) So, you’ve ventured into the process of building a new mobile app.....

Read more
Choosing an app development team for your project? Make it easier with these 7 things.

Choosing an app development team for your project? Make it easier with these 7 things.

Choosing an app development team for your project? Make it easier with these 7 things.   So you’ve got an idea for a mobile app but lack the technical chops....

Read more
Native vs. cross-platform mobile app. Comparing the pros and cons.

Native vs. cross-platform mobile app. Comparing the pros and cons.

What’s the right development approach for your new mobile app?  Should you build a native app for iOS or Android? Or take a cross-platform approach and build for both? Your....

Read more
iOS or Android for your new mobile app?

iOS or Android for your new mobile app?

iOS or Android for your new mobile app? These 5 questions will help you decide In this multi-part series we talk about how to explore, vet, and develop your great....

Read more
Planning your dream app? Let’s talk mobile app terminology.

Planning your dream app? Let’s talk mobile app terminology.

Planning your dream app? Let’s talk mobile app terminology. In this multi-part series we talk about how to explore, vet, and develop your great idea for an app. We move....

Read more
How to write a great mobile app project brief

How to write a great mobile app project brief

How to write a great mobile app project brief In this multi-part series we talk about how to explore, vet, and develop your great idea for an app. We move....

Read more
Validating and mapping your app idea

Validating and mapping your app idea

Validating and mapping your app idea Got a great idea for a mobile app? Before you start building and coding, you’ll want to validate your idea and make sure it’s....

Read more
5 easy steps to prepare your web design project

5 easy steps to prepare your web design project

When you’re getting ready to design, or re-design, your website, it can be hard to focus on what’s essential. What information do you need to assemble for your web design....

Read more
What to do if you have an app idea: getting started

What to do if you have an app idea: getting started

In this multi-part series we’ll be talking about how to explore, vet, and develop your great idea for an app. We’ll move from the exciting early phases of brainstorming and....

Read more
Planning a website for your business? Answer these 5 questions to get some clarity.

Planning a website for your business? Answer these 5 questions to get some clarity.

Planning a website for your business? Answer these 5 questions to get some clarity. Embarking on a new website design project? Congratulations! You’re taking a step toward one of the....

Read more
How to save money on mobile app development

How to save money on mobile app development

How to save money on mobile app development If you’ve been thinking of hiring a company to build a mobile application, you may be concerned about the potential for high....

Read more
How to help your web design team succeed at your website build project

How to help your web design team succeed at your website build project

How to help your web design team succeed  You’ve agreed on the price and terms for your web project. Now, your kickoff meeting is approaching. Here are our tips on....

Read more
What is a minimum viable product?

What is a minimum viable product?

What is a minimum viable product, and why do you need it? The 411 on MVPs A minimum viable product (MVP) is a concept popularized by author Eric Ries in....

Read more
Website hosting and security in the age of COVID-19

Website hosting and security in the age of COVID-19

More than ever, your website is one of your company’s most valuable assets. As business moves increasingly online, you should be taking active measures to protect the integrity of your....

Read more

Watch Out for SEO Scams

Watch out for SEO scams If you run a small business like we do, you probably receive countless emails pushing Search Engine Optimization (SEO) services. Many will make rash promises....

Read more

The Agile Family

How Agile is Your Family? The world of software development has influenced many sectors of business, but this is the first time we’ve heard of someone taking the methods of....

Read more

A Small Business WordPress Website For You

You Need a WordPress Website, But Who’s Got the Time? Imagine you run a busy local coffee shop and you’re at the store, setting up shop at 5am every morning.....

Read more

What Do We Actually Do?

Technology Support for Bay Area Businesses IT support becomes important for any business, even the techie ones, when the business outgrows the capacity of the savviest staff to troubleshoot problems....

Read more

Join the Fight Against SOPA/PIPA

Looking for a way to participate in the fight against SOPA/PIPA without actually taking your site down? Local San Francisco startup CloudFlare has created an Anti-Censorship App that will enable....

Read more

Contact us

Type of project
*Don’t worry – we won’t share your email.
*Don’t worry – we won’t share your email.