Shell Commands

1. Hue, saturation and value

Hue is the basic colour family, such as red, blue or green. Saturation describes how intense or muted a colour appears. Value describes how light or dark it is. Changing these three properties can produce very different visual results from the same basic hue.

For example, a highly saturated blue can feel energetic, while a low-saturation blue-grey may feel calmer and more restrained. A very light tint and a very dark shade of the same hue can create strong hierarchy when used together.

2. Warm and cool colours

Reds, oranges and yellows are commonly described as warm colours, while blues and many blue-greens are described as cool. This is a useful design shorthand rather than a rigid emotional rule. Context, saturation and surrounding colours can change how a colour feels.

3. Useful colour relationships

4. Build a functional palette

A practical design system often needs more than a single “main colour”. Start with a background or neutral, a primary colour, a secondary or supporting colour, and an accent for actions or important information. You can then create lighter and darker variants as needed.

5. Contrast and readability

Colour contrast must support the content. Light grey text on a white background may look subtle in a design editor but become difficult to read in real use. Check text against its actual background and test the design on the device where it will be viewed.

Do not rely on colour alone to communicate status or meaning. For example, instead of showing only green for success and red for failure, include a word, icon or other clear cue as well.

6. Colour and brand consistency

When creating a series of posts, thumbnails or pages, record the exact colour values you choose. Reusing the same palette makes the work feel connected. If the palette changes for every design, even good individual pieces can look like unrelated projects.

Real-world example: a workshop poster

Imagine a poster for a beginner design workshop. Use a neutral background, one confident primary colour for the title, a quieter supporting colour for secondary information, and a contrasting accent for registration. Keep the body text in a high-contrast colour and leave enough empty space around the accent so it remains meaningful.

Practical exercise

1. Choose one subject for a social post, such as a design workshop or product announcement.
2. Create a four-colour palette: neutral, primary, supporting and accent.
3. Make one version using a monochromatic approach.
4. Make another version using a complementary accent.
5. Check the smallest text first. If it is hard to read, adjust the colour or background rather than adding a shadow and hoping it fixes the problem.
6. Save the final colour values so you can reproduce the palette later.

Common mistakes

• Choosing colours only because they look attractive in isolation.
• Using too many saturated colours at the same visual strength.
• Putting low-contrast text over a busy or similarly coloured background.
• Changing brand colours from one graphic to the next.
• Using colour as the only signal for an important message.

Quick self-check

1. What is the difference between hue, saturation and value?
2. Why might a monochromatic palette be useful?
3. Where is the accent colour in your design, and what job does it perform?
4. Can every important piece of information still be understood without relying only on colour?
5. Have you checked the smallest text for sufficient contrast?

Key takeaway

Use colour deliberately: establish hierarchy, support readability, create a consistent visual language and reserve strong accents for information that truly needs attention.