Colour palette guide: building and using colour systems in design

A colour palette is the complete set of colours used in a design, not a random selection of colours that look good together, but a structured system where every colour has a defined role. This guide covers how to build a palette from scratch, how to organise colours by function, and how to create, save, and manage palettes directly in Linearity Curve.

What makes a colour palette work

Most colour palette problems aren't about the individual colours, they're about the absence of a system. A palette that "just doesn't work" usually means five or more colours were chosen without defined roles, so they compete with each other rather than supporting a visual hierarchy.

A working palette is organised before it's beautiful. Every colour needs a job: primary, secondary, neutral, or semantic. Once the roles are defined, the aesthetic decisions become significantly easier — you're choosing within a system rather than starting from nothing every time.

The other common failure is testing colours as isolated swatches rather than in context. Colours behave differently next to each other than they do alone. A palette that looks harmonious as five separate squares can feel unbalanced the moment it's applied to a real layout.

[IMAGE PLACEHOLDER: Two versions of the same layout — one using five unrelated colours with no defined roles, one using a structured four-colour palette with clear primary, secondary, neutral, and accent roles. Caption: "A structured palette and an unstructured one using the same number of colours — the difference is visible immediately in the layout."]

The four colour roles

Most design systems organise palettes into four functional categories. Understanding these roles before picking any colours is what separates a colour system from a colour collection.

Primary colours are the colours your brand or design is recognised by. Usually one or two. They appear most prominently and most consistently.

Secondary colours support the primary palette. They should harmonise with the primary colours without competing with them — if both feel equally dominant, neither is doing its job.

Neutral colours carry the bulk of actual usage in most designs, despite being the least visually prominent. Body text, card backgrounds, borders, dividers — these are almost always neutral. A palette with weak neutrals is difficult to use in production.

Semantic colours are functional, not aesthetic. Consistency here is non-negotiable. A user who sees green meaning "success" in one place and something else in another has been given contradictory information by the interface.

A design system palette organised by role, each colour has a defined job before any aesthetic decisions are made.

How to choose your base colour

The base colour is almost always the primary brand colour — the colour most associated with the identity. Everything else in the palette is derived from or tested against it.

Start with one anchor. Starting with two or three colours simultaneously makes it impossible to evaluate how they relate. Pick the primary first. Let secondary colours emerge from the relationship with that anchor.

Define a value range. A single hue needs to work at multiple values: light enough for backgrounds, dark enough for body text, a mid-range for interactive states. A palette with only one shade of each colour runs out of options fast in a real design context.

Check temperature and undertone. A blue with a green undertone and an orange with a red undertone may individually look fine but clash when placed together. Checking undertones — the subtle colour beneath the surface colour — prevents this.

Verify contrast ratios early. Text colour against background colour needs to meet WCAG 4.5:1 minimum contrast for readability. Testing this during palette building, not after the design is finished, saves significant rework.

For a deeper understanding of colour relationships, see the design principles guide which covers how colour connects to composition, hierarchy, and typography in a complete design system.

Building a palette in Linearity Curve

Linearity Curve's Fill panel has four distinct colour tool modes, each serving a different part of the palette-building process. Here's how to use all of them.

Mode 1 — Gradient canvas (colour wheel view)

The gradient canvas is the fastest way to pick an exact colour value. The horizontal axis controls saturation (left = desaturated, right = fully saturated). The vertical axis controls brightness (top = bright, bottom = dark). The hue slider below the canvas sets the base colour family.

For building a palette: set your primary hue on the slider, then use the canvas to find the exact saturation and brightness for your base colour. Note the RGBA values shown at the bottom — these are your reference point for deriving the rest of the palette.

Mode 2 — HSB Sliders

The HSB Sliders tab gives you precise numerical control. This is where palette building gets systematic.

Hue (0–360): the colour family. Keep this fixed when deriving tints, tones, and shades from a single base.

Saturation (0–100): the intensity of the colour. Reduce saturation to create tones and muted supporting colours. A base at S:80 might have secondary colours at S:50 and background tints at S:20.

Brightness (0–100): the lightness or darkness. Reduce brightness to create shades for hover states and shadows. Increase it for light background tints.

Hex Color field: type any hex code directly here to load a specific colour. This is how you apply brand colours from a style guide or match a colour from a reference image.

Practical workflow: to derive a five-step tint scale from a base colour, keep H fixed, keep S roughly stable, and increase B in equal steps from your base toward 95. This produces a consistent light-to-dark progression for use across UI states.

Mode 3 — Gradient mode

Switch to Gradient at the top of the Fill panel to create two-stop colour transitions. Tap each stop on the gradient bar to set its colour independently. This is useful for creating gradient background accents and decorative elements that use your palette colours while adding visual depth.

Mode 4 — Palette library

The palette library is where your colour system lives in Curve. Every colour you save appears here as a swatch, grouped by named palette.

To create a new palette: tap the + button at the top right, then select "Create" from the menu. Name it immediately — "Brand Primary," "Warm Sunset Palette," "UI Neutrals" — so it's findable later.

To add a colour: select any colour using the canvas or sliders, then tap the + button within the palette row to save it as a swatch.

To import: the + menu also offers Import (for .swatches and .ASE files from other tools), From Photo (extracts a palette from any image), and Generate with AI (suggests a palette based on a prompt or mood).

Searching palettes: as your library grows, use the search field to find palettes by name without scrolling.

Mode 5 — Colour blending and adjustment

The fourth tab (the sparkle wand icon) contains two groups of tools useful for palette work:

Color Blending: select multiple objects and use Blend Horizontally, Blend Vertically, or Blend Back to Front to create an even colour progression across them. This is the fastest way to create a smooth tint or shade scale applied to actual design elements — select five rectangles representing your five palette steps and Blend Horizontally will distribute the colour transition evenly across them.

Color Adjustment: Desaturate removes all saturation from selected objects, showing you how the palette reads in greyscale — a useful accessibility check to see if colour alone is carrying meaning. Invert flips the colour values, useful for quickly testing how a palette reads on a dark background.

Managing multiple palettes in Curve {#managing-palettes}

For any project with a real colour system, you'll need more than one palette. Curve's library handles this well.

Organise by function, not by project. Rather than a palette called "Client X Brand," create palettes called "Primary," "Neutrals," and "Semantic" — these transfer across projects and reinforce the role-based thinking that makes palettes systematic.

Use the search field. Once you have more than five or six palettes, search is faster than scrolling. Consistent naming conventions make this work.

Import from other tools. If your team uses Figma, you can export colour styles as an ASE file and import them directly into Curve using the Import option. This keeps colours consistent across tools without re-entering hex codes manually.

Generate from a photo. The "From Photo" option extracts a palette from any image — useful when a brand has a strong visual reference (a mood board image, a product photograph) and you need to derive a working colour palette from it. The extracted colours won't always be production-ready but give you an excellent starting point to refine using the HSB sliders.

Common palette mistakes