CSS variables
:root {
--c-vibrant-1: #000924;
--c-vibrant-2: #041B38;
--c-vibrant-3: #093659;
--c-vibrant-4: #145D87;
--c-vibrant-5: #228399;
--c-vibrant-6: #31B0B0;
--c-vibrant-7: #46CFB3;
--c-vibrant-8: #73F0C6;
--c-vibrant-9: #ABFFD1;
--c-vibrant-10: #D9FFE2;
}
About this palette
This 10-color vibrant palette runs from Transparent Green (#D9FFE2) as its lightest tone to Void (#000924) as its darkest. It blends Void, Naval Night, Incremental Blue, Sapphire Sparkle, River Fountain, Lake Tahoe Turquoise, Disc Jockey, Jittery Jade, Neo Mint and Transparent Green into a single set you can drop straight into a UI. Of its 45 color pairings, 18 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000924 on #D9FFE2 at 18.18:1.
A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.
Color breakdown
Contrast & accessibility
18 of 45 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.