Sign Up Sign Up
Fruit Salad

Fruit Salad

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

Fruit Salad

12-color palette · Cool temperature · Mixed tone · Complementary harmony

Modify
Vibrant 12 colors Cool Mixed Complementary vibrant cold colorful saturated
Likes 18
Colors 12

CSS variables

:root {
  --c-vibrant-1: #003AB0;
  --c-vibrant-2: #49E4FF;
  --c-vibrant-3: #F5EDE1;
  --c-vibrant-4: #706675;
  --c-vibrant-5: #36065B;
  --c-vibrant-6: #8512B6;
  --c-vibrant-7: #0F87D7;
  --c-vibrant-8: #22C93F;
  --c-vibrant-9: #FCCD12;
  --c-vibrant-10: #FF7D12;
  --c-vibrant-11: #C20000;
  --c-vibrant-12: #FA6EFD;
}

About this palette

This 12-color vibrant palette runs from Milk Star White (#F5EDE1) as its lightest tone to Cotinga Purple (#36065B) as its darkest. It blends Royal Azure, Shimmering Expanse Cyan, Milk Star White, Rum, Cotinga Purple, Minesweeper’s Purple, Electron Blue, Walled Garden, Confident Yellow, Orange Popsicle, Free Speech Red and Flamazing Pink into a single set you can drop straight into a UI. Of its 66 color pairings, 14 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #F5EDE1 on #36065B at 13.56:1.

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

Color breakdown

Royal Azure #003AB0
RGB
rgb(0, 58, 176)
HSL
hsl(220, 100%, 35%)
Luminance
0.062
Shimmering Expanse Cyan #49E4FF
RGB
rgb(73, 228, 255)
HSL
hsl(189, 100%, 64%)
Luminance
0.641
Milk Star White #F5EDE1
RGB
rgb(245, 237, 225)
HSL
hsl(36, 50%, 92%)
Luminance
0.854
Rum #706675
RGB
rgb(112, 102, 117)
HSL
hsl(280, 7%, 43%)
Luminance
0.142
Cotinga Purple #36065B
RGB
rgb(54, 6, 91)
HSL
hsl(274, 88%, 19%)
Luminance
0.017
Minesweeper’s Purple #8512B6
RGB
rgb(133, 18, 182)
HSL
hsl(282, 82%, 39%)
Luminance
0.088
Electron Blue #0F87D7
RGB
rgb(15, 135, 215)
HSL
hsl(204, 87%, 45%)
Luminance
0.223
Walled Garden #22C93F
RGB
rgb(34, 201, 63)
HSL
hsl(130, 71%, 46%)
Luminance
0.425
Confident Yellow #FCCD12
RGB
rgb(252, 205, 18)
HSL
hsl(48, 98%, 53%)
Luminance
0.644
Orange Popsicle #FF7D12
RGB
rgb(255, 125, 18)
HSL
hsl(27, 100%, 54%)
Luminance
0.360
Free Speech Red #C20000
RGB
rgb(194, 0, 0)
HSL
hsl(0, 100%, 38%)
Luminance
0.115
Flamazing Pink #FA6EFD
RGB
rgb(250, 110, 253)
HSL
hsl(299, 97%, 71%)
Luminance
0.386

Contrast & accessibility

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

Aa #F5EDE1 on #36065B 13.56:1 AAA
Aa #36065B on #FCCD12 10.41:1 AAA
Aa #49E4FF on #36065B 10.36:1 AAA
Aa #003AB0 on #F5EDE1 8.10:1 AAA
Aa #36065B on #22C93F 7.12:1 AAA
Aa #F5EDE1 on #8512B6 6.55:1 AA
Aa #36065B on #FA6EFD 6.53:1 AA
Aa #003AB0 on #FCCD12 6.22:1 AA
Aa #003AB0 on #49E4FF 6.19:1 AA
Aa #36065B on #FF7D12 6.14:1 AA
Aa #F5EDE1 on #C20000 5.49:1 AA
Aa #8512B6 on #FCCD12 5.03:1 AA
Aa #49E4FF on #8512B6 5.01:1 AA
Aa #F5EDE1 on #706675 4.70:1 AA
Aa #003AB0 on #22C93F 4.25:1 AA Large
Aa #FCCD12 on #C20000 4.21:1 AA Large
Aa #49E4FF on #C20000 4.20:1 AA Large
Aa #36065B on #0F87D7 4.10:1 AA Large
Aa #003AB0 on #FA6EFD 3.90:1 AA Large
Aa #003AB0 on #FF7D12 3.67:1 AA Large
Aa #706675 on #FCCD12 3.61:1 AA Large
Aa #49E4FF on #706675 3.59:1 AA Large
Aa #8512B6 on #22C93F 3.44:1 AA Large
Aa #F5EDE1 on #0F87D7 3.31:1 AA Large
Aa #8512B6 on #FA6EFD 3.16:1 AA Large
Aa #8512B6 on #FF7D12 2.97:1 Fail
Aa #706675 on #36065B 2.88:1 Fail
Aa #22C93F on #C20000 2.88:1 Fail
Aa #C20000 on #FA6EFD 2.65:1 Fail
Aa #0F87D7 on #FCCD12 2.54:1 Fail
Aa #49E4FF on #0F87D7 2.53:1 Fail
Aa #FF7D12 on #C20000 2.49:1 Fail
Aa #706675 on #22C93F 2.47:1 Fail
Aa #36065B on #C20000 2.47:1 Fail
Aa #003AB0 on #0F87D7 2.45:1 Fail
Aa #706675 on #FA6EFD 2.27:1 Fail
Aa #F5EDE1 on #FF7D12 2.21:1 Fail
Aa #706675 on #FF7D12 2.13:1 Fail
Aa #F5EDE1 on #FA6EFD 2.08:1 Fail
Aa #36065B on #8512B6 2.07:1 Fail
Aa #8512B6 on #0F87D7 1.98:1 Fail
Aa #F5EDE1 on #22C93F 1.90:1 Fail
Aa #0F87D7 on #22C93F 1.74:1 Fail
Aa #003AB0 on #706675 1.72:1 Fail
Aa #49E4FF on #FF7D12 1.69:1 Fail
Aa #FCCD12 on #FF7D12 1.69:1 Fail
Aa #003AB0 on #36065B 1.67:1 Fail
Aa #0F87D7 on #C20000 1.66:1 Fail
Aa #49E4FF on #FA6EFD 1.59:1 Fail
Aa #0F87D7 on #FA6EFD 1.59:1 Fail
Aa #FCCD12 on #FA6EFD 1.59:1 Fail
Aa #0F87D7 on #FF7D12 1.50:1 Fail
Aa #003AB0 on #C20000 1.48:1 Fail
Aa #49E4FF on #22C93F 1.46:1 Fail
Aa #22C93F on #FCCD12 1.46:1 Fail
Aa #706675 on #0F87D7 1.42:1 Fail
Aa #706675 on #8512B6 1.39:1 Fail
Aa #49E4FF on #F5EDE1 1.31:1 Fail
Aa #F5EDE1 on #FCCD12 1.30:1 Fail
Aa #003AB0 on #8512B6 1.24:1 Fail
Aa #8512B6 on #C20000 1.19:1 Fail
Aa #706675 on #C20000 1.17:1 Fail
Aa #22C93F on #FF7D12 1.16:1 Fail
Aa #22C93F on #FA6EFD 1.09:1 Fail
Aa #FF7D12 on #FA6EFD 1.06:1 Fail
Aa #49E4FF on #FCCD12 1.00:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors