Sign Up Sign Up
From Blue To Green

From Blue To Green

10-color palette · Cool · Dark · Analogous harmony

Back to Library

From Blue To Green

10-color palette · Cool temperature · Dark tone · Analogous harmony

Modify
Muted 10 colors Cool Dark Analogous green gameboy blue oldschool
Likes 14
Colors 10

CSS variables

:root {
  --c-muted-1: #03012B;
  --c-muted-2: #0A164A;
  --c-muted-3: #163B74;
  --c-muted-4: #215C8C;
  --c-muted-5: #2398B8;
  --c-muted-6: #23907A;
  --c-muted-7: #1F7A5D;
  --c-muted-8: #19613B;
  --c-muted-9: #135324;
  --c-muted-10: #0E3511;
}

About this palette

This 10-color muted palette runs from Butterfly Blue (#2398B8) as its lightest tone to Midnight (#03012B) as its darkest. It blends Midnight, Deadly Depths, Ashenvale Nights, Sapphire Lace, Butterfly Blue, Palm Springs Splash, Verdant Green, Fun Green, Białowieża Forest and Dark Serpent into a single set you can drop straight into a UI. Of its 45 color pairings, 3 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #03012B on #2398B8 at 6:1.

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

Color breakdown

Midnight #03012B
RGB
rgb(3, 1, 43)
HSL
hsl(243, 95%, 9%)
Luminance
0.002
Deadly Depths #0A164A
RGB
rgb(10, 22, 74)
HSL
hsl(229, 76%, 16%)
Luminance
0.011
Ashenvale Nights #163B74
RGB
rgb(22, 59, 116)
HSL
hsl(216, 68%, 27%)
Luminance
0.046
Sapphire Lace #215C8C
RGB
rgb(33, 92, 140)
HSL
hsl(207, 62%, 34%)
Luminance
0.099
Butterfly Blue #2398B8
RGB
rgb(35, 152, 184)
HSL
hsl(193, 68%, 43%)
Luminance
0.263
Palm Springs Splash #23907A
RGB
rgb(35, 144, 122)
HSL
hsl(168, 61%, 35%)
Luminance
0.217
Verdant Green #1F7A5D
RGB
rgb(31, 122, 93)
HSL
hsl(161, 59%, 30%)
Luminance
0.150
Fun Green #19613B
RGB
rgb(25, 97, 59)
HSL
hsl(148, 59%, 24%)
Luminance
0.091
Białowieża Forest #135324
RGB
rgb(19, 83, 36)
HSL
hsl(136, 63%, 20%)
Luminance
0.065
Dark Serpent #0E3511
RGB
rgb(14, 53, 17)
HSL
hsl(125, 58%, 13%)
Luminance
0.027

Contrast & accessibility

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

Aa #03012B on #2398B8 6.00:1 AA
Aa #03012B on #23907A 5.12:1 AA
Aa #0A164A on #2398B8 5.10:1 AA
Aa #0A164A on #23907A 4.36:1 AA Large
Aa #2398B8 on #0E3511 4.07:1 AA Large
Aa #03012B on #1F7A5D 3.83:1 AA Large
Aa #23907A on #0E3511 3.48:1 AA Large
Aa #163B74 on #2398B8 3.27:1 AA Large
Aa #0A164A on #1F7A5D 3.26:1 AA Large
Aa #03012B on #215C8C 2.85:1 Fail
Aa #163B74 on #23907A 2.79:1 Fail
Aa #2398B8 on #135324 2.73:1 Fail
Aa #03012B on #19613B 2.70:1 Fail
Aa #1F7A5D on #0E3511 2.60:1 Fail
Aa #0A164A on #215C8C 2.42:1 Fail
Aa #23907A on #135324 2.33:1 Fail
Aa #0A164A on #19613B 2.29:1 Fail
Aa #2398B8 on #19613B 2.22:1 Fail
Aa #03012B on #135324 2.20:1 Fail
Aa #215C8C on #2398B8 2.10:1 Fail
Aa #163B74 on #1F7A5D 2.09:1 Fail
Aa #215C8C on #0E3511 1.94:1 Fail
Aa #23907A on #19613B 1.90:1 Fail
Aa #0A164A on #135324 1.87:1 Fail
Aa #03012B on #163B74 1.83:1 Fail
Aa #19613B on #0E3511 1.83:1 Fail
Aa #215C8C on #23907A 1.80:1 Fail
Aa #1F7A5D on #135324 1.75:1 Fail
Aa #0A164A on #163B74 1.56:1 Fail
Aa #163B74 on #215C8C 1.56:1 Fail
Aa #2398B8 on #1F7A5D 1.56:1 Fail
Aa #135324 on #0E3511 1.49:1 Fail
Aa #03012B on #0E3511 1.47:1 Fail
Aa #163B74 on #19613B 1.47:1 Fail
Aa #1F7A5D on #19613B 1.42:1 Fail
Aa #215C8C on #1F7A5D 1.34:1 Fail
Aa #23907A on #1F7A5D 1.34:1 Fail
Aa #215C8C on #135324 1.30:1 Fail
Aa #0A164A on #0E3511 1.25:1 Fail
Aa #163B74 on #0E3511 1.24:1 Fail
Aa #19613B on #135324 1.23:1 Fail
Aa #163B74 on #135324 1.20:1 Fail
Aa #03012B on #0A164A 1.18:1 Fail
Aa #2398B8 on #23907A 1.17:1 Fail
Aa #215C8C on #19613B 1.06: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