Sign Up Sign Up
COSMIC

COSMIC

9-color palette · Warm · Mixed · Complementary harmony

Back to Library

COSMIC

9-color palette · Warm temperature · Mixed tone · Complementary harmony

Modify
Vibrant 9 colors Warm Mixed Complementary
Likes 3
Colors 9

CSS variables

:root {
  --c-vibrant-1: #FFFFFF;
  --c-vibrant-2: #FF974D;
  --c-vibrant-3: #F26419;
  --c-vibrant-4: #583F2F;
  --c-vibrant-5: #FFC01D;
  --c-vibrant-6: #FF4BE9;
  --c-vibrant-7: #39E9FF;
  --c-vibrant-8: #6A34A7;
  --c-vibrant-9: #3B338A;
}

About this palette

This 9-color vibrant palette runs from White (#FFFFFF) as its lightest tone to Majestic Eggplant (#3B338A) as its darkest. It blends White, Pastel Orange, Scarlet Ibis, Lounge Leather, Happy Yipee, Actinic Light, Shimmering Expanse Cyan, Purple Heart and Majestic Eggplant into a single set you can drop straight into a UI. Of its 36 color pairings, 11 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFFFF on #3B338A at 10.36:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000
Pastel Orange #FF974D
RGB
rgb(255, 151, 77)
HSL
hsl(25, 100%, 65%)
Luminance
0.439
Scarlet Ibis #F26419
RGB
rgb(242, 100, 25)
HSL
hsl(21, 89%, 52%)
Luminance
0.281
Lounge Leather #583F2F
RGB
rgb(88, 63, 47)
HSL
hsl(23, 30%, 26%)
Luminance
0.058
Happy Yipee #FFC01D
RGB
rgb(255, 192, 29)
HSL
hsl(43, 100%, 56%)
Luminance
0.591
Actinic Light #FF4BE9
RGB
rgb(255, 75, 233)
HSL
hsl(307, 100%, 65%)
Luminance
0.322
Shimmering Expanse Cyan #39E9FF
RGB
rgb(57, 233, 255)
HSL
hsl(187, 100%, 61%)
Luminance
0.664
Purple Heart #6A34A7
RGB
rgb(106, 52, 167)
HSL
hsl(268, 53%, 43%)
Luminance
0.083
Majestic Eggplant #3B338A
RGB
rgb(59, 51, 138)
HSL
hsl(246, 46%, 37%)
Luminance
0.051

Contrast & accessibility

11 of 36 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #FFFFFF on #3B338A 10.36:1 AAA
Aa #FFFFFF on #583F2F 9.69:1 AAA
Aa #FFFFFF on #6A34A7 7.89:1 AAA
Aa #39E9FF on #3B338A 7.04:1 AAA
Aa #583F2F on #39E9FF 6.59:1 AA
Aa #FFC01D on #3B338A 6.32:1 AA
Aa #583F2F on #FFC01D 5.91:1 AA
Aa #39E9FF on #6A34A7 5.36:1 AA
Aa #FF974D on #3B338A 4.83:1 AA
Aa #FFC01D on #6A34A7 4.81:1 AA
Aa #FF974D on #583F2F 4.52:1 AA
Aa #FF974D on #6A34A7 3.68:1 AA Large
Aa #FF4BE9 on #3B338A 3.67:1 AA Large
Aa #583F2F on #FF4BE9 3.43:1 AA Large
Aa #F26419 on #3B338A 3.26:1 AA Large
Aa #FFFFFF on #F26419 3.18:1 AA Large
Aa #F26419 on #583F2F 3.05:1 AA Large
Aa #FFFFFF on #FF4BE9 2.82:1 Fail
Aa #FF4BE9 on #6A34A7 2.79:1 Fail
Aa #F26419 on #6A34A7 2.48:1 Fail
Aa #F26419 on #39E9FF 2.16:1 Fail
Aa #FFFFFF on #FF974D 2.15:1 Fail
Aa #F26419 on #FFC01D 1.94:1 Fail
Aa #FF4BE9 on #39E9FF 1.92:1 Fail
Aa #FFC01D on #FF4BE9 1.72:1 Fail
Aa #FFFFFF on #FFC01D 1.64:1 Fail
Aa #FF974D on #F26419 1.48:1 Fail
Aa #FFFFFF on #39E9FF 1.47:1 Fail
Aa #FF974D on #39E9FF 1.46:1 Fail
Aa #FF974D on #FF4BE9 1.32:1 Fail
Aa #FF974D on #FFC01D 1.31:1 Fail
Aa #6A34A7 on #3B338A 1.31:1 Fail
Aa #583F2F on #6A34A7 1.23:1 Fail
Aa #F26419 on #FF4BE9 1.12:1 Fail
Aa #FFC01D on #39E9FF 1.11:1 Fail
Aa #583F2F on #3B338A 1.07:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors