Fahim: "we change brand color: do quick change to this: #da5cc7" — replaces Saddle Violet #6D3BF5 from #153.
What the new colour can and cannot do
#DA5CC7 measures 3.31:1 on white. That is above the 3:1 needed for a mark or a fill, and below the 4.5:1 needed for text — so it cannot carry a label, and it cannot be the ground under a white button label (also 3.31:1).
This is the split the palette is already built around: a bright value for fills, a darker same-hue value for text. Violet happened to clear both (5.84:1) so the two were nearly interchangeable; this colour makes the distinction load-bearing.
| token |
value |
role |
--pp-accent |
#DA5CC7 |
the brand colour, exactly as given — dots, focus ring, active nav, bar fills |
--pp-accent-text |
#BD2BA7 |
links and labels |
--pp-accent-hover |
#A82595 |
hover / active |
--pp-accent-tint |
#FDF4FC |
soft background |
--pp-action |
#BD2BA7 |
primary buttons |
--pp-focus |
#DA5CC7 |
focus ring |
The tint is #FDF4FC rather than a more saturated wash because an accent dot on the accent tint needs 3:1 and a #FBECF9 tint gave 2.91.
Verified
| pair |
need |
measured |
| white on the primary button |
4.5 |
5.16 |
| white on button hover |
4.5 |
6.24 |
| link on the page |
4.5 |
4.99 |
| link on the tint |
4.5 |
4.80 |
| focus ring on the page |
3.0 |
3.20 |
| accent dot on the tint |
3.0 |
3.08 |
Note
If you'd rather the primary button be literally #DA5CC7, it can be — but only with a near-black label (#111111 on it is 5.70:1), not white. That is a real design choice rather than a token swap, so it is not in this change.
Fahim: "we change brand color: do quick change to this: #da5cc7" — replaces Saddle Violet
#6D3BF5from #153.What the new colour can and cannot do
#DA5CC7measures 3.31:1 on white. That is above the 3:1 needed for a mark or a fill, and below the 4.5:1 needed for text — so it cannot carry a label, and it cannot be the ground under a white button label (also 3.31:1).This is the split the palette is already built around: a bright value for fills, a darker same-hue value for text. Violet happened to clear both (5.84:1) so the two were nearly interchangeable; this colour makes the distinction load-bearing.
--pp-accent#DA5CC7--pp-accent-text#BD2BA7--pp-accent-hover#A82595--pp-accent-tint#FDF4FC--pp-action#BD2BA7--pp-focus#DA5CC7The tint is
#FDF4FCrather than a more saturated wash because an accent dot on the accent tint needs 3:1 and a#FBECF9tint gave 2.91.Verified
Note
If you'd rather the primary button be literally
#DA5CC7, it can be — but only with a near-black label (#111111on it is 5.70:1), not white. That is a real design choice rather than a token swap, so it is not in this change.