CSS variables
:root {
--c-vibrant-1: #FAD414;
--c-vibrant-2: #F2E18C;
--c-vibrant-3: #EEF0D3;
--c-vibrant-4: #F0A47A;
--c-vibrant-5: #A62142;
--c-vibrant-6: #572340;
--c-vibrant-7: #13041F;
--c-vibrant-8: #023012;
--c-vibrant-9: #095C46;
--c-vibrant-10: #4F9E76;
}
About this palette
This 10-color vibrant palette runs from Giggle (#EEF0D3) as its lightest tone to Election Night (#13041F) as its darkest. It blends Tanzanian Gold, Late Day Sun, Giggle, Coral Silk, True Crimson, Zinfandel, Election Night, Prasinophobia, Forest Shadows and Sea Cabbage into a single set you can drop straight into a UI. Of its 45 color pairings, 20 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #EEF0D3 on #13041F at 16.94:1.
A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.
Color breakdown
Contrast & accessibility
20 of 45 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.