WORKSTATION 05 / COLOUR SYSTEMS

Colour palette and gradient generator.

Start with one colour, tune the harmony, inspect accessibility, and copy production-ready values instantly. Nothing is uploaded for the live workbench.

LOCAL ENGINE READYZERO-POINT TOOL

LIVE PALETTE

Choose a base colour.

Every control updates immediately in your browser.

BASE COLOUR HARMONY

QUICK START

Click a swatch to inspect it and copy its HEX value.

02 / INSPECTOR

Selected colour

#E24B4A

HEX
RGB
HSL

03 / SHADE SCALE

Surface range

Seven practical steps derived from the selected colour. Click a shade to select it and copy its HEX value.

04 / ACCESSIBILITY

Contrast check

GRADIENT GENERATOR

Blend two colours into production CSS.

Edit both stops and rotate the gradient in real time.

STOP 1 / 0% STOP 2 / 33% STOP 3 / 67% STOP 4 / 100%

ANGLE 135°

LIVE GRADIENT135°

background: linear-gradient(135deg, #E24B4A 0%, #F2B134 33%, #0F8B8D 67%, #6657A8 100%);

Adjust the angle or either colour to update the CSS.

OPTIONAL AI DIRECTOR

Turn a creative brief into colour directions.

This is the only step that contacts the AI service.

AI OUTPUT BAY EMPTYYour instant palette above is ready now.

Use AI only when you want three named colour directions derived from a written brief.

Colour system guide

Build palettes, gradients, and accessible colour tokens.

Start with a base colour and turn it into a practical design system. Harmony controls, shade scales, contrast checks, editable gradients, and export formats update locally so you can test a direction before using AI or saving a project.

Generate colour harmonies

Create complementary, analogous, triadic, split-complementary, tetradic, or monochromatic palettes from any HEX colour.

Check contrast and shade range

Inspect selected colours, compare readable text combinations, and generate seven practical surface shades for interfaces or material direction.

Copy production-ready values

Export HEX, RGB, HSL, CSS variables, JSON design tokens, or an adjustable four-stop linear-gradient declaration.

Practical questions

Before you start

Does the colour palette generator use AI?

The live palette, shade, contrast, gradient, and export controls run locally at zero points. AI is optional for turning a written creative brief into named colour directions.

Can I copy the palette as CSS?

Yes. Copy individual colours, all HEX values, CSS variables, JSON tokens, or the current four-stop CSS gradient.

How is colour contrast checked?

The workbench calculates contrast between selected foreground and background colours and reports their suitability for common text sizes.

Can palette colours become game materials?

Yes. Open the Biome Generator to turn a colour direction into connected terrain, prop, effects, and interface material recipes.