Colours 21 represents a new wave of digital color systems that transform how designers, developers, and brands communicate visual identity online. This guide explores its structure, use cases, and implementation details in a practical, action-oriented format.
Whether you are building a design system, defining brand tokens, or auditing existing palettes, understanding Colours 21 helps you make consistent, accessible, and on-brand decisions across products and platforms.
| Color Role | Hex Value | RGB | Accessibility (Contrast on White) |
|---|---|---|---|
| Primary | #3B82F6 | 59, 130, 246 | 4.5:1 (Meets AA for large text) |
| Secondary | #10B981 | 16, 185, 129 | 7.1:1 (Meets AA) |
| Background | Surface | #F9FAFB | 249, 250, 251 | N/A (Light surface) |
Design System Integration
Colours 21 aligns with modern design systems by defining clear roles such as Primary, Secondary, Tertiary, Background, and Surface. This role-based approach prevents ambiguous naming and supports scalable token management across teams and tools.
Design tokens derived from Colours 21 can be imported into Figma, Sketch, Adobe XD, and code repositories, ensuring that the same values drive both design and implementation. Centralizing palette decisions reduces drift and simplifies maintenance over time.
Accessibility Considerations
Accessibility is a core pillar of Colours 21. Each color is evaluated for contrast against standard backgrounds, with recommended pairings that meet WCAG AA for body text and large text, and WCAG AAA where feasible.
When building components, you should verify contrast ratios for interactive states such as hover and focus. Providing subtle variations, like lighter or darker tints for disabled states, preserves visibility without sacrificing accessibility compliance.
Developer Implementation
Developers can integrate Colours 21 by exporting palette values into structured files such as JSON, CSS variables, or SCOM maps. This enables consistent references like var(--color-primary) and var(--color-surface) across applications.
Implementation tips include defining semantic tokens instead of hardcoding hex values in components, using design token tools for automated generation, and establishing linting rules to detect unauthorized colors in the codebase.
Adoption and Best Practices
- Document color roles and usage scenarios in a central location accessible to designers and developers.
- Use automated scripts to validate contrast ratios and flag non-compliant combinations during builds.
- Version your color tokens and changelog updates to track changes over time.
- Conduct periodic audits to identify legacy hex values that should be replaced with standardized tokens.
- Educate cross-functional teams on when to use primary versus secondary roles to maintain visual hierarchy.
FAQ
Reader questions
How do I map Colours 21 tokens to CSS custom properties?
Define root variables in your global style sheet using the exact hex values from the palette, then reference them with var(--color-primary) and similar names throughout your components to maintain consistency.
What contrast ratios should I target for text and icons?
Target at least 4.5:1 for normal text and 3:1 for large text against the intended background; for UI components and icons, aim for 3:1 against adjacent colors to meet accessibility standards.
Can Colours 21 be adapted for dark mode interfaces?
Yes, you can create a dark mode variant by redefining surface and background tokens to darker values while keeping primary and secondary colors consistent, and verifying new contrast ratios against the dark surfaces.
How often should the Colours 21 palette be reviewed and updated?
Review the palette at least once per major product release or when brand guidelines evolve; update tokens in a central source of truth and communicate changes through versioned design system releases.