Random Color Palette Generator

How it works

This generator uses a randomised harmonic algorithm: it picks a base hue and creates nearby hues with consistent saturation/lightness in HSL for pleasant, cohesive palettes. Locks keep your favourites while new colours harmonise around them.

• Generate — make a new palette (keeps locked swatches).
• Lock — preserve a swatch across regenerations.
• Copy — click or press C to copy HEX.
• Contrast badges — see AA/AAA legibility on white/black.

Understanding Colour Palettes & Practical Applications

A well-chosen colour palette does more than “look nice”—it sets hierarchy, communicates brand personality, and improves accessibility. Designers often start with a base hue for character, then build supporting tones for contrast and emphasis. Common harmony models include analogous (adjacent hues for calm, cohesive interfaces), complementary (opposites for energy and call-to-action buttons), split-complementary (balanced contrast with less risk), and monochrome (one hue, varied saturation/lightness for minimalist UIs).

Digital vs Print (UK/EU)

For web and app design (UK and EU markets alike), work in HEX/RGB and preview on both light and dark surfaces. For print—packaging, stationery, out-of-home—convert to CMYK or specify Pantone where brand consistency is critical. Always request a UK/EU press proof or calibrated PDF/X to account for paper stock and regional press profiles.

Accessibility & Contrast

Colour alone shouldn’t carry meaning. Pair hues with icons, labels, and patterns, and check text contrast against both white and black. Aim for WCAG 2.1 AA (contrast ratio ≥ 4.5:1 for normal text; ≥ 3:1 for large text) and consider AAA (≥ 7:1) for critical journeys like payments, government services, and healthcare. Accessibility isn’t only ethical—UK public sector sites are legally required to meet these standards, and private sites benefit from improved usability and SEO.

Brand, Marketing & Localisation

Colours carry cultural signals. In the UK and wider Europe, blue often signals trust (finance, public services), green connotes sustainability (energy, FMCG), and purple implies premium or cultural heritage. If trading internationally, validate palettes with local stakeholders; the same red that suggests energy in London may convey warning elsewhere. Build primary, secondary, and neutral scales with spacing in lightness (L) to ensure predictable tints and shades for charts, maps, and data viz.

Practical Workflow Tips

• Start neutral: Establish a grey/near-neutral ramp first; then layer accents for calls to action and states (success, warning, error, info).
• Design tokens: Name colours by role (e.g., --btn-primary) rather than hue, so you can swap palettes without refactoring components.
• State colours: Keep semantic colours legible in both light and dark themes; test focus, hover, active, and disabled.
• Data visualisation: Use perceptually distinct hues for categories and a single-hue lightness ramp for ordered data; ensure lines/markers pass contrast on grid backgrounds.
• Performance & SEO: Consistent, accessible colour usage reduces bounce and improves Core Web Vitals outcomes—good for rankings and conversion.

When to Refresh Your Palette

Consider a palette refresh if your brand expands into a new market, launches dark mode, or faces readability issues in audits. Document tokens, export HEX/RGB/CMYK, and provide usage guidance for partners, printers, and accessibility reviewers across the UK/EU.