{"id":9564,"date":"2023-11-28T01:12:34","date_gmt":"2023-11-28T01:12:34","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=9564"},"modified":"2024-05-28T16:09:39","modified_gmt":"2024-05-28T16:09:39","slug":"guide-to-colour-theory","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/guide-to-colour-theory\/","title":{"rendered":"What is colour theory? A complete introductory guide"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Colour is one of the most powerful tools in a designer\u2019s toolkit\u2014and choosing a product or brand\u2019s colour scheme is one of the most important decisions a designer can make.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Working with colour isn\u2019t simply a case of picking your favourite hues and hoping for the best. It\u2019s a little more technical, requiring knowledge of the colour wheel, achieving colour harmony, and understanding how different colours can influence people\u2019s emotions and behaviours.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These are all crucial aspects of colour theory, and we\u2019ll explain them\u2014and more\u2014in this guide.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ll demystify some of the most confusing colour theory jargon, clarify the most important concepts, and show you, in practical terms, how to apply colour theory to your work as a designer.<\/span><\/p>\n<p><b>Here\u2019s what we\u2019ll cover:<\/b><\/p>\n\n<p><span style=\"font-weight: 400;\">Let\u2019s begin our journey into the dazzling world of colour theory!<\/span><\/p>\n<h2><strong>What is colour theory? A definition<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Colour theory is a set of concepts, principles, and guidelines that help artists and designers to use colour effectively in their work. It\u2019s based on a combination of science, maths, and psychology\u2014a fascinating discipline!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Colour theory helps us to understand the anatomy of colour, how different colour combinations work together to achieve different effects and the role that colour plays in creating a strong brand identity and a <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/examples-of-good-digital-ux-design\/\"><span style=\"font-weight: 400;\">delightful user experience<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019re well-versed in colour theory, you can confidently choose the most effective colour schemes for a given product or design project. You\u2019ll be able to use colour to connect with your target audience and to improve the readability, usability, and accessibility of your designs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The power of colour is truly endless\u2014and colour theory will help you to unleash it. But, before we jump into the specifics of colour theory, let\u2019s consider why colour is so important in the design field.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/span><\/p>\n<h2><strong>Why does colour matter in design?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to designing successful products, colour isn\u2019t merely a decorative layer. It defines the entire visual brand (along with other elements such as typography, logos, and imagery), and it impacts the end user\u2019s perception and experience of the product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s why colour matters beyond aesthetics:\u00a0<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Colour is crucial for brand identity and recognition. <\/b><span style=\"font-weight: 400;\">When you think of some of the most famous brands, you can probably visualise their brand colours off the top of your head. Ikea? Blue and yellow. Starbucks? Green and white. The NHS? Blue and white. You get the gist! Colour is at the heart of all the most memorable brands.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Colour can evoke emotions and impact people\u2019s mood and behaviour. <\/b><span style=\"font-weight: 400;\">According to <\/span><a href=\"https:\/\/www.verywellmind.com\/color-psychology-2795824\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">colour psychology<\/span><\/a><span style=\"font-weight: 400;\">, different colours can elicit different emotional responses. This, in turn, can impact a person\u2019s behaviour\u2014which is especially interesting in the context of designing products and services that are geared towards particular user actions. We\u2019ll take a closer look at colour psychology later on in this guide.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Colour helps to create contrast, which improves the readability and accessibility of digital products. <\/b><span style=\"font-weight: 400;\">When designing an app or a website, how do you ensure that all text is clearly legible? How do you make sure that all the different UI elements are easily distinguishable from one another? You use colour to create contrast. This has a major impact on the ease and accessibility of the entire user experience.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As you can see, colour isn\u2019t just beautiful. It\u2019s functional, too, and must be applied with care. On that note, let\u2019s dive into the fundamentals of colour theory.<\/span><\/p>\n<h2><strong>Colour theory basics: Primary, secondary, and tertiary colours<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Primary, secondary, and tertiary colours form the basis of colour theory. You\u2019re probably already familiar with these concepts, but we\u2019ll provide a quick refresher here just in case:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Primary colours <\/b><span style=\"font-weight: 400;\">are those that <\/span><i><span style=\"font-weight: 400;\">cannot <\/span><\/i><span style=\"font-weight: 400;\">be created by mixing other colours together. The three primary colours are red, yellow, and blue.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Secondary colours <\/b><span style=\"font-weight: 400;\">are created by mixing two primary colours together. The three secondary colours are orange, purple, and green.<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Tertiary colours <\/b><span style=\"font-weight: 400;\">are the result of combining a primary colour with a secondary colour. There are six tertiary colours: magenta (red mixed with purple); vermillion (red mixed with orange); violet (blue mixed with purple); teal (blue mixed with green); amber (yellow mixed with orange); and chartreuse (yellow mixed with green).\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With primary, secondary, and tertiary colours, we\u2019ve got twelve colours in total. But that\u2019s not where the possibilities end! Each of those basic colours comes in a range of different variations, opening up a whole spectrum of colours to choose from.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can think of these different variations as the elements or properties of a colour, and we\u2019ll introduce them next.<\/span><\/p>\n<h2><strong>Understanding the elements and properties of colour: Hue, shade, tint, and tone<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">How do we get from just twelve colours (three primary colours, three secondary colours, and six tertiary colours) to the much broader range of colours we know exists in the world?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Four words: <\/span><b>Hue<\/b><span style=\"font-weight: 400;\">, <\/span><b>shade<\/b><span style=\"font-weight: 400;\">, <\/span><b>tint<\/b><span style=\"font-weight: 400;\">, and <\/span><b>tone<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These are settings you can dial up or down to achieve different variations of each colour, giving you a much wider array of colours (or colour variations) to work with.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what each term means:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Hue <\/b><span style=\"font-weight: 400;\">is the colour in its purest form. When you mix two primary colours (hues) to get a secondary colour\u2014say, mixing red and yellow to get orange\u2014you\u2019re mixing the hues of red and yellow to get the hue of orange. All primary and secondary colours are hues.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Shade<\/b><span style=\"font-weight: 400;\">. Now, if you want to create a darker version of a colour, you can add black to a particular hue. For example, if you add black to blue, you\u2019ll get a darker version of the original blue colour.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Tint <\/b><span style=\"font-weight: 400;\">is the opposite of shade. If you want to achieve a lighter version of a colour, you can add white. As such, different colours can have a range of shades and tints in varying degrees.<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Tone<\/b><span style=\"font-weight: 400;\">, sometimes referred to as saturation, is achieved by adding grey (i.e. white and black) to the original hue. Again, adding both white and black will give you yet another variation of that colour.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can see how, with the dialling up and down of these various properties, the spectrum of colours available for you to work with extends well beyond the twelve primary, secondary, and tertiary colours.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now things are getting more complex! How do designers make sense of all the different possibilities and potential colour combinations? Cue the colour wheel.<\/span><\/p>\n<h2><strong>An introduction to the colour wheel and the 6 main colour schemes<\/strong><\/h2>\n<h3><strong>What is the colour wheel?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The colour wheel is a circular representation of all the different colours and their possible variations. It depicts all the primary, secondary, and tertiary colours, as well as their respective hues, shades, tints, and tones.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The colour wheel is an incredibly useful tool because it allows you to see, at a glance, the relationship between different colours based on their position on the wheel.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These can be broken down into different colour schemes\u2014otherwise known as colour palettes or colour combinations.<\/span><\/p>\n<h3><strong>The 6 main colour schemes<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Colour schemes are essentially combinations of colours that work well together. Each colour scheme helps to achieve a different effect, so your choice will depend on the design context and your goals.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Complementary: <\/b><span style=\"font-weight: 400;\">A complementary colour scheme uses two colours which are located directly opposite each other on the colour wheel. Complementary colour pairings achieve the highest level of contrast.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Analogous: <\/b><span style=\"font-weight: 400;\">An analogous colour scheme uses colours that are next to each other on the colour wheel. If you were creating an analogous colour scheme made up of three colours, you\u2019d choose your main colour and the colour either side of it. For a five-colour scheme, you\u2019d add the colours that are next to your second and third colours on the wheel (i.e. the outer colours). Analogous colours harmonise well together but create minimal contrast.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Monochromatic: <\/b><span style=\"font-weight: 400;\">As the name suggests, monochromatic colour schemes use just one colour in various tints, shades, and tones. Monochromatic palettes are often associated with simplicity, elegance, and \u2018cleanness\u2019. Note that you won\u2019t achieve much contrast with a monochromatic colour scheme.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Triadic: <\/b><span style=\"font-weight: 400;\">A triadic colour scheme comprises three colours that are evenly spaced around the colour wheel. A triadic combination of colours is great for creating high contrast while achieving harmony.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Split-complementary: <\/b><span style=\"font-weight: 400;\">A split-complementary palette takes one dominant colour and the two colours that are directly next to the dominant colour\u2019s complement on the colour wheel. In other words, to choose the second and third colours in a split-complementary scheme, find the colour directly opposite your first colour on the colour wheel (that\u2019s its complement) and then choose the two colours that are located next to (i.e. either side) of that colour.<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>Tetradic: <\/b><span style=\"font-weight: 400;\">This is also known as a double complementary or rectangle colour scheme. Tetradic colour palettes use two complementary colour pairs. If you were to cut out a paper rectangle and place it at different angles over the colour wheel, you\u2019d find your colour pairings at each of the rectangle\u2019s four points.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now we know all about how different colours work together to form colour schemes, let\u2019s introduce another key concept: colour psychology.<\/span><\/p>\n<h2><strong>An introduction to colour psychology\u2014how do different colours make us feel?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Colour psychology explores how different colours can impact our mood, emotions, and behaviours. As a designer, the colours you choose will conjure up certain associations and\/or elicit certain emotions. As such, a product\u2019s colour scheme can have a big impact on how a user feels when they interact with the product.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, when working with colour, it\u2019s important to be aware of the symbolic meanings typically associated with each colour\u2014and how these can vary across different cultures and user groups.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some common colour associations:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Red: <\/b><span style=\"font-weight: 400;\">Love, passion, energy, danger, power, intensity.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Pink: <\/b><span style=\"font-weight: 400;\">Romance, delicacy, softness, nurture, optimism, playfulness, fun.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Blue: <\/b><span style=\"font-weight: 400;\">Wisdom, dependability, calm, peace, relaxation, coolness, sadness.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Green: <\/b><span style=\"font-weight: 400;\">Nature, freshness, health, renewal, prosperity, jealousy.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Yellow: <\/b><span style=\"font-weight: 400;\">Hope, optimism, fun, joy, happiness, warmth, danger, caution.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Orange: <\/b><span style=\"font-weight: 400;\">Energy, warmth, optimism, abundance, kindness, warning, danger.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Purple: <\/b><span style=\"font-weight: 400;\">Royalty, nobility, glamour, mystery, luxury.\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Black: <\/b><span style=\"font-weight: 400;\">Elegance, power, sophistication, strength, luxury, sadness, grief.<\/span><\/li>\n<\/ul>\n<ul>\n<li><b>White: <\/b><span style=\"font-weight: 400;\">Purity, simplicity, tranquillity, peace, openness.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As you can see, some colours hold contradictory associations\u2014such as blue which can evoke feelings of calm and peace, but may also be associated with sadness. It all depends on the context and on the person perceiving it.<\/span><\/p>\n<h2><strong>What are the best colour tools for designers?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered a lot of theory. But, when it comes to working with colour, you don\u2019t necessarily need to pore over the colour wheel every time you start a new project, or spend hours running back over colour theory to ensure you\u2019re making effective colour choices.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As with most aspects of the UX and <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/guide-to-the-ui-design-process\/\"><span style=\"font-weight: 400;\">UI design process<\/span><\/a><span style=\"font-weight: 400;\">, there are tools that can help you. So what are some of the best colour tools for UX and UI designers? Let\u2019s take a look.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Colour pickers and colour palette generators<\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/color.adobe.com\/create\/color-wheel\" target=\"_blank\" rel=\"noopener\"><b>Adobe Color<\/b><\/a><span style=\"font-weight: 400;\">\u2014a colour wheel and colour palette generator, used to create and browse colour schemes.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/www.huesnap.com\/\" target=\"_blank\" rel=\"noopener\"><b>HueSnap<\/b><\/a><span style=\"font-weight: 400;\">\u2014a free colour picker and colour palette generator tool. Use the colour picker to \u2018extract\u2019 colour from existing graphics, or create brand new colour schemes from scratch.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/www.khroma.co\/\" target=\"_blank\" rel=\"noopener\"><b>Khroma<\/b><\/a><span style=\"font-weight: 400;\">\u2014uses AI to learn which colours you like and enables you to generate custom colour palettes.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener\"><b>Coolors<\/b><\/a><span style=\"font-weight: 400;\">\u2014a free, beginner-friendly colour palette generator with extensions for Adobe Photoshop and Illustrator.<\/span><\/li>\n<li><a href=\"http:\/\/colormind.io\/\" target=\"_blank\" rel=\"noopener\"><b>Colormind<\/b><\/a><span style=\"font-weight: 400;\">\u2014uses deep learning (a type of AI) to generate colour schemes.<\/span><\/li>\n<\/ul>\n<h3><strong>Tools for checking colour contrast<\/strong><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/h3>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/accessibleweb.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\"><b>WCAG Color Contrast Checker<\/b><\/a><span style=\"font-weight: 400;\">\u2014enter your colour combinations to check if they pass conformance (i.e. that they provide enough contrast to comply with accessibility guidelines).<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/coolors.co\/contrast-checker\/112a46-acc8e5\" target=\"_blank\" rel=\"noopener\"><b>Coolors Color Contrast Checker<\/b><\/a><span style=\"font-weight: 400;\">\u2014calculates the contrast ratio of text and background colours.<\/span><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/color.adobe.com\/create\/color-contrast-analyzer\" target=\"_blank\" rel=\"noopener\"><b>Adobe Color Contrast Analyzer<\/b><\/a><span style=\"font-weight: 400;\">\u2014type\/paste in the HEX code for your text and background colours to get a contrast ratio.<\/span><\/li>\n<\/ul>\n<h2><strong>Tying it all together: How to choose the right colour palettes and use colour theory to design beautiful, user-friendly products<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">As a designer, your goal is to make effective colour choices for a given product or project. You then need to apply your chosen colours so that the end result is aesthetically pleasing, accessible, and user-friendly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So how do you go about that? How do you actually use colour theory in practical terms? Let\u2019s take a look.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/span><\/p>\n<h3><strong>Consider the brand identity<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">If you\u2019re designing for a particular brand or developing a brand identity from scratch, you first need to consider what brand values you want to convey. What does the brand stand for? What values does it embody? What industry is it operating in?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All of these factors will determine your colour choices. For example, colours that work well for a luxury beauty brand may not hit the mark for a financial technology company. That\u2019s because those brands have different values and purposes.\u00a0<\/span><\/p>\n<h3><strong>Think about the people who will perceive your colours<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">This goes hand-in-hand with brand identity. As you choose or create a colour palette, it\u2019s important to consider your target audience. Who will be perceiving the colours? What kind of reaction or emotion do you want to evoke? What kind of colour scheme is most likely to resonate with them as they engage with the product at a particular moment in time?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here you want to apply some colour psychology. Consider what different colours mean to your target audience and how your colour choices might influence their emotions.\u00a0<\/span><\/p>\n<h3><strong>Use colour to create contrast (and make your designs more user-friendly)<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve decided on a colour palette, you\u2019ll then apply those colours throughout the product you\u2019re designing. As you do so, it\u2019s essential to ensure that you\u2019re creating sufficient contrast.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Contrast is crucial for accessibility. Think how difficult it is to read, say, light grey text on a plain white background, or white text overlayed on a busy image or textured background.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines<\/span><\/a><span style=\"font-weight: 400;\"> outline a set of standards that must be met in order to ensure that web and digital content is accessible for everybody, including people with disabilities. These guidelines state that text and interactive elements should have a colour contrast ratio of at least 4:5:1.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When applying colour, use colour contrast checkers (like those we mentioned previously, including the <\/span><a href=\"https:\/\/accessibleweb.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WCAG Color Contrast Checker<\/span><\/a><span style=\"font-weight: 400;\">) to ensure that you\u2019re meeting accessibility standards. <\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9565\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-04-at-00.57.49.png\" alt=\"color theory contrast illustration\" width=\"1248\" height=\"890\" title=\"\"><\/span><\/p>\n<h3><strong>Use colour to establish a visual hierarchy and achieve consistency<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">How you organise different elements on the screen or page determines their importance in the overall visual hierarchy. For example, you might place the most important information at the top of the screen so the user sees it first.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Colour also plays an important role in establishing visual hierarchy. Use high colour contrast or dial up colour intensity to make important elements stand out, use colour to group related elements, and apply colour consistently to help the user learn your interface\u2014for example, by learning to associate certain colours with certain actions or information.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being strategic with your application of colour helps to ensure that your product is not only beautiful and on-brand, but also easy to learn, use, and navigate. And that\u2019s ultimately what good design is all about!<\/span><\/p>\n<h2><strong>That\u2019s a wrap!<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">That marks the end of our ultimate guide to colour theory. Hopefully, you now feel much better equipped to choose effective colour schemes and use colour to connect with your target audience, improve the accessibility and usability of your products, and develop strong and memorable brand identities.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, colour is just one aspect of a delightful user experience. If you\u2019d like to learn more about creating beautiful, user-friendly products, discover <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/mood-boards-for-ui-designers\/\"><span style=\"font-weight: 400;\">the power of mood boards in this guide<\/span><\/a><span style=\"font-weight: 400;\">, learn the <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/7-principles-of-icon-design\/\"><span style=\"font-weight: 400;\">7 fundamental principles of icon design here<\/span><\/a><span style=\"font-weight: 400;\">, and take inspiration from these <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/good-ui-design-9-examples\/\"><span style=\"font-weight: 400;\">9 examples of great UI design from around the web<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Colour theory is a guiding set of principles that informs how designers choose and apply colour. Learn all about colour theory\u2014and how to use it\u2014in this guide.<\/p>\n","protected":false},"author":22,"featured_media":10429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[273],"tags":[],"class_list":["post-9564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-guides"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=9564"}],"version-history":[{"count":5,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9564\/revisions"}],"predecessor-version":[{"id":9571,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/9564\/revisions\/9571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/10429"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=9564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=9564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=9564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}