Color Theory Basics for Graphic Design

Learning Objectives

By the end of this chapter, you will:

1. Identify primary, secondary, and tertiary colors and understand their relationships
2. Apply warm and cool colour tones to create specific emotional effects in your designs
3. Use Squarespace's colour tools to build harmonious palettes for your projects

Introduction

Colour is one of the most powerful tools in graphic design. It can grab attention, convey meaning, and trigger emotional responses before viewers even read a single word. Understanding colour theory helps you make intentional choices that strengthen your designs and communicate more effectively with your audience.

This chapter covers the fundamental principles of colour theory and shows you how to apply them using Squarespace's design tools. You'll learn to create colour schemes that work together harmoniously and support your design goals.

Lessons

Understanding the Colour Wheel

The colour wheel organises colours in a logical way that helps you understand their relationships. Primary colours – red, blue, and yellow – form the foundation. These cannot be created by mixing other colours together.

Secondary colours emerge when you mix two primary colours:

• Red + Blue = Purple
• Blue + Yellow = Green
• Yellow + Red = Orange

Tertiary colours appear when you combine a primary with its neighbouring secondary colour, creating shades like red-orange, yellow-green, or blue-purple.

Step 1: Open Squarespace's colour picker tool and locate the colour wheel interface.

Step 2: Click on different sections to see how primary, secondary, and tertiary colours relate to each other.

Step 3: Notice how colours positioned opposite each other (complementary colours) create strong contrast, while neighbouring colours (analogous colours) blend smoothly together.

Working with Warm and Cool Tones

Colours carry emotional weight. Warm colours – reds, oranges, and yellows – tend to feel energetic, passionate, or cosy. They advance towards the viewer and grab attention. Cool colours – blues, greens, and purples – often feel calm, professional, or refreshing. They recede into the background and create a sense of space.

Step 1: In your Squarespace design area, create two simple shapes or text elements.

Step 2: Apply a warm colour (like orange or red) to the first element. Notice how it seems to jump forward.

Step 3: Apply a cool colour (like blue or green) to the second element. Observe how it appears to sit back.

Step 4: Try combining warm and cool colours in the same design to create visual hierarchy and balance.

This is the bit most people miss – you can use temperature contrast to guide where viewers look first and how they move through your design.

Creating Harmonious Colour Schemes

Harmony happens when colours work together without fighting for attention. Squarespace offers several tools to help you build cohesive palettes.

Step 1: In your site's design panel, navigate to the colour settings.

Step 2: Choose your primary brand colour first – this anchors your entire palette.

Step 3: Use Squarespace's suggested colour combinations to find complementary options, or manually select colours using these common schemes:

• Monochromatic: Different shades and tints of one colour
• Analogous: Colours next to each other on the wheel
• Complementary: Colours opposite each other on the wheel
• Triadic: Three colours evenly spaced around the wheel

Step 4: Test your palette across different page elements – headers, body text, buttons, and backgrounds.

Step 5: Use the preview function to see how your colours work together in context.

Here's the quick version: limit yourself to 3-4 main colours plus neutral tones (black, white, grey) to avoid visual chaos.

Practice

Create a simple webpage layout in Squarespace using the colour principles from this chapter:

1. Choose one primary colour that fits your content's mood
2. Add one complementary accent colour for contrast
3. Include warm and cool tones to create visual interest
4. Apply your colour scheme to headers, body text, buttons, and background elements
5. Preview your design and adjust if any colours clash or compete

Pay attention to how different colour combinations change the feel of your page.

FAQs

What's the difference between RGB and hex colour codes in Squarespace?
RGB uses red, green, and blue light values (0-255) for screen display. Hex codes are the same colours written in web-friendly format using letters and numbers. Squarespace accepts both, but hex codes are more common for web design.

Can I use colours outside the suggested Squarespace palettes?
Yes, you can input custom hex codes or use the colour picker to select any colour. The suggested palettes are starting points, not limitations.

How many colours should I use in one design?
Stick to 3-4 main colours plus neutrals. Too many colours create visual confusion. You can always use different shades and tints of your main colours for variety.

Why do my colours look different on mobile vs desktop?
Screen settings, lighting conditions, and device calibration affect colour appearance. Always preview your designs on multiple devices and adjust if needed.

Jargon Buster

Analogous colours: Colours that sit next to each other on the colour wheel, like blue, blue-green, and green

Complementary colours: Colours positioned opposite each other on the colour wheel that create high contrast when used together

Hex code: A six-digit code (like #FF5733) that represents colours in web design

Monochromatic: A colour scheme using different shades, tints, and tones of a single colour

Primary colours: The three base colours (red, blue, yellow) that cannot be created by mixing other colours

Secondary colours: Colours created by mixing two primary colours (green, orange, purple)

Tertiary colours: Colours formed by mixing a primary and secondary colour (like red-orange or yellow-green)

Tint: A colour mixed with white to make it lighter

Shade: A colour mixed with black to make it darker

Wrap-up

You now understand how colours relate to each other and affect viewers emotionally. You can identify primary, secondary, and tertiary colours, use warm and cool tones strategically, and create harmonious palettes using Squarespace's tools.

Roll your sleeves up and start experimenting with different colour combinations in your own projects. The more you practice applying these principles, the more natural colour selection becomes.

Next, you'll learn about typography fundamentals and how colours and fonts work together to create cohesive designs.

Ready to take your design skills further? Join our community of learners: https://www.pixelhaze.academy/membership