{"id":7366,"date":"2023-11-08T11:03:18","date_gmt":"2023-11-08T11:03:18","guid":{"rendered":"https:\/\/www.andacademy.com\/resources\/?p=7366"},"modified":"2026-04-16T11:15:30","modified_gmt":"2026-04-16T11:15:30","slug":"guide-to-colour-theory","status":"publish","type":"post","link":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/","title":{"rendered":"A Complete Guide to Colour Theory in Design"},"content":{"rendered":"\r\n<p>At first glance, colour might seem like a pretty simple concept. But actually, there\u2019s a whole discipline dedicated to the study and application of colour\u2014and it\u2019s rooted not only in art but also in science and psychology.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>If you want to use colour effectively in your designs, you need to get to grips with colour theory. And that\u2019s exactly what we\u2019ll help you with right here through this guide!&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Contents:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><a href=\"#What\">What is colour theory?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#The\">The role of colour theory in design<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#colour\">What is the colour wheel?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#Primary\">Primary, secondary, and tertiary colours<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#Hue\">Hue, shade, tint, and tone<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#types\">The 6 types of colour schemes<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#ExploreColour\">Explore Colour Palettes: Make Your Own!<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#psychology\">What is colour psychology?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#Working\">Working with colour: Tips and best practices for designers<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#Additional\">Additional design tips and resources<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>By the end of this guide, you\u2019ll know exactly what colour theory is\u2014and, most importantly, how to apply it to make effective colour choices. So let\u2019s begin!<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"What\">What is Colour Theory?<\/h2>\r\n\r\n\r\n\r\n<p>Colour theory is the study and application of colour. It\u2019s both an art and a science that explores how colours interact and combine to achieve different visual effects.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Colour theory isn\u2019t purely objective, though. It also considers the psychological impact of colour\u2014in other words, how different colours and <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/complete-guide-to-colour-combinations\/\" target=\"_blank\" rel=\"noopener\">colour combinations<\/a> make people feel and the kind of message they communicate.<\/p>\r\n\r\n\r\n\r\n<p>In practical terms, colour theory provides designers with a framework for choosing, combining, and applying colours. This not only helps to achieve visual harmony and balance but also to convey the intended message to the target audience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The main components of colour theory are:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>The colour wheel<\/li>\r\n\r\n\r\n\r\n<li>Colour properties (hue, shade, tint, and tone)<\/li>\r\n\r\n\r\n\r\n<li>Colour harmony, as determined by different colour combinations (i.e. colour palettes or schemes)<\/li>\r\n\r\n\r\n\r\n<li>Colour psychology<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>We\u2019ll explore each of these components in detail throughout this guide. But first, let\u2019s consider why colour theory is such a powerful design tool.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"The\">The Role of Colour and Colour Theory in Design<\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2-1024x684.webp\" alt=\"Visual designers working with colour palettes\" class=\"wp-image-7379\" title=\"Visual designers working with colour palettes\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2-1024x684.webp 1024w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2-300x200.webp 300w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2-768x513.webp 768w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2-1536x1026.webp 1536w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image11-2.webp 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Applying colour theory isn\u2019t just about choosing colours that look good. No matter what you\u2019re designing, colour plays a crucial role in how you connect with the target audience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>It has practical implications, too\u2014especially for the design of digital products. When creating websites and apps, the colours you choose will impact the clarity, usability, and accessibility of the product.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Colour theory helps us to understand how colour works and why different colours achieve certain effects. As such, it isn\u2019t just a theoretical framework; it also provides us with practical principles and guidelines we can follow when choosing and applying colour.<\/p>\r\n\r\n\r\n\r\n<p>Let\u2019s explore the importance of colour for designers\u2014and, by extension, the importance of colour theory.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-colour-shapes-your-brand\">Colour shapes your brand<\/h3>\r\n\r\n\r\n\r\n<p>You can\u2019t build a strong, memorable brand identity without the right colours. A carefully-considered colour palette helps to convey the brand values\u2014think green for eco-friendly or black for luxury, for example. And, when you apply these colours consistently, you help to establish familiarity and recognition among your target audience. Colour theory guides designers in choosing appropriate brand colours and applying them effectively.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-colour-elicits-emotion\">Colour elicits emotion<\/h3>\r\n\r\n\r\n\r\n<p>Colour can have a significant impact on a person\u2019s mood, evoking certain emotions and associations. When you enter a spa, for example, you\u2019re usually surrounded by calming colours such as light blue, white, and soft neutral tones. Compare this to the kind of vibrant primary colours you\u2019d expect to find in a play school.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>When choosing colours, it\u2019s important to think about the mood you want to create. Take a look at <a href=\"https:\/\/www.behance.net\/gallery\/166243001\/Concept-Album-Covers\" target=\"_blank\" rel=\"noopener\">AND learner Soumitro Dey\u2019s Concept Album Project<\/a> for reference, where he colour theory to redesign music albums for different genres. This incorporates colour psychology, a key tenet of colour theory, which we\u2019ll explore later on.\u00a0<\/p>\r\n\r\n\r\n\r\n<a class=\"downlaod_courses_anch mob_wd_an my_pop_show1\" href=\"#brochure\"><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2024\/04\/image6-6.png\" class=\"wp-image-7372\" style=\"margin-bottom:30px;\"\/><\/figure><\/a>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-colour-impacts-accessibility\">Colour impacts accessibility<\/h3>\r\n\r\n\r\n\r\n<p>Colour can make or break the accessibility of your designs. When applied effectively, colour creates contrast, ensuring that text is legible and that individual design elements stand out.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Designers must also consider different types of colour vision deficiency (CVD) that may impact how a person perceives colour, or their ability to distinguish between certain colours.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>This is especially important in the context of web and digital design, where insufficient colour contrast or ill-considered colour choices may prevent the user from accessing or fully enjoying everything your product has to offer. Colour theory shows us, with tools like the colour wheel, which colours are best for creating strong contrast.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-colour-affects-usability-and-user-experience\">Colour affects usability and user experience<\/h3>\r\n\r\n\r\n\r\n<p>In the context of web and digital design, colour helps to provide a positive user experience (otherwise known as UX). When creating apps, websites, and software, designers can use colour to create a visual hierarchy and guide the user\u2019s attention\u2014helping them to navigate the product and find what they\u2019re looking for.<br><br>Learn more about UX in this guide: <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/ui-ux-design\/what-is-ux-design\/\" target=\"_blank\" rel=\"noopener\">What is user experience (UX) design? Everything you need to know<\/a>.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-colour-creates-visual-appeal\">Colour creates visual appeal<\/h3>\r\n\r\n\r\n\r\n<p>Last but not least, colour is crucial for creating visually compelling, aesthetically pleasing designs. Colour creates harmony and balance, ensuring that the overall composition flows together nicely and is a joy to behold. Of course, colour can also be used to create visual <em>imbalance<\/em> and intrigue if that\u2019s the designer\u2019s goal. Either way, colour is essential for building visual appeal and leaving the viewer with a lasting impression.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Colour holds a lot of power! Now let\u2019s jump into colour theory\u2014starting with the colour wheel.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"colour\">What is the Colour Wheel?<\/h2>\r\n\r\n\r\n\r\n<p>The <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/how-to-design-a-colour-wheel\/\" target=\"_blank\" rel=\"noopener\">colour wheel<\/a> is the very foundation of colour theory. It\u2019s essentially a circle-shaped diagram that presents twelve colours\u2014three primary colours, three secondary colours, and six tertiary colours\u2014and their different hues, shades, tints, and tones. If you\u2019re not familiar with those terms, don\u2019t worry! We\u2019ll explain them shortly.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240-1024x512.webp\" alt=\"An example of a colour wheel with shade distinctions\" class=\"wp-image-7374\" title=\"An example of a colour wheel with shade distinctions\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240-1024x512.webp 1024w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240-300x150.webp 300w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240-768x384.webp 768w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240-1536x768.webp 1536w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image6-654b6a495f240.webp 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>The colour wheel is useful because it visually depicts the relationship between different colours. By looking at the colour wheel, designers can see what colour pairings work harmoniously together, which colour combinations are complementary, and which are best for creating contrast.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The importance of the colour wheel will become clearer as we define some key colour theory terminology and explore the different types of colour palettes. So, without further ado, let\u2019s break it down.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Primary\">Primary, Secondary, and Tertiary Colours\u00a0<\/h2>\r\n\r\n\r\n\r\n<p>The colour wheel comprises a total of twelve base colours. These are:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><p><strong>Yellow, red, and blue\u2014the three primary colours<\/strong>. Primary colours are used as the basis for creating all other colours. On the colour wheel, the three primary colours are placed at equidistant intervals. So, if you imagine the colour wheel divided into twelve equal segments, you might have the first, fifth, and ninth segments occupied by yellow, red, and blue respectively (starting at the top and moving clockwise).<\/li><\/p>\r\n\r\n\r\n\r\n<li style=\"margin-top:-30px;\"><p><strong>Orange, purple, and green\u2014the three secondary colours. <\/strong>Secondary colours are produced by mixing two primary colours. For example, mixing equal parts red and yellow paint will give you orange. On the colour wheel, the three secondary colours are positioned at regular intervals between the primary colours they result from. So, if yellow, red, and blue are in segments one, five, and nine, you\u2019d have orange, purple, and green in segments three, seven, and eleven.<\/li><\/p>\r\n\r\n\r\n\r\n<li style=\"margin-top:-30px;\"><p><strong>Amber, vermillion, magenta, violet, teal, and chartreuse\u2014the six tertiary colours. <\/strong>Tertiary colours are created by mixing a primary colour with a secondary colour. For example, if you mix red and purple, you\u2019ll get magenta. On the colour wheel, the tertiary colours are located between the primary and secondary colours that make them. In our colour wheel example, amber, vermillion, magenta, violet, teal, and chartreuse would be in segments two, four, six, eight, ten, and twelve respectively.&nbsp;<\/p><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"806\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f-1024x806.webp\" alt=\"Colour wheel detailing the primary, secondary and tertiary colours\" class=\"wp-image-7375\" title=\"Colour wheel detailing the primary, secondary and tertiary colours\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f-1024x806.webp 1024w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f-300x236.webp 300w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f-768x604.webp 768w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f-1536x1209.webp 1536w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image7-654b6a4a7ce8f.webp 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<p><em>Source: <\/em><a href=\"https:\/\/www.color-meanings.com\/primary-secondary-tertiary-colors\/\" target=\"_blank\" rel=\"noopener\"><em>Color Meanings<\/em><\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Hue\">Hue, Shade, Tint, and Tone\u00a0<\/h2>\r\n\r\n\r\n\r\n<p>Designers needn\u2019t limit themselves to just twelve colours. They can modify these colours\u2014or, more accurately, these <em>hues<\/em>\u2014to create even more variations and possibilities.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The twelve basic colours we\u2019ve just described (the three primary, three secondary, and six tertiary colours) are actually hues. A hue is the purest form of a particular colour. In other words, it\u2019s the original, base colour without any shade, tint, or tone.<\/p>\r\n\r\n\r\n\r\n<p>The term \u201cshade\u201d refers to the addition of black to create a darker version of a particular hue. Say you\u2019re working with paints and you want to create a darker yellow colour, you\u2019d add black paint to the yellow paint you want to darken.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The term \u201ctint\u201d refers to the addition of white in order to create a lighter version of the original hue. You might mix red and white paint to create a lighter red.<\/p>\r\n\r\n\r\n\r\n<p>The term \u201ctone\u201d refers to the addition of both black and white (i.e. grey) to alter the saturation or brightness of the original colour or hue. When you edit a photo on your phone, you can dial the saturation up and down. The same goes for colour\u2014you can add different amounts of black and white to a base colour to create more muted tones.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>In summary:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><p><strong>Hue <\/strong>refers to the colour of origin in its purest form. The primary, secondary, and tertiary colours you see on the colour wheel are all hues.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-10px;\"><strong>Shade = Hue + Black <\/strong>to darken the original hue.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-10px;\"><strong>Tint = Hue + White <\/strong>to lighten a hue.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-10px;\"><strong>Tone = Hue + Grey <\/strong>to alter the saturation of the original colour, for e.g. to create a more muted tone.&nbsp;<\/p><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p style=\"margin-top:-30px;\">That\u2019s how we end up with an entire spectrum of different colours and colour variations. And, while this gives designers plenty of creative freedom, you can\u2019t just combine different colours at random. It\u2019s important to understand how different colours work together and the effects they can achieve. This is where colour schemes come in\u2014so let\u2019s explore those next.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"types\">The 6 Types of Colour Schemes<\/h2>\r\n\r\n\r\n\r\n<p>A colour scheme, or colour palette, is a combination of colours taken from the colour wheel. Different colour schemes achieve different effects depending on the relationships between the colours involved. Some are harmonious or complementary; others are high-contrast and dynamic. The type of colour scheme you choose will depend on the overall effect you want to create.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>So what are the different colour palettes? Let\u2019s take a look.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-monochromatic\">Monochromatic<\/h3>\r\n\r\n\r\n\r\n<p>A monochromatic colour palette is based on just one colour. This is ideal for achieving a harmonious, cohesive aesthetic. Note that you\u2019re not limited to just one hue\u2014you can use various tints, tones, and shades of your base colour.<br><\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image3-654b6a45ab77a.webp\" alt=\"Shades of purple as an example of a monochromatic colour palette.\r\n\" class=\"wp-image-7371\" title=\"Shades of purple as an example of a monochromatic colour palette.\r\n\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image3-654b6a45ab77a.webp 1000w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image3-654b6a45ab77a-300x60.webp 300w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image3-654b6a45ab77a-768x154.webp 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-analogous\">Analogous<\/h3>\r\n\r\n\r\n\r\n<p>Analogous colour schemes are based on adjacent colours\u2014that is, hues, shades, tints, or tones that sit next to each other on the colour wheel. Analogous palettes are extremely harmonious, but not so effective for creating contrast.<br><\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image9-654b6a4c4a68c.webp\" alt=\"An analogous colour palette with shades of pink\r\n\" class=\"wp-image-7377\" title=\"An analogous colour palette with shades of pink\r\n\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image9-654b6a4c4a68c.webp 400w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image9-654b6a4c4a68c-300x150.webp 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-complementary\">Complementary<\/h3>\r\n\r\n\r\n\r\n<p>Complementary colour schemes are based on colours that sit opposite each other on the colour wheel. Complementary colours create strong visual contrast and help to enhance each other\u2019s intensity\u2014achieving a vibrant colour \u201cpop\u201d. Examples of complementary colour pairings are yellow and purple, red and green, and orange and blue.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image8-654b6a4baf059.webp\" alt=\"complementary colour pairing of yellow and purple\" class=\"wp-image-7376\" title=\"complementary colour pairing of yellow and purple\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image8-654b6a4baf059.webp 200w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image8-654b6a4baf059-150x150.webp 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-split-complementary\">Split-complementary<\/h3>\r\n\r\n\r\n\r\n<p>Split-complementary colour schemes are built on one base colour and two additional colours that are adjacent to the base colour\u2019s complement on the colour wheel.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Essentially, to create a split-complementary scheme, you choose your first colour, then find its complementary colour directly opposite to it on the colour wheel. The two colours on either side of the complementary colour are the second and third colours in your palette. For example: if magenta is your base colour, green and yellow will be your second and third colours as they\u2019re located on either side of chartreuse\u2014magenta\u2019s direct opposite.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image10-654b6a4c56de5.webp\" alt=\"Split-complementary colour schemes with magenta, green and yellow\" class=\"wp-image-7378\" title=\"Split-complementary colour schemes with magenta, green and yellow\" style=\"margin-bottom:30px;\"\/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-triadic\">Triadic<\/h3>\r\n\r\n\r\n\r\n<p>Triadic colour schemes use three colours equally spaced around the colour wheel. Triadic palettes are high-contrast and dynamic, but also well-balanced. Examples of triadic colour combinations are red, purple and blue, or orange, purple and green.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image5-654b6a4727d0e.webp\" alt=\"A triadic colour scheme\" class=\"wp-image-7373\" title=\"A triadic colour scheme\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image5-654b6a4727d0e.webp 500w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image5-654b6a4727d0e-300x120.webp 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-tetradic-or-double-complementary\">Tetradic (or double complementary)<\/h3>\r\n\r\n\r\n\r\n<p>A tetradic colour scheme, also known as double complementary, comprises four colours in total\u2014usually two pairs of complementary colours. You\u2019ll remember that complementary colour pairs sit directly opposite each other on the colour wheel\u2014so your tetradic colour scheme could be made up of, say, yellow and purple (complementary pair one) and vermillion and teal (complementary pair two).<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"200\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image1-654b6a4429f70.webp\" alt=\"Tetradic colour scheme with purple, brown, green and blue\" class=\"wp-image-7370\" title=\"Tetradic colour scheme with purple, brown, green and blue\" style=\"margin-bottom:30px;\" srcset=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image1-654b6a4429f70.webp 400w, https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image1-654b6a4429f70-300x150.webp 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"ExploreColour\">Explore Colour Palettes: Make Your Own!<\/h2>\r\n\r\n\r\n<p>You have just seen how each colour scheme produces a different feel from the same wheel. Now try it yourself. Pick a colour below, switch between harmony modes, and see the palette shift in real time. When you find a combination you like, click and copy it as CSS variables, a Tailwind config, or a hex array to use directly in your projects.<\/p>\r\n\r\n\r\n\r\n  <style>\r\n  \/* 1. CSS Scoping: All rules are strictly scoped to .ce-colour-explorer *\/\r\n  .ce-colour-explorer {\r\n    \/* Slightly refined color palette for a more premium UI *\/\r\n    --bg: #ffffff; \r\n    --bg-app: #ffffff;\r\n    --bg2: #f4f5f7; \r\n    --bg3: #eef0f3; \r\n    --tx: #111827; \r\n    --tx2: #4b5563; \r\n    --tx3: #6b7280;\r\n    --bd: #e5e7eb; \r\n    --bd2: #d1d5db; \r\n    --radius-lg: 16px; \r\n    --radius: 12px; \r\n    --radius-sm: 8px;\r\n    \r\n    font-family: 'Antarctica-CondExtLt', -apple-system, BlinkMacSystemFont, sans-serif;\r\n    margin: 0px auto 40px; \/* Adds breathing room around the widget *\/\r\n    padding: 32px 24px 40px; \r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    max-width: 100%; \r\n    min-height: 800px; \r\n    position: relative;\r\n    \r\n    \/* THE MAGIC: Elevated Card Look *\/\r\n    background: var(--bg-app);\r\n    border: 1px solid var(--bd);\r\n    border-radius: var(--radius-lg);\r\n    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);\r\n  }\r\n  \r\n  .ce-colour-explorer * { box-sizing: border-box; }\r\n  .ce-colour-explorer button { font-family: inherit; }\r\n  \r\n  \/* Accessibility focus outlines *\/\r\n  .ce-colour-explorer *:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }\r\n  \r\n  .ce-app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; border-bottom: 1px solid var(--bd); padding-bottom: 16px; }\r\n  .ce-app-header h2 { font-family: 'Antarctica-CondensedRegular', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.4px; margin: 0; color: var(--tx); }\r\n  .ce-badge { font-size: 11px; font-weight: 600; color: var(--tx2); background: var(--bg2); border: 1px solid var(--bd); padding: 4px 12px; border-radius: 20px; letter-spacing: .3px; }\r\n  \r\n  .ce-sec-label { font-size: 12px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block; }\r\n  \r\n  .ce-picker-row { display: flex; gap: 32px; margin-bottom: 32px; align-items: flex-start; }\r\n      \r\n  .ce-wheel-col { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }\r\n  .ce-wheel-wrap { position: relative; width: 200px; height: 200px; }\r\n  #ce-wheel { width: 200px; height: 200px; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }\r\n  .ce-wheel-ring { position: absolute; inset: -4px; border-radius: 50%; border: 4px solid var(--bg2); pointer-events: none; }\r\n  .ce-wheel-pin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.3); pointer-events: none; transform: translate(-50%,-50%); transition: left .05s, top .05s; }\r\n\r\n  \/* Base Preview Card - Added shadow and hover effect *\/\r\n  .ce-base-preview { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-radius: var(--radius); border: 1px solid var(--bd); width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; }\r\n  .ce-base-preview:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }\r\n  .ce-base-swatch { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }\r\n  .ce-base-info { font-size: 13px; line-height: 1.5; }\r\n  .ce-base-hex { font-weight: 700; font-size: 15px; cursor: pointer; background: none; border: none; color: var(--tx); padding: 0; text-align: left; letter-spacing: 0.5px;}\r\n  .ce-base-hex:hover { color: #005fcc; }\r\n  .ce-base-secondary { color: var(--tx3); font-size: 11px; font-weight: 500;}\r\n\r\n  .ce-sliders-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }\r\n  .ce-slider-block { display: flex; flex-direction: column; gap: 8px; background: var(--bg2); padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--bd); }\r\n  .ce-slider-head { display: flex; align-items: center; justify-content: space-between; }\r\n  .ce-slider-label { font-size: 13px; font-weight: 600; color: var(--tx2); }\r\n  .ce-slider-val { font-size: 13px; font-weight: 700; color: var(--tx); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }\r\n  .ce-slider-track { position: relative; width: 100%; height: 28px; display: flex; align-items: center; }\r\n  .ce-slider-track input[type=range] { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; border-radius: 4px; outline: none; cursor: pointer; background: transparent; }\r\n  .ce-slider-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--bd2); box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: grab; transition: border-color .15s, transform 0.1s; margin-top: -7px; }\r\n  .ce-slider-track input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }\r\n  .ce-slider-track input[type=range]::-webkit-slider-thumb:hover { border-color: var(--tx3); transform: scale(1.1); }\r\n  \r\n  #ce-sl-h-track { background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%)); border-radius: 4px; position: absolute; inset: 0; top: 10px; height: 8px; z-index: 0; pointer-events: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}\r\n  #ce-sl-h { position: relative; z-index: 1; }\r\n\r\n  .ce-harmony-section { margin-bottom: 28px; }\r\n  \r\n  \/* Tabs - Neumorphic elevated active state *\/\r\n  .ce-harmony-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; background: var(--bg2); border-radius: var(--radius); padding: 4px; width: 100%; box-shadow: inset 0 1px 3px rgba(0,0,0,0.03); border: 1px solid var(--bd); }\r\n  .ce-harmony-tabs button { flex: 1; padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--tx3); transition: all .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n  .ce-harmony-tabs button.active { background: var(--bg); color: var(--tx); box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }\r\n  .ce-harmony-tabs button:hover:not(.active) { color: var(--tx); background: rgba(255,255,255,0.4); }\r\n  \r\n  \/* Color Strips - Added depth *\/\r\n  .ce-palette-strip { display: flex; border-radius: var(--radius); overflow: hidden; height: 80px; border: 1px solid var(--bd); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }\r\n  .ce-palette-strip .ce-sw { flex: 1; cursor: pointer; position: relative; transition: flex .3s cubic-bezier(.4,0,.2,1); border: none; padding: 0; }\r\n  .ce-palette-strip .ce-sw:hover, .ce-palette-strip .ce-sw:focus { flex: 1.5; outline: none; z-index: 2; box-shadow: 0 0 20px rgba(0,0,0,0.15); }\r\n  .ce-palette-strip .ce-sw:focus-visible { z-index: 3; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #000; }\r\n  .ce-palette-strip .ce-sw .ce-lbl { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 4px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .5px; opacity: 0; transition: opacity .2s, transform .2s; transform: translateY(8px); background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); }\r\n  .ce-palette-strip .ce-sw:hover .ce-lbl, .ce-palette-strip .ce-sw:focus .ce-lbl { opacity: 1; transform: translateY(0); }\r\n\r\n  .ce-tints-section { margin-bottom: 28px; }\r\n  .ce-tints-strip { display: flex; border-radius: var(--radius-sm); overflow: hidden; height: 40px; border: 1px solid var(--bd); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }\r\n  .ce-tints-strip .ce-sw { flex: 1; cursor: pointer; position: relative; transition: flex .2s; border: none; padding: 0; }\r\n  .ce-tints-strip .ce-sw:hover, .ce-tints-strip .ce-sw:focus { flex: 1.6; outline: none; z-index: 2; box-shadow: 0 0 10px rgba(0,0,0,0.1); }\r\n  .ce-tints-strip .ce-sw:focus-visible { z-index: 3; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #000; }\r\n  .ce-tints-strip .ce-sw .ce-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; opacity: 0; transition: opacity .2s; }\r\n  .ce-tints-strip .ce-sw:hover .ce-lbl, .ce-tints-strip .ce-sw:focus .ce-lbl { opacity: 1; }\r\n\r\n  .ce-details-section { margin-bottom: 32px; }\r\n  .ce-detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }\r\n  \r\n  \/* Detail Cards - Beautiful soft shadows *\/\r\n  .ce-d-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bd); cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; background: #fff; padding: 0; text-align: left; width: 100%; display: block; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }\r\n  .ce-d-card:hover, .ce-d-card:focus { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); border-color: var(--bd2); outline: none; }\r\n  .ce-d-card:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }\r\n  .ce-d-card .ce-d-color { height: 64px; position: relative; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); }\r\n  .ce-d-card .ce-d-color .ce-d-num { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.15); backdrop-filter: blur(4px); }\r\n  .ce-d-card .ce-d-info { padding: 12px 10px; color: var(--tx); overflow-wrap: break-word; word-wrap: break-word; }\r\n  .ce-d-card .ce-d-hex { font-size: 13px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.5px; }\r\n  .ce-d-card .ce-d-rgb { font-size: 11px; color: var(--tx2); margin-bottom: 2px;}\r\n  .ce-d-card .ce-d-hsl { font-size: 11px; color: var(--tx3); }\r\n\r\n  \/* Export Buttons - Elevated Pills *\/\r\n  .ce-export-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 16px; border-top: 1px solid var(--bd); }\r\n  .ce-export-row button { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--bd2); border-radius: 24px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--tx); transition: all .2s; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }\r\n  .ce-export-row button:hover, .ce-export-row button:focus { background: var(--bg2); border-color: var(--tx3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); outline: none;}\r\n  .ce-export-row button:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }\r\n  .ce-export-row button:active { transform: translateY(1px); box-shadow: none; }\r\n  .ce-export-row button svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tx2); }\r\n\r\n  .ce-toast { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111827; color: #fff; padding: 12px 24px; border-radius: 30px; font-size: 14px; font-weight: 600; opacity: 0; transition: all .3s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.2); letter-spacing: 0.3px; }\r\n  .ce-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }\r\n  .ce-toast.fail { background: #dc3545; }\r\n\r\n  \/* Mobile Adjustments *\/\r\n  @media (max-width: 767px) { \r\n    .ce-colour-explorer {\r\n        margin: 20px auto;\r\n        padding: 24px 16px 32px;\r\n        border-radius: var(--radius); \/* Slightly smaller curves on mobile *\/\r\n        box-shadow: 0 8px 24px -8px rgba(0,0,0,0.1);\r\n        min-height: 1050px; \r\n    }\r\n    .ce-picker-row { flex-direction: column; align-items: center; width: 100%; max-width: 100%; gap: 24px; }\r\n    .ce-sliders-col { width: 100%; max-width: 100%; }\r\n    .ce-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n.ce-harmony-tabs button { flex: 1 1 calc(33.333% - 4px); }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"ce-colour-widget\" class=\"ce-colour-explorer\">\r\n  <div class=\"ce-app-header\">\r\n    <h2>Colour palette explorer<\/h2>\r\n    <span class=\"ce-badge\">Interactive<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"ce-picker-row\">\r\n    <div class=\"ce-wheel-col\">\r\n      <span class=\"ce-sec-label\">Base colour<\/span>\r\n      <div class=\"ce-wheel-wrap\">\r\n        <canvas id=\"ce-wheel\" width=\"200\" height=\"200\" aria-label=\"Interactive colour wheel\"><\/canvas>\r\n        <div class=\"ce-wheel-ring\"><\/div>\r\n        <div class=\"ce-wheel-pin\" id=\"ce-pin\"><\/div>\r\n      <\/div>\r\n      <div class=\"ce-base-preview\">\r\n        <div class=\"ce-base-swatch\" id=\"ce-base-swatch\"><\/div>\r\n        <div class=\"ce-base-info\">\r\n          <button class=\"ce-base-hex ce-copy-trigger\" id=\"ce-base-hex\" aria-label=\"Copy base hex code\"><\/button>\r\n          <div class=\"ce-base-secondary\" id=\"ce-base-rgb\"><\/div>\r\n          <div class=\"ce-base-secondary\" id=\"ce-base-hsl\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ce-sliders-col\">\r\n      <span class=\"ce-sec-label\">Adjust HSL<\/span>\r\n      <div class=\"ce-slider-block\">\r\n        <div class=\"ce-slider-head\"><label for=\"ce-sl-h\" class=\"ce-slider-label\">Hue<\/label><span class=\"ce-slider-val\" id=\"ce-v-h\">200\u00b0<\/span><\/div>\r\n        <div class=\"ce-slider-track\">\r\n          <div id=\"ce-sl-h-track\"><\/div>\r\n          <input type=\"range\" id=\"ce-sl-h\" min=\"0\" max=\"360\" value=\"200\" step=\"1\" aria-label=\"Hue\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"ce-slider-block\">\r\n        <div class=\"ce-slider-head\"><label for=\"ce-sl-s\" class=\"ce-slider-label\">Saturation<\/label><span class=\"ce-slider-val\" id=\"ce-v-s\">72%<\/span><\/div>\r\n        <div class=\"ce-slider-track\">\r\n            <style id=\"ce-sl-s-style\"><\/style>\r\n            <input type=\"range\" id=\"ce-sl-s\" min=\"0\" max=\"100\" value=\"72\" step=\"1\" aria-label=\"Saturation\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"ce-slider-block\">\r\n        <div class=\"ce-slider-head\"><label for=\"ce-sl-l\" class=\"ce-slider-label\">Lightness<\/label><span class=\"ce-slider-val\" id=\"ce-v-l\">50%<\/span><\/div>\r\n        <div class=\"ce-slider-track\">\r\n            <style id=\"ce-sl-l-style\"><\/style>\r\n            <input type=\"range\" id=\"ce-sl-l\" min=\"5\" max=\"95\" value=\"50\" step=\"1\" aria-label=\"Lightness\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ce-harmony-section\">\r\n    <span class=\"ce-sec-label\">Harmony Settings<\/span>\r\n    <div class=\"ce-harmony-tabs\" id=\"ce-tabs\" role=\"tablist\"><\/div>\r\n    <div class=\"ce-palette-strip\" id=\"ce-palette\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ce-tints-section\">\r\n    <span class=\"ce-sec-label\">Tints &amp; shades<\/span>\r\n    <div class=\"ce-tints-strip\" id=\"ce-tints\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ce-details-section\">\r\n    <span class=\"ce-sec-label\">Palette values<\/span>\r\n    <div class=\"ce-detail-grid\" id=\"ce-details\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ce-export-row\">\r\n    <button id=\"ce-btn-css\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2\"\/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"\/><\/svg>\r\n      Copy CSS\r\n    <\/button>\r\n    <button id=\"ce-btn-tw\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2\"\/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"\/><\/svg>\r\n      Copy Tailwind\r\n    <\/button>\r\n    <button id=\"ce-btn-arr\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2\"\/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"\/><\/svg>\r\n      Copy Array\r\n    <\/button>\r\n  <\/div>\r\n  <div class=\"ce-toast\" id=\"ce-toast\" aria-live=\"polite\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* 2. IIFE (Immediately Invoked Function Expression) to avoid global namespace pollution *\/\r\n(function() {\r\n  const wrapper = document.getElementById('ce-colour-widget');\r\n  if (!wrapper) return;\r\n\r\n  \/\/ Scoped DOM selector\r\n  const $ = id => wrapper.querySelector('#' + id);\r\n  \r\n  let H = 200, S = 72, L = 50, mode = 'analogous';\r\n  const modes = ['complementary','analogous','triadic','split-comp','tetradic','mono'];\r\n  const modeLabels = { 'complementary':'Complementary','analogous':'Analogous','triadic':'Triadic','split-comp':'Split comp.','tetradic':'Tetradic','mono':'Monochromatic' };\r\n\r\n  function hsl2rgb(h,s,l){h\/=360;s\/=100;l\/=100;let a=s*Math.min(l,1-l),f=n=>{let k=(n+h*12)%12;return l-a*Math.max(Math.min(k-3,9-k,1),-1)};return[Math.round(f(0)*255),Math.round(f(8)*255),Math.round(f(4)*255)];}\r\n  function rgb2hex(r,g,b){return'#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('');}\r\n  function contrastColor(h,s,l){return l>55?'rgba(0,0,0,.8)':'rgba(255,255,255,.9)';}\r\n\r\n  function drawWheel(){\r\n    const c=$('ce-wheel'), ctx=c.getContext('2d'), cx=100, cy=100, r=98;\r\n    ctx.clearRect(0,0,200,200);\r\n    for(let a=0;a<360;a++){\r\n      const rad=a*Math.PI\/180;\r\n      ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,r,rad,rad+Math.PI\/180+.01);ctx.closePath();\r\n      const g=ctx.createRadialGradient(cx,cy,0,cx,cy,r);\r\n      const hue=(a+90)%360;\r\n      g.addColorStop(0,`hsl(${hue},10%,${L}%)`);\r\n      g.addColorStop(1,`hsl(${hue},100%,${L}%)`);\r\n      ctx.fillStyle=g;ctx.fill();\r\n    }\r\n  }\r\n\r\n  function getHarmony(){\r\n    const wrap=h=>(h%360+360)%360;\r\n    switch(mode){\r\n      case'complementary':return[{h:H,s:S,l:L},{h:wrap(H+180),s:S,l:L},{h:H,s:Math.max(S-20,10),l:Math.min(L+20,90)},{h:wrap(H+180),s:Math.max(S-20,10),l:Math.min(L+20,90)},{h:H,s:S,l:Math.max(L-15,10)}];\r\n      case'analogous':return[{h:wrap(H-30),s:S,l:L},{h:wrap(H-15),s:S,l:L},{h:H,s:S,l:L},{h:wrap(H+15),s:S,l:L},{h:wrap(H+30),s:S,l:L}];\r\n      case'triadic':return[{h:H,s:S,l:L},{h:wrap(H+120),s:S,l:L},{h:wrap(H+240),s:S,l:L},{h:H,s:Math.max(S-25,10),l:Math.min(L+25,90)},{h:wrap(H+120),s:Math.max(S-25,10),l:Math.min(L+25,90)}];\r\n      case'split-comp':return[{h:H,s:S,l:L},{h:wrap(H+150),s:S,l:L},{h:wrap(H+210),s:S,l:L},{h:H,s:Math.max(S-15,10),l:Math.min(L+20,90)},{h:wrap(H+180),s:Math.max(S-30,10),l:Math.min(L+30,90)}];\r\n      case'tetradic':return[{h:H,s:S,l:L},{h:wrap(H+90),s:S,l:L},{h:wrap(H+180),s:S,l:L},{h:wrap(H+270),s:S,l:L},{h:H,s:Math.max(S-20,10),l:Math.min(L+15,90)}];\r\n      case'mono':return[{h:H,s:S,l:Math.min(L+30,92)},{h:H,s:S,l:Math.min(L+15,85)},{h:H,s:S,l:L},{h:H,s:S,l:Math.max(L-15,12)},{h:H,s:S,l:Math.max(L-30,8)}];\r\n    }\r\n  }\r\n\r\n  function getTints(){\r\n    const out=[];\r\n    for(let i=0;i<9;i++) out.push({h:H,s:S,l:Math.round(95-i\/8*85)});\r\n    return out;\r\n  }\r\n\r\n  function render(){\r\n    const [r,g,b]=hsl2rgb(H,S,L);\r\n    const hex=rgb2hex(r,g,b).toUpperCase();\r\n    $('ce-base-swatch').style.background=`hsl(${H},${S}%,${L}%)`;\r\n    $('ce-base-hex').textContent=hex;\r\n    $('ce-base-hex').setAttribute('data-copy', hex);\r\n    $('ce-base-rgb').textContent=`rgb(${r}, ${g}, ${b})`;\r\n    $('ce-base-hsl').textContent=`hsl(${H}, ${S}%, ${L}%)`;\r\n\r\n    \/\/ Avoid inline styles on inputs that might conflict, use dynamic style blocks instead\r\n    $('ce-sl-s-style').textContent = `#ce-sl-s::-webkit-slider-runnable-track { background: linear-gradient(to right, hsl(${H},0%,${L}%), hsl(${H},100%,${L}%)); }`;\r\n    $('ce-sl-l-style').textContent = `#ce-sl-l::-webkit-slider-runnable-track { background: linear-gradient(to right, #000, hsl(${H},${S}%,50%), #fff); }`;\r\n\r\n    const pal=getHarmony();\r\n    $('ce-palette').innerHTML=pal.map((c,i)=>{\r\n      const [cr,cg,cb]=hsl2rgb(c.h,c.s,c.l);\r\n      const ch=rgb2hex(cr,cg,cb).toUpperCase();\r\n      const tc=contrastColor(c.h,c.s,c.l);\r\n      return `<button type=\"button\" class=\"ce-sw ce-copy-trigger\" data-copy=\"${ch}\" style=\"background:hsl(${c.h},${c.s}%,${c.l}%)\" aria-label=\"Copy ${ch}\"><span class=\"ce-lbl\" style=\"color:${tc}\">${ch}<\/span><\/button>`;\r\n    }).join('');\r\n\r\n    const tints=getTints();\r\n    $('ce-tints').innerHTML=tints.map(c=>{\r\n      const [cr,cg,cb]=hsl2rgb(c.h,c.s,c.l);\r\n      const ch=rgb2hex(cr,cg,cb).toUpperCase();\r\n      const tc=contrastColor(c.h,c.s,c.l);\r\n      return `<button type=\"button\" class=\"ce-sw ce-copy-trigger\" data-copy=\"${ch}\" style=\"background:hsl(${c.h},${c.s}%,${c.l}%)\" aria-label=\"Copy ${ch}\"><span class=\"ce-lbl\" style=\"color:${tc}\">${ch}<\/span><\/button>`;\r\n    }).join('');\r\n\r\n    $('ce-details').innerHTML=pal.map((c,i)=>{\r\n      const [cr,cg,cb]=hsl2rgb(c.h,c.s,c.l);\r\n      const ch=rgb2hex(cr,cg,cb).toUpperCase();\r\n      const tc=contrastColor(c.h,c.s,c.l);\r\n      return `<button type=\"button\" class=\"ce-d-card ce-copy-trigger\" data-copy=\"${ch}\" aria-label=\"Copy ${ch}\"><div class=\"ce-d-color\" style=\"background:hsl(${c.h},${c.s}%,${c.l}%)\"><span class=\"ce-d-num\" style=\"color:${tc}\">${i+1}<\/span><\/div><div class=\"ce-d-info\"><div class=\"ce-d-hex\">${ch}<\/div><div class=\"ce-d-rgb\">${cr}, ${cg}, ${cb}<\/div><div class=\"ce-d-hsl\">${Math.round(c.h)}\u00b0 ${Math.round(c.s)}% ${Math.round(c.l)}%<\/div><\/div><\/button>`;\r\n    }).join('');\r\n\r\n    updatePin();\r\n  }\r\n\r\n  function updatePin(){\r\n    const cx=100,cy=100,r=98;\r\n    const satR=(S\/100)*r;\r\n    const rad=(H-90)*Math.PI\/180;\r\n    $('ce-pin').style.left=Math.round(cx+satR*Math.cos(rad))+'px';\r\n    $('ce-pin').style.top=Math.round(cy+satR*Math.sin(rad))+'px';\r\n    $('ce-pin').style.background=`hsl(${H},${S}%,${L}%)`;\r\n  }\r\n\r\n  function buildTabs(){\r\n    $('ce-tabs').innerHTML=modes.map(m=>`<button type=\"button\" role=\"tab\" aria-selected=\"${m===mode}\" class=\"${m===mode?'active':''}\" data-mode=\"${m}\">${modeLabels[m]}<\/button>`).join('');\r\n  }\r\n\r\n  function syncSliders(){\r\n    $('ce-sl-h').value=H; $('ce-sl-s').value=S; $('ce-sl-l').value=L;\r\n    $('ce-v-h').textContent=H+'\u00b0'; $('ce-v-s').textContent=S+'%'; $('ce-v-l').textContent=L+'%';\r\n  }\r\n\r\n  $('ce-sl-h').addEventListener('input', e=>{H=+e.target.value;$('ce-v-h').textContent=H+'\u00b0';drawWheel();render();});\r\n  $('ce-sl-s').addEventListener('input', e=>{S=+e.target.value;$('ce-v-s').textContent=S+'%';render();});\r\n  $('ce-sl-l').addEventListener('input', e=>{L=+e.target.value;$('ce-v-l').textContent=L+'%';drawWheel();render();});\r\n\r\n  let dragging=false;\r\n  function wheelPick(e){\r\n    const rect=$('ce-wheel').getBoundingClientRect();\r\n    const scaleX=200\/rect.width, scaleY=200\/rect.height;\r\n    const x=(e.clientX-rect.left)*scaleX-100, y=(e.clientY-rect.top)*scaleY-100;\r\n    const dist=Math.sqrt(x*x+y*y);\r\n    if(dist>100) return;\r\n    H=Math.round((Math.atan2(y,x)*180\/Math.PI+90+360)%360);\r\n    S=Math.round(Math.min(dist\/98,1)*100);\r\n    syncSliders();render();\r\n  }\r\n  \r\n  $('ce-wheel').addEventListener('pointerdown',e=>{dragging=true;wheelPick(e);$('ce-wheel').setPointerCapture(e.pointerId);});\r\n  $('ce-wheel').addEventListener('pointermove',e=>{if(dragging)wheelPick(e);});\r\n  $('ce-wheel').addEventListener('pointerup',()=>dragging=false);\r\n\r\n  \/\/ Event Delegation for dynamically generated buttons\r\n  wrapper.addEventListener('click', e => {\r\n    \/\/ Mode tabs\r\n    if(e.target.closest('#ce-tabs button')) {\r\n      mode = e.target.closest('button').dataset.mode;\r\n      buildTabs(); render();\r\n    }\r\n    \/\/ Copy triggers\r\n    const copyBtn = e.target.closest('.ce-copy-trigger');\r\n    if(copyBtn) copyHex(copyBtn.dataset.copy);\r\n  });\r\n\r\n  function copyToClipboard(text, label) {\r\n    if (navigator.clipboard && window.isSecureContext) {\r\n      navigator.clipboard.writeText(text).then(() => showToast('Copied ' + label, true), () => fallbackCopy(text, label));\r\n    } else {\r\n      fallbackCopy(text, label);\r\n    }\r\n  }\r\n  \r\n  function fallbackCopy(text, label) {\r\n    const ta = document.createElement('textarea');\r\n    ta.value = text;\r\n    ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0;';\r\n    document.body.appendChild(ta);\r\n    ta.focus(); ta.select();\r\n    try { const ok = document.execCommand('copy'); showToast(ok ? 'Copied ' + label : 'Copy failed', ok); } \r\n    catch (e) { showToast('Copy failed', false); }\r\n    document.body.removeChild(ta);\r\n  }\r\n\r\n  function copyHex(hex){ copyToClipboard(hex, hex); }\r\n\r\n  $('ce-btn-css').addEventListener('click', () => {\r\n    const pal=getHarmony();\r\n    const css=pal.map((c,i)=>{const[r,g,b]=hsl2rgb(c.h,c.s,c.l);return`  --palette-${i+1}: ${rgb2hex(r,g,b)};`}).join('\\n');\r\n    copyToClipboard(`:root {\\n${css}\\n}`, 'CSS variables');\r\n  });\r\n\r\n  $('ce-btn-tw').addEventListener('click', () => {\r\n    const pal=getHarmony();\r\n    const obj=pal.map((c,i)=>{const[r,g,b]=hsl2rgb(c.h,c.s,c.l);return`      '${(i+1)*100}': '${rgb2hex(r,g,b)}',`}).join('\\n');\r\n    copyToClipboard(`colors: {\\n    palette: {\\n${obj}\\n    }\\n}`, 'Tailwind config');\r\n  });\r\n\r\n  $('ce-btn-arr').addEventListener('click', () => {\r\n    const pal=getHarmony();\r\n    const arr=pal.map(c=>{const[r,g,b]=hsl2rgb(c.h,c.s,c.l);return`\"${rgb2hex(r,g,b)}\"`}).join(', ');\r\n    copyToClipboard(`[${arr}]`, 'hex array');\r\n  });\r\n\r\n  function showToast(msg, success){\r\n    const t=$('ce-toast');\r\n    t.textContent=msg;\r\n    t.className='ce-toast' + (success ? '' : ' fail');\r\n    t.classList.add('show');\r\n    clearTimeout(t._tid);\r\n    t._tid=setTimeout(()=> t.classList.remove('show'), 1800);\r\n  }\r\n\r\n  \/* 3. Lazy Load Implementation using IntersectionObserver *\/\r\n  let initialized = false;\r\n  const initWidget = () => {\r\n    if (initialized) return;\r\n    drawWheel(); buildTabs(); syncSliders(); render();\r\n    initialized = true;\r\n  };\r\n\r\n  \/\/ Wait for the element to be near the viewport before executing heavy JS\/Canvas operations\r\n  if ('IntersectionObserver' in window) {\r\n    const observer = new IntersectionObserver((entries) => {\r\n      if (entries[0].isIntersecting) {\r\n        initWidget();\r\n        observer.disconnect(); \/\/ Only run once\r\n      }\r\n    }, { rootMargin: '300px' }); \/\/ Load when within 300px of scrolling into view\r\n    observer.observe(wrapper);\r\n  } else {\r\n    \/\/ Fallback for very old browsers\r\n    initWidget(); \r\n  }\r\n})();\r\n<\/script>\r\n\r\n\r\n<div class=\"new-course-promo-blk-banner\">\r\n  <div class=\"l-wrap\">\r\n    <a href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\">\r\n      <div class=\"newcourse-bootcamp-banner\">\r\n        <div class=\"newcourse-bootcamp-banner-left\">\r\n          <p><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/themes\/andacademyblog\/images\/GDC-Stickers.png\"><\/p>\r\n        <\/div>\r\n        <div class=\"newcourse-bootcamp-banner-right\">\r\n          <p><span class=\"newcourse-bootcamp-banner-text-span1\">Built your color palette but not sure how to use it effectively? <\/span><br><span class=\"gd-bootcamp-banner-text-span2\">Explore our design courses.<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n   <\/div>\r\n<\/div>\r\n\r\n<p>Notice how the same base colour gives you a calm result in analogous mode but a bold, high-contrast one in complementary. Use the tints and shades strip to expand your chosen palette further, and copy the values in whichever format fits your workflow. Keep these relationships in mind as you start applying colour theory to your own projects.<\/p>\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"psychology\">What is Colour Psychology?<\/h2>\r\n\r\n\r\n\r\n<p>So far, we\u2019ve explored the practical aspects of colour theory. Now let\u2019s consider the emotional side of colour\u2014otherwise known as colour psychology.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Colour psychology is the study of how colour can influence our emotions, our perceptions, and even how we behave.<\/p>\r\n\r\n\r\n\r\n<p>Take the example of red. In everyday life, red is often used for emergency signs and warning signals, so we might subconsciously associate it with danger. Imagine, then, visiting a spa to find everything decorated in red. The experience may put you on edge and make it difficult to relax.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>While it\u2019s not an exact science, colour psychology ascribes symbolic meanings and associations to different colours\u2014usually based on our personal experiences and cultural influences. Yellow is often associated with joy, green typically connotes nature, while white usually symbolises peace. What other colour associations can you think of?<\/p>\r\n\r\n\r\n\r\n<p>As a designer, it\u2019s important to be aware of colour psychology and how different colours will be perceived by your audience. The colours you choose should accurately convey the brand personality while evoking the right mood in your target user. If your goal is to inspire and excite your audience, you don\u2019t want to choose a colour scheme that ends up evoking a sense of calm and tranquillity.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Working\">Working with Colour: Tips and Best Practices for Designers<\/h2>\r\n\r\n\r\n\r\n<p>You\u2019ve made it to the end of our guide\u2014so consider yourself well-versed in colour theory! To finish up, here are some practical tips you can follow to apply what you\u2019ve learned:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><p><strong>Consider your target audience.<\/strong> This applies to every aspect of design\u2014not just colour. Define your target audience and think about their perceptions, associations, and expectations in relation to colour. What kinds of colours might they want or expect to see in your design? How can you use colour to connect with your target audience and improve their experience? Ask yourself these questions to get an in-depth understanding of the audience you\u2019re catering to.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-20px;\"><strong>Incorporate colour psychology. <\/strong>Consider common associations and connotations that different colours hold\u2014and ask yourself if these align with the brand identity you\u2019re trying to build and the audience you want to appeal to. Colour can be an extremely powerful factor in evoking emotions and influencing the viewer\u2019s mood, so choose wisely.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-20px;\"><strong>Start with the colour wheel. <\/strong>When choosing a colour palette, refer to the colour wheel as your starting point. The colour wheel shows you the relationships between different colours and how different combinations can be used to achieve harmony, contrast, or dynamism.<\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-20px;\"><strong>Pay attention to accessibility. <\/strong>This is especially important for digital products but should be prioritised in all design contexts. If your chosen colour palette makes it difficult for the viewer to read text or pick out key information, your designs will be ineffective\u2014not to mention unenjoyable. Ensure that you\u2019re creating plenty of contrast where it matters most. <\/p><\/li>\r\n\r\n\r\n\r\n<li><p style=\"margin-top:-20px;\"><strong>Experiment and test. <\/strong>You might think you\u2019ve created the perfect colour palette\u2014but how does it look in action? Test your colour palette to ensure that it works as intended, especially if you\u2019re designing for a variety of devices, screen sizes, or print media.&nbsp;<\/p><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 style=\"margin-top:-30px;\" class=\"intext-cta__blog-title wp-block-heading\" id=\"Additional\">Additional Design Tips and Resources<\/h2>\r\n\r\n\r\n\r\n<p>Colour is just one of many tools used by graphic designers (and indeed all kinds of designers!) to create stunning visuals and communicate with their target audience. If you\u2019d like to further develop your graphic design skills, make sure you\u2019re well-versed in <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/fundamental-graphic-design-principles-and-how-to-apply-them\/\" target=\"_blank\" rel=\"noopener\">fundamental graphic design principles<\/a>\u2014or get to grips with <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-typography-design\/\" target=\"_blank\" rel=\"noopener\">typography design<\/a> and <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-logo-design\/\" target=\"_blank\" rel=\"noopener\">logo design<\/a>.<\/p>\r\n\r\n\r\n\r\n<p>Want a more structured approach to learning <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-graphic-design\/\" target=\"_blank\" rel=\"noopener\">graphic design<\/a>? Level up with a professional graphic design certification. Check out the <a href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">AND Academy Graphic Design Course<\/a> or weigh up your options with this round-up of the <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/best-graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">9 best graphic design courses on the market right now<\/a>.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-next-steps\">Next Steps:<\/h2>\r\n\r\n\r\n\r\n<p>We hope our comprehensive guide on colour theory could be of assistance. Here are some additional resources you can consider for further information:<\/p>\r\n\r\n\r\n\r\n<ol class=\"disc wp-block-list\">\r\n<li>Watch <a href=\"https:\/\/www.youtube.com\/watch?v=-7Al38joVkk\" target=\"_blank\" rel=\"noopener\">this session<\/a> by graphic design industry leaders Soumya Tiwari and Sakshi Jain.<\/li>\r\n\r\n\r\n\r\n<li>Talk to a <a class=\"circle_anch pop_show my_pop_show1\" href=\"#consultcourseadvisors\"> course advisor<\/a> to discuss how you can transform your career with one of our courses.<\/li>\r\n\r\n\r\n\r\n<li>Explore our <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">Graphic Design Course<\/a>, which is taught through live, interactive classes by industry experts, and comes with a <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">job guarantee<\/a>.<\/li>\r\n\r\n\r\n\r\n<li>Take advantage of the <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/#:~:text=graphic%20design%20course%20fee%20&amp;%20funding\" target=\"_blank\" rel=\"noopener\">scholarship and funding options that come with our courses<\/a> to overcome any financial hurdle on the path of your career transformation.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p><em>Note: All information and\/or data from external sources is believed to be accurate as of the date of publication.<\/em><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>At first glance, colour might seem like a pretty simple concept. But actually, there\u2019s a whole discipline dedicated to the study and application of colour\u2014and it\u2019s rooted not only in art but also in science and psychology.&nbsp; If you want to use colour effectively in your designs, you need to get to grips with colour [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":7536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[33],"class_list":["post-7366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-design","tag-and-academy"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Complete Guide to Colour Theory | AND Academy\u202f\u202f<\/title>\n<meta name=\"description\" content=\"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Complete Guide to Colour Theory | AND Academy\u202f\u202f\" \/>\n<meta property=\"og:description\" content=\"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/\" \/>\n<meta property=\"og:site_name\" content=\"AND Academy\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-08T11:03:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-16T11:15:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image2-4.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1999\" \/>\n\t<meta property=\"og:image:height\" content=\"1333\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Emily Stevens\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"A Complete Guide to Colour Theory | AND Academy\u202f\u202f\" \/>\n<meta name=\"twitter:description\" content=\"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Stevens\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/\"},\"author\":{\"name\":\"Emily Stevens\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/af0fd06e2364bbc12f94772edb7e4108\"},\"headline\":\"A Complete Guide to Colour Theory in Design\",\"datePublished\":\"2023-11-08T11:03:18+00:00\",\"dateModified\":\"2026-04-16T11:15:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/\"},\"wordCount\":3019,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/bb1.webp\",\"keywords\":[\"AND Academy\"],\"articleSection\":[\"Graphic Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/\",\"name\":\"A Complete Guide to Colour Theory | AND Academy\u202f\u202f\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/bb1.webp\",\"datePublished\":\"2023-11-08T11:03:18+00:00\",\"dateModified\":\"2026-04-16T11:15:30+00:00\",\"description\":\"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/bb1.webp\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/bb1.webp\",\"width\":780,\"height\":410},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/guide-to-colour-theory\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Complete Guide to Colour Theory in Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"name\":\"AND Academy\",\"description\":\"Design Courses with Placement Guarantee | AND Academy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"alternateName\":\"AND Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\",\"name\":\"AND Academy\",\"alternateName\":\"AND Academy\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"width\":2560,\"height\":2560,\"caption\":\"AND Academy\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/af0fd06e2364bbc12f94772edb7e4108\",\"name\":\"Emily Stevens\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g\",\"caption\":\"Emily Stevens\"},\"sameAs\":[\"http:\\\/\\\/andacademy.com\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/emily-stevens-8bab706a\\\/\"],\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/author\\\/emily-stevens\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Complete Guide to Colour Theory | AND Academy\u202f\u202f","description":"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/","og_locale":"en_US","og_type":"article","og_title":"A Complete Guide to Colour Theory | AND Academy\u202f\u202f","og_description":"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.","og_url":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/","og_site_name":"AND Academy","article_published_time":"2023-11-08T11:03:18+00:00","article_modified_time":"2026-04-16T11:15:30+00:00","og_image":[{"width":1999,"height":1333,"url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/image2-4.webp","type":"image\/webp"}],"author":"Emily Stevens","twitter_card":"summary_large_image","twitter_title":"A Complete Guide to Colour Theory | AND Academy\u202f\u202f","twitter_description":"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.","twitter_misc":{"Written by":"Emily Stevens","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#article","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/"},"author":{"name":"Emily Stevens","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/af0fd06e2364bbc12f94772edb7e4108"},"headline":"A Complete Guide to Colour Theory in Design","datePublished":"2023-11-08T11:03:18+00:00","dateModified":"2026-04-16T11:15:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/"},"wordCount":3019,"commentCount":0,"publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/bb1.webp","keywords":["AND Academy"],"articleSection":["Graphic Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/","url":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/","name":"A Complete Guide to Colour Theory | AND Academy\u202f\u202f","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#primaryimage"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/bb1.webp","datePublished":"2023-11-08T11:03:18+00:00","dateModified":"2026-04-16T11:15:30+00:00","description":"Explore the world of colour theory in this complete guide. Also learn about the main elements of the colour wheel, types of colour schemes, and colour psychology.","breadcrumb":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#primaryimage","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/bb1.webp","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/11\/bb1.webp","width":780,"height":410},{"@type":"BreadcrumbList","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/guide-to-colour-theory\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andacademy.com\/resources\/"},{"@type":"ListItem","position":2,"name":"A Complete Guide to Colour Theory in Design"}]},{"@type":"WebSite","@id":"https:\/\/www.andacademy.com\/resources\/#website","url":"https:\/\/www.andacademy.com\/resources\/","name":"AND Academy","description":"Design Courses with Placement Guarantee | AND Academy","publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"alternateName":"AND Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andacademy.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.andacademy.com\/resources\/#organization","name":"AND Academy","alternateName":"AND Academy","url":"https:\/\/www.andacademy.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","width":2560,"height":2560,"caption":"AND Academy"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/af0fd06e2364bbc12f94772edb7e4108","name":"Emily Stevens","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/621fb2cf576106d5d9e391cc1cd970f932a20a841a9af8639eac77b9b6d26d4c?s=96&d=mm&r=g","caption":"Emily Stevens"},"sameAs":["http:\/\/andacademy.com","https:\/\/www.linkedin.com\/in\/emily-stevens-8bab706a\/"],"url":"https:\/\/www.andacademy.com\/resources\/author\/emily-stevens\/"}]}},"_links":{"self":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/7366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/comments?post=7366"}],"version-history":[{"count":30,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/7366\/revisions"}],"predecessor-version":[{"id":22638,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/7366\/revisions\/22638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media\/7536"}],"wp:attachment":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media?parent=7366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/categories?post=7366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/tags?post=7366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}