Colour
The Cowdi colour palette, usage guidance, and accessible pairings.
Purple is Cowdi's primary colour, gold provides emphasis, and magenta is reserved for the logo. Select any swatch to copy its hex value.
Brand
Logo
These values are fixed and reserved for the logo. Do not use them as interface colour tokens.
- Gold
#F6B91CFirst disc - Magenta
#F63AEDMiddle disc - Deep purple
#53004FThird disc, and the wordmark
Use the supplied artwork
Do not recolour or recreate the logo from these values. Download an approved logo asset to preserve the exact artwork.
Contrast
These pairings are measured against WCAG 2.1. Body text requires a contrast ratio of 4.5:1; large text requires 3:1.
| Foreground | Background | Ratio | |
|---|---|---|---|
#53004F | white | 14.18 | AAA |
#461A43 | white | 14.10 | AAA |
#614075 | white | 8.41 | AAA |
| white | #614075 | 8.41 | AAA |
| white | #53004F | 14.18 | AAA |
#53004F | #F1D1F5 | 10.25 | AAA |
#53004F | #F0B01C | 7.38 | AAA |
#53004F | #F63AED | 4.56 | AA |
| white | #F63AED | 3.11 | Large text only |
#F0B01C | white | 1.92 | Fails |
Do not use gold text on white. At 1.92:1, it fails at every size. Use gold as
a fill with #53004F text, or use purple on white for the safest default.
On a near-black background, gold provides a 10.31:1 contrast ratio and magenta
provides 6.36:1. For dark interfaces, use light purple #C9A6DD in place of the
primary purple; it provides a 9.41:1 ratio against near-black.
In code
:root {
--cowdi-purple: #614075;
--cowdi-purple-dark: #461A43;
--cowdi-purple-light: #F1D1F5;
--cowdi-gold: #F0B01C;
--cowdi-gold-light: #F1DEA1;
}