CSS variables
:root {
--c-vibrant-1: #EADB91;
--c-vibrant-2: #E0AD06;
--c-vibrant-3: #B52E27;
--c-vibrant-4: #AA71C4;
--c-vibrant-5: #4D329E;
--c-vibrant-6: #2D5F91;
--c-vibrant-7: #7DCEAF;
--c-vibrant-8: #7FAD29;
--c-vibrant-9: #2E7034;
--c-vibrant-10: #441A00;
}
About this palette
This 10-color vibrant palette runs from Pineapple Crush (#EADB91) as its lightest tone to Bath in Chocolate (#441A00) as its darkest. It blends Pineapple Crush, Mustard Yellow, Cardinal’s Cassock, Rich Lavender, Royal Wisteria, Running Water, Aquamarine Ocean, Lima Sombrio, San Felix and Bath in Chocolate into a single set you can drop straight into a UI. Of its 45 color pairings, 7 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #EADB91 on #441A00 at 10.79:1.
A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.
Color breakdown
Contrast & accessibility
7 of 45 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.