Sign Up Sign Up
Latesummer

Latesummer

9-color palette · Neutral · Mixed · Complementary harmony

Back to Library

Latesummer

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

Modify
Vibrant 9 colors Neutral Mixed Complementary
Likes 5
Colors 9

CSS variables

:root {
  --c-vibrant-1: #254E70;
  --c-vibrant-2: #37718E;
  --c-vibrant-3: #8EE3EF;
  --c-vibrant-4: #A30000;
  --c-vibrant-5: #FF7700;
  --c-vibrant-6: #E8C547;
  --c-vibrant-7: #118A45;
  --c-vibrant-8: #60B426;
  --c-vibrant-9: #BED558;
}

About this palette

This 9-color vibrant palette runs from Photon Barrier (#8EE3EF) as its lightest tone to Blue Tang (#254E70) as its darkest. It blends Blue Tang, Living Stream, Photon Barrier, Stanger Red, Lucky Orange, Liberator Gold, The Wild Apothecary, Chasm Green and Frog Prince into a single set you can drop straight into a UI. Of its 36 color pairings, 6 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #254E70 on #8EE3EF at 5.99:1.

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

Color breakdown

Blue Tang #254E70
RGB
rgb(37, 78, 112)
HSL
hsl(207, 50%, 29%)
Luminance
0.070
Living Stream #37718E
RGB
rgb(55, 113, 142)
HSL
hsl(200, 44%, 39%)
Luminance
0.146
Photon Barrier #8EE3EF
RGB
rgb(142, 227, 239)
HSL
hsl(187, 75%, 75%)
Luminance
0.669
Stanger Red #A30000
RGB
rgb(163, 0, 0)
HSL
hsl(0, 100%, 32%)
Luminance
0.078
Lucky Orange #FF7700
RGB
rgb(255, 119, 0)
HSL
hsl(28, 100%, 50%)
Luminance
0.345
Liberator Gold #E8C547
RGB
rgb(232, 197, 71)
HSL
hsl(47, 78%, 59%)
Luminance
0.575
The Wild Apothecary #118A45
RGB
rgb(17, 138, 69)
HSL
hsl(146, 78%, 30%)
Luminance
0.187
Chasm Green #60B426
RGB
rgb(96, 180, 38)
HSL
hsl(95, 65%, 43%)
Luminance
0.353
Frog Prince #BED558
RGB
rgb(190, 213, 88)
HSL
hsl(71, 60%, 59%)
Luminance
0.592

Contrast & accessibility

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

Aa #254E70 on #8EE3EF 5.99:1 AA
Aa #8EE3EF on #A30000 5.62:1 AA
Aa #254E70 on #BED558 5.35:1 AA
Aa #254E70 on #E8C547 5.21:1 AA
Aa #A30000 on #BED558 5.02:1 AA
Aa #A30000 on #E8C547 4.89:1 AA
Aa #37718E on #8EE3EF 3.67:1 AA Large
Aa #254E70 on #60B426 3.35:1 AA Large
Aa #254E70 on #FF7700 3.28:1 AA Large
Aa #37718E on #BED558 3.28:1 AA Large
Aa #37718E on #E8C547 3.19:1 AA Large
Aa #A30000 on #60B426 3.15:1 AA Large
Aa #A30000 on #FF7700 3.09:1 AA Large
Aa #8EE3EF on #118A45 3.03:1 AA Large
Aa #118A45 on #BED558 2.71:1 Fail
Aa #E8C547 on #118A45 2.64:1 Fail
Aa #37718E on #60B426 2.06:1 Fail
Aa #37718E on #FF7700 2.02:1 Fail
Aa #254E70 on #118A45 1.98:1 Fail
Aa #A30000 on #118A45 1.86:1 Fail
Aa #8EE3EF on #FF7700 1.82:1 Fail
Aa #8EE3EF on #60B426 1.79:1 Fail
Aa #118A45 on #60B426 1.70:1 Fail
Aa #FF7700 on #118A45 1.66:1 Fail
Aa #254E70 on #37718E 1.63:1 Fail
Aa #FF7700 on #BED558 1.63:1 Fail
Aa #60B426 on #BED558 1.60:1 Fail
Aa #FF7700 on #E8C547 1.59:1 Fail
Aa #E8C547 on #60B426 1.55:1 Fail
Aa #37718E on #A30000 1.53:1 Fail
Aa #37718E on #118A45 1.21:1 Fail
Aa #8EE3EF on #E8C547 1.15:1 Fail
Aa #8EE3EF on #BED558 1.12:1 Fail
Aa #254E70 on #A30000 1.06:1 Fail
Aa #E8C547 on #BED558 1.03:1 Fail
Aa #FF7700 on #60B426 1.02:1 Fail

Similar palettes

#EDF1D6 #9DC08B #609966 #40513B
4 colors
#F5F7F8 #F4CE14 #495E57 #45474B
4 colors
#222831 #393E46 #FFD369 #EEEEEE
4 colors
#000000 #52057B #892CDC #BC6FF1
4 colors
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colors
#F5EFE7 #D8C4B6 #4F709C #213555
4 colors
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colors
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colors