Brand Colour Codes & Design Inspiration
A strong brand palette does more than supply a logo colour. It creates a repeatable hierarchy for reading, action and recognition. This edit brings together six non-official editorial mood boards inspired by familiar brand cues, rather than official palettes or endorsements. Compare dark product surfaces, calm mineral neutrals, lively gradient colour and clear progress signals. Use the examples to decide where one recognisable colour should lead, where a neutral should carry most of the page, and how a controlled accent can guide an action without overwhelming the interface.
Start with a role, not a rainbow
Give each colour one job before expanding the system. Quiet Charge for Tesla shows a dark graphite field (#111418), near-white content colour (#F4F6F7) and focused red (#E82127); it is a useful model for product pages where imagery and specifications need room. Mountain Shell for Patagonia takes the opposite route: mineral #D8D2C4 keeps the page quiet while #243447 anchors navigation and #2878B5 marks links or location cues. These are editorial references, not official brand palettes or endorsements. Worked token example: --surface: #D8D2C4; --ink: #17212B; --action: #2878B5. Apply surface to long-form panels, ink to headings and action only to links, buttons and selected states.
Use accents to direct the next action
Bright colour earns attention when it is rationed. Gradient Stories for Instagram combines pale #F7F0FF with dark plum #2B173B, then uses #FD1D6C coral and #FCAF45 amber for moments such as a primary action and a status label. For a campaign card, use bg-[#F7F0FF] text-[#2B173B], then reserve bg-[#FD1D6C] for one Join now button; the rest of the card stays quiet. Study Streak for Duolingo similarly makes green, blue and gold useful signals rather than body-text colours. Keep descriptive text in #253238 on #F3FAF4. The #253238/#F3FAF4 pair measures 12.43:1, exceeding the 4.5:1 normal-text threshold in W3C guidance: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html.
Make dark mode deliberate
A dark brand surface needs a reliable reading colour before decorative accents. Community Green for Spotify pairs #121212 with #F5F5F5, producing a calculated 17.18:1 contrast ratio, so it is a robust choice for core copy. Add #1DB954 for active controls, but do not assume the green itself is suitable for text. Signal Server for Discord offers a similar structure: #1E1F22 background, #F2F3F5 copy, then violet #5865F2 for selected navigation and mint #57F287 for a live state. CSS example: --surface: #1E1F22; --text: #F2F3F5; --selected: #5865F2. Test every new foreground/background pairing in the Contrast Checker, particularly text placed over images or gradients.
Palettes to explore
- Quiet Charge for Tesla: #111418, #F4F6F7, #A7ADB4, #E82127, #20262D
- Gradient Stories for Instagram: #F7F0FF, #833AB4, #FCAF45, #FD1D6C, #2B173B
- Community Green for Spotify: #121212, #1DB954, #A7F3C0, #66E38B, #F5F5F5
- Mountain Shell for Patagonia: #D8D2C4, #243447, #AFA38C, #2878B5, #17212B
- Signal Server for Discord: #1E1F22, #5865F2, #AAB2FF, #57F287, #F2F3F5
- Study Streak for Duolingo: #F3FAF4, #58CC02, #1CB0F6, #FFC800, #253238
Practical guides
- How to choose website colours
- Colour contrast and accessibility
- Turn palettes into CSS variables
- Brand colour and recognition