{"id":11739,"date":"2021-10-07T09:00:58","date_gmt":"2021-10-07T13:00:58","guid":{"rendered":"https:\/\/limetech.co\/?p=11739"},"modified":"2021-10-07T09:00:58","modified_gmt":"2021-10-07T13:00:58","slug":"nice-to-meet-you-color-color-terminology-explained","status":"publish","type":"post","link":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/","title":{"rendered":"Nice to meet you, color! Color terminology explained."},"content":{"rendered":"

Nice to meet you, color! Color terminology explained.<\/h2>\n

Building on our article \u201cHello, Color!<\/a>\u201d, published last week, we\u2019re going to cover some common color terminology. This will help you have conversations with team members and designers when you\u2019re creating the look and feel of your app. Here we go with \u201ccolor terminology explained\u201d!<\/span><\/p>\n

Color terminology explained<\/span><\/h3>\n

1. Color basics<\/h3>\n

\"\"<\/p>\n

The color wheel<\/b> (the graphic on the right) is used in classical color theory based on painting and the color spectrum of the rainbow. It\u2019s depicted in a circular shape which easily <\/span>displays all twelve colors in the visible color spectrum<\/b>. The color wheel is very helpful for understanding the relationships between colors and for creating harmonious color combinations and palettes.\u00a0<\/span><\/p>\n

Hue<\/b> is essentially <\/span>the<\/b> name of a pure color<\/b> 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\u2019re choosing a hue.\u00a0<\/span><\/p>\n

Foundational colors<\/b> may also be thought of as <\/span>background colors<\/b>. They may be pure neutrals, black and white, or subtle tints and shades of those or other main colors in your scheme.\u00a0<\/span><\/p>\n

Tints<\/b> are <\/span>lighter versions<\/b> of any color that are created by adding white.<\/span><\/p>\n

Shades<\/b> are <\/span>darker versions<\/b> of any color that are created by adding black.\u00a0<\/span><\/p>\n

Tones<\/b> are created with a slightly more complex process compared to a tint or shade. Creating a tone involves <\/span>adding both black and white (ie. grey)<\/b> to a hue to <\/span>\u201ctone it down\u201d <\/span><\/i>and make it appear duller, or more neutral, than the original hue.<\/span><\/p>\n

Saturation<\/b> 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 <\/span>intensity<\/b> of the color.<\/span><\/p>\n

2. Color 1-2-3<\/h3>\n

\"PhotoPrimary colors <\/b>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 <\/span>red, blue, and yellow<\/b>. In an additive system, like RGB, the primary colors are <\/span>red, green, and blue<\/b>; whereas in a subtractive system, like CMYK, the primary colors are <\/span>cyan, magenta, and yellow<\/b>. In all of these systems, you cannot create the primary colors out of any other color, you must start with them.<\/span><\/p>\n

Secondary colors<\/b> on the color wheel are orange, green, and violet. They\u2019re created by <\/span>mixing equal amounts of the two primary colors on either side of them<\/b> 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.<\/span><\/p>\n

Tertiary colors<\/b> are created by <\/span>combining the two colors next to each other<\/b> 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.\u00a0<\/span><\/p>\n

3. Common color palettes<\/h3>\n

\"\"Check out examples of all these combinations in last week’s article<\/a>.<\/p>\n

Analogous<\/b> colors are <\/span>next to each other<\/b> on the color wheel. Yellow, yellow-green, and green are considered analogous colors.<\/span><\/p>\n

Complementary<\/b> colors are <\/span>opposite each other<\/b> on the color wheel. Red and green; Blue and Orange; Yellow and Violet are all complementary color pairs.<\/span><\/p>\n

Grayscale <\/b>is a color scheme which is composed entirely of shades of gray, the darkest tone being black.<\/span><\/p>\n

Monochromatic<\/b> palettes use <\/span>tints and shades of one color<\/b> to make a harmonious scheme.<\/span><\/p>\n

Triadic<\/b> — <\/span><\/i>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\u2019s followed closely by the three secondary colors: orange, green, violet.<\/span><\/p>\n

4. Color codes<\/h3>\n

\"\"CMYK <\/b>is a color model used for color printing; it includes the colors <\/span>cyan, magenta, yellow, and key (black)<\/b>. Each color represents one screen used in the printing process.<\/span><\/p>\n

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

RGB <\/b>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.\u00a0<\/span><\/p>\n

5. UI uses of color<\/h3>\n

\"byDenotative colors <\/b>are <\/span>purpose-oriented<\/b>: they use color to help you move around an application or program. Denotative buttons tell you to \u201csubmit\u201d your information and to navigate to the \u201cnext\u201d screen.\u00a0<\/span><\/p>\n

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

Now that you\u2019ve 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\u2019re ready to talk color!<\/span><\/p>\n

Still got questions? Here are more articles and resources for learning about color theory and how to apply it to your projects.<\/span><\/p>\n

A Color Wheel<\/span><\/a> (physical product)<\/span><\/p>\n

Color Glossary for Designers<\/span><\/a><\/p>\n

A 7 Step Guide to Understanding Color Theory<\/span><\/a><\/p>\n

7 Steps to Organize Colors for UI Design<\/span><\/a><\/p>\n

 <\/p>\n

Editor\u2019s note: This article was created collaboratively by Kerry Abukhalaf and Addie Kugler-Lunt.<\/em><\/p>\n

\n

LimeTech<\/i><\/b>\u00a0is 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\u00a0<\/i>mobile app development<\/i><\/a>,\u00a0<\/i>website design<\/i><\/a>,\u00a0<\/i>technology planning<\/i><\/a>, and\u00a0<\/i>remote work solutions<\/i><\/a>.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"

Nice to meet you, color! Color terminology explained. Building on our article \u201cHello, Color!\u201d, published last week, we\u2019re going to cover some common color terminology. This will help you have….<\/p>\n","protected":false},"author":2,"featured_media":11753,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[557,622,560],"tags":[644,559,645,646],"class_list":["post-11739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","category-ui-ux-design","category-web-development","tag-color-theory","tag-mobile-app-development","tag-ui-design","tag-visual-design"],"yoast_head":"\nNice to meet you, color! Color terminology explained. - Lime Tech<\/title>\n<meta name=\"description\" content=\"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nice to meet you, color! Color terminology explained. - Lime Tech\" \/>\n<meta property=\"og:description\" content=\"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/\" \/>\n<meta property=\"og:site_name\" content=\"Lime Tech\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-07T13:00:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kerry Abukhalaf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tjarb.com\/limetech\/#website\",\"url\":\"https:\/\/tjarb.com\/limetech\/\",\"name\":\"Lime Tech\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tjarb.com\/limetech\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg\",\"contentUrl\":\"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#webpage\",\"url\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/\",\"name\":\"Nice to meet you, color! Color terminology explained. - Lime Tech\",\"isPartOf\":{\"@id\":\"https:\/\/tjarb.com\/limetech\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#primaryimage\"},\"datePublished\":\"2021-10-07T13:00:58+00:00\",\"dateModified\":\"2021-10-07T13:00:58+00:00\",\"author\":{\"@id\":\"https:\/\/tjarb.com\/limetech\/#\/schema\/person\/97bf8c90948d93f357913b2e6c73554b\"},\"description\":\"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.\",\"breadcrumb\":{\"@id\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tjarb.com\/limetech\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nice to meet you, color! Color terminology explained.\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/tjarb.com\/limetech\/#\/schema\/person\/97bf8c90948d93f357913b2e6c73554b\",\"name\":\"Kerry Abukhalaf\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/tjarb.com\/limetech\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/12fd5fa87dec15a146cfe890e7ac1beaf6a7e9223998a172316cdbcc73edb086?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/12fd5fa87dec15a146cfe890e7ac1beaf6a7e9223998a172316cdbcc73edb086?s=96&d=mm&r=g\",\"caption\":\"Kerry Abukhalaf\"},\"url\":\"https:\/\/tjarb.com\/limetech\/author\/kerry-abukhalaf\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Nice to meet you, color! Color terminology explained. - Lime Tech","description":"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Nice to meet you, color! Color terminology explained. - Lime Tech","og_description":"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.","og_url":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/","og_site_name":"Lime Tech","article_published_time":"2021-10-07T13:00:58+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kerry Abukhalaf","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/tjarb.com\/limetech\/#website","url":"https:\/\/tjarb.com\/limetech\/","name":"Lime Tech","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tjarb.com\/limetech\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#primaryimage","inLanguage":"en-US","url":"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg","contentUrl":"https:\/\/tjarb.com\/limetech\/wp-content\/uploads\/2021\/09\/robert-katzki-jbtfM0XBeRc-unsplash-scaled.jpg","width":2560,"height":1707},{"@type":"WebPage","@id":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#webpage","url":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/","name":"Nice to meet you, color! Color terminology explained. - Lime Tech","isPartOf":{"@id":"https:\/\/tjarb.com\/limetech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#primaryimage"},"datePublished":"2021-10-07T13:00:58+00:00","dateModified":"2021-10-07T13:00:58+00:00","author":{"@id":"https:\/\/tjarb.com\/limetech\/#\/schema\/person\/97bf8c90948d93f357913b2e6c73554b"},"description":"Color terminology explained! Here we go deep into the wild world of color. Learn all the terms you need to talk shop with your design team.","breadcrumb":{"@id":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/nice-to-meet-you-color-color-terminology-explained\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tjarb.com\/limetech\/"},{"@type":"ListItem","position":2,"name":"Nice to meet you, color! Color terminology explained."}]},{"@type":"Person","@id":"https:\/\/tjarb.com\/limetech\/#\/schema\/person\/97bf8c90948d93f357913b2e6c73554b","name":"Kerry Abukhalaf","image":{"@type":"ImageObject","@id":"https:\/\/tjarb.com\/limetech\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/12fd5fa87dec15a146cfe890e7ac1beaf6a7e9223998a172316cdbcc73edb086?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/12fd5fa87dec15a146cfe890e7ac1beaf6a7e9223998a172316cdbcc73edb086?s=96&d=mm&r=g","caption":"Kerry Abukhalaf"},"url":"https:\/\/tjarb.com\/limetech\/author\/kerry-abukhalaf\/"}]}},"_links":{"self":[{"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/posts\/11739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/comments?post=11739"}],"version-history":[{"count":0,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/posts\/11739\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/media\/11753"}],"wp:attachment":[{"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/media?parent=11739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/categories?post=11739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tjarb.com\/limetech\/wp-json\/wp\/v2\/tags?post=11739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}