CSS variables
:root {
--c-vibrant-1: #170A16;
--c-vibrant-2: #471710;
--c-vibrant-3: #802512;
--c-vibrant-4: #8F3F3C;
--c-vibrant-5: #AD5025;
--c-vibrant-6: #E05E1D;
--c-vibrant-7: #DF7A5F;
--c-vibrant-8: #E4A358;
--c-vibrant-9: #F5AC93;
--c-vibrant-10: #E3C6C1;
}
About this palette
This 10-color vibrant palette runs from Rose Coloured Glasses (#E3C6C1) as its lightest tone to Crow (#170A16) as its darkest. It blends Crow, Barbecue Sauce, Caponata, Red Red Red, Cinnamon Stick, Ferocious Fox, Flamenco Pink, Roasted Squash, Pretty Primrose and Rose Coloured Glasses into a single set you can drop straight into a UI. Of its 45 color pairings, 11 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #170A16 on #E3C6C1 at 12.02:1.
A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.
Color breakdown
Contrast & accessibility
11 of 45 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.