How to Build a Practical Web Colour Palette

Digital colours can be represented as HEX, RGB or HSL values, while accessible use depends on contrast and context. This guide focuses on a practical situation: a useful palette includes roles for surfaces, text, borders, actions, feedback and interactive states.

The short answer

One brand green needs supporting neutrals and tested dark/light combinations to work across a full interface. The useful result is not only the final number or code; it is understanding what was measured, what assumptions were made and how the answer will be used.

A reliable step-by-step method

1. 01Choose or sample the source colour.
2. 02Convert it into the format required by the design system.
3. 03Test text and interface contrast in the actual size and weight.
4. 04Check states and meaning without relying on colour alone.

A practical example

One brand green needs supporting neutrals and tested dark/light combinations to work across a full interface. Start with the information you actually know, keep the original unit or context beside every figure, and avoid rounding until the end. If the result affects money, health, safety or a formal requirement, confirm it with an authoritative source or qualified professional.

Common mistakes to avoid

• Assuming a valid code is automatically accessible
• Using colour as the only error indicator
• Testing swatches separately from their real backgrounds

A quick plausibility check is valuable. Ask whether the result is in the expected direction, whether the scale makes sense, and whether another person could understand the assumptions from your notes.

Use the free tool

EcoMetric Lab processes tool inputs in your browser. No account is required, and your entries are not saved by SmartDev.

Authoritative further reading

• W3C Web Accessibility Initiative: contrast