Sign Up Sign Up
Blue To Yellow

Blue To Yellow

8-color palette · Cool · Dark · Complementary harmony

Back to Library

Blue To Yellow

8-color palette · Cool temperature · Dark tone · Complementary harmony

Modify
Muted 8 colors Cool Dark Complementary monoramp blue yellow colorramp
Likes 23
Colors 8

CSS variables

:root {
  --c-muted-1: #1C325E;
  --c-muted-2: #404F59;
  --c-muted-3: #616952;
  --c-muted-4: #787B4A;
  --c-muted-5: #105060;
  --c-muted-6: #386A50;
  --c-muted-7: #608441;
  --c-muted-8: #889D31;
}

About this palette

This 8-color muted palette runs from Vigorous Wasabi (#889D31) as its lightest tone to Ending Navy Blue (#1C325E) as its darkest. It blends Ending Navy Blue, Presidential, Rosemary Sprig, Tara’s Drapes, Teal Dark Blue, Jungle Book Green, Shepherd’s Green and Vigorous Wasabi into a single set you can drop straight into a UI. None of the 28 in-palette color pairings clear the WCAG AA contrast threshold (4.5:1), so pair these colors with black or white for body text.

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

Color breakdown

Ending Navy Blue #1C325E
RGB
rgb(28, 50, 94)
HSL
hsl(220, 54%, 24%)
Luminance
0.033
Presidential #404F59
RGB
rgb(64, 79, 89)
HSL
hsl(204, 16%, 30%)
Luminance
0.074
Rosemary Sprig #616952
RGB
rgb(97, 105, 82)
HSL
hsl(81, 12%, 37%)
Luminance
0.133
Tara’s Drapes #787B4A
RGB
rgb(120, 123, 74)
HSL
hsl(64, 25%, 39%)
Luminance
0.187
Teal Dark Blue #105060
RGB
rgb(16, 80, 96)
HSL
hsl(192, 71%, 22%)
Luminance
0.067
Jungle Book Green #386A50
RGB
rgb(56, 106, 80)
HSL
hsl(149, 31%, 32%)
Luminance
0.117
Shepherd’s Green #608441
RGB
rgb(96, 132, 65)
HSL
hsl(92, 34%, 39%)
Luminance
0.194
Vigorous Wasabi #889D31
RGB
rgb(136, 157, 49)
HSL
hsl(72, 52%, 40%)
Luminance
0.296

Contrast & accessibility

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

Aa #1C325E on #889D31 4.15:1 AA Large
Aa #105060 on #889D31 2.96:1 Fail
Aa #1C325E on #608441 2.92:1 Fail
Aa #1C325E on #787B4A 2.84:1 Fail
Aa #404F59 on #889D31 2.79:1 Fail
Aa #1C325E on #616952 2.19:1 Fail
Aa #105060 on #608441 2.08:1 Fail
Aa #386A50 on #889D31 2.07:1 Fail
Aa #787B4A on #105060 2.02:1 Fail
Aa #1C325E on #386A50 2.01:1 Fail
Aa #404F59 on #608441 1.96:1 Fail
Aa #404F59 on #787B4A 1.91:1 Fail
Aa #616952 on #889D31 1.89:1 Fail
Aa #616952 on #105060 1.56:1 Fail
Aa #1C325E on #404F59 1.49:1 Fail
Aa #404F59 on #616952 1.47:1 Fail
Aa #787B4A on #889D31 1.46:1 Fail
Aa #386A50 on #608441 1.46:1 Fail
Aa #105060 on #386A50 1.43:1 Fail
Aa #608441 on #889D31 1.42:1 Fail
Aa #787B4A on #386A50 1.41:1 Fail
Aa #1C325E on #105060 1.40:1 Fail
Aa #404F59 on #386A50 1.35:1 Fail
Aa #616952 on #608441 1.34:1 Fail
Aa #616952 on #787B4A 1.30:1 Fail
Aa #616952 on #386A50 1.09:1 Fail
Aa #404F59 on #105060 1.06:1 Fail
Aa #787B4A on #608441 1.03:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors