Colour Theory Guide
Everything you need to know about colour harmony, accessibility contrast, image palette extraction and CSS gradients.
Contents
1. Understanding Colour Harmony
Colour harmony refers to aesthetically pleasing colour combinations based on their positions on the colour wheel. Harmonious palettes feel balanced and visually satisfying. ColourKit supports six harmony modes:
Complementary
Two colours directly opposite each other on the colour wheel (180 degrees apart). This creates maximum contrast and visual tension. Great for call-to-action elements where you want something to stand out. Example: blue and orange.
Analogous
Three colours sitting next to each other on the wheel (typically 30 degrees apart). These palettes feel calm, comfortable and cohesive. They work well for backgrounds and large surfaces. Example: blue, blue-green, green.
Triadic
Three colours evenly spaced around the wheel (120 degrees apart). Triadic schemes are vibrant and balanced, even when using muted tones. They provide strong visual contrast while maintaining harmony. Example: red, yellow, blue.
Split-Complementary
A base colour plus the two colours adjacent to its complement. This offers high contrast like complementary, but with less tension and more nuance. It is easier to work with than a straight complementary pair. Example: blue, red-orange, yellow-orange.
Random
A completely random selection of colours with no harmonic constraint. Great for creative exploration and discovering unexpected combinations. Hit the spacebar to keep generating until you find something you love.
Monochromatic
Different tints, shades and tones of a single hue. Monochromatic palettes are the easiest to create and always look cohesive. They work brilliantly for minimalist designs and data visualisations. Example: navy, blue, light blue, pale blue.
2. Using the Contrast Checker for WCAG Accessibility
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and its background to ensure readability for people with low vision or colour blindness.
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 minimum | 3:1 minimum |
| AAA | 7:1 minimum | 4.5:1 minimum |
Large text is defined as 18pt (24px) and above, or 14pt (18.66px) bold and above. Everything else counts as normal text.
AA compliance is the standard most organisations aim for. It covers the majority of users with visual impairments. AAA compliance is the enhanced level and is recommended for body text and long-form content.
Use our Contrast Checker to test any foreground/background pair instantly.
3. Extracting Colours from Images
Pulling a palette from a photograph or illustration is one of the fastest ways to create a cohesive colour scheme. Our From Image tool uses k-means clustering to group similar pixel colours and find representative centres.
Best Practices
- Choose high-quality source images. Blurry or heavily compressed photos produce muddier palettes.
- Use fewer colours for simple images. A sunset might only need 4-5 colours, while a busy market scene could justify 7-8.
- Crop to the area of interest. If you want colours from a specific part of an image, crop it first before uploading.
- Adjust the colour count after uploading. ColourKit automatically re-extracts when you change the count, so experiment to find the sweet spot.
- Look for a dominant + accent pattern. Usually 1-2 colours will dominate and the rest serve as accents. Use the dominant colour for backgrounds and accents for interactive elements.
4. CSS Gradient Tips
CSS gradients are powerful tools for creating depth, movement and visual interest without image files. Use our Gradient Maker to build and export gradient code instantly.
Linear Gradients
Linear gradients transition along a straight line. The angle controls the direction: 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom. Use angles like 135deg or 160deg for diagonal gradients that feel more dynamic.
Radial Gradients
Radial gradients radiate outward from a centre point. They are perfect for spotlight effects, glows and organic-looking backgrounds. Keep the inner colour lighter for a glow effect, or darker for a vignette.
Tips for Better Gradients
- Use analogous colours for smooth, natural-looking transitions. Colours that are neighbours on the wheel blend more gracefully.
- Avoid muddy midpoints. When transitioning between complementary colours (e.g., blue to orange), the midpoint can look grey. Add a third stop in between to guide the transition through a more vibrant path.
- Keep it subtle for backgrounds. Slight hue shifts (5-10 degrees) or lightness variations create depth without distraction.
- Use up to 8 stops in ColourKit's Gradient Maker to create complex, multi-colour transitions. Position stops unevenly for more organic results.
- Download the swatch as a PNG to preview gradients outside the browser or share with your team.
Ready to Start?
Put these principles into practice with ColourKit's free tools.