Sign Up Sign Up
HK Pillbug Beach Party

HK Pillbug Beach Party

10-color palette · Cool · Mixed · Analogous harmony

Back to Library

HK Pillbug Beach Party

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

Modify
Muted 10 colors Cool Mixed Analogous gray blue cool cold
Likes 43
Colors 10

CSS variables

:root {
  --c-muted-1: #050C36;
  --c-muted-2: #202D53;
  --c-muted-3: #41567E;
  --c-muted-4: #5A617C;
  --c-muted-5: #7A98B2;
  --c-muted-6: #98B3B9;
  --c-muted-7: #AD9FAC;
  --c-muted-8: #878DA5;
  --c-muted-9: #4F556A;
  --c-muted-10: #282B37;
}

About this palette

This 10-color muted palette runs from Mohair Soft Blue Grey (#98B3B9) as its lightest tone to Infinite Night (#050C36) as its darkest. It blends Infinite Night, Pico Void, Sailor, Strong Iris, Dyer’s Woad, Mohair Soft Blue Grey, Symbolic, Violet Verbena, Heavy Violet and Mangu Black into a single set you can drop straight into a UI. Of its 45 color pairings, 9 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #050C36 on #98B3B9 at 8.53:1.

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

Color breakdown

Infinite Night #050C36
RGB
rgb(5, 12, 54)
HSL
hsl(231, 83%, 12%)
Luminance
0.006
Pico Void #202D53
RGB
rgb(32, 45, 83)
HSL
hsl(225, 44%, 23%)
Luminance
0.028
Sailor #41567E
RGB
rgb(65, 86, 126)
HSL
hsl(219, 32%, 37%)
Luminance
0.093
Strong Iris #5A617C
RGB
rgb(90, 97, 124)
HSL
hsl(228, 16%, 42%)
Luminance
0.122
Dyer’s Woad #7A98B2
RGB
rgb(122, 152, 178)
HSL
hsl(208, 27%, 59%)
Luminance
0.298
Mohair Soft Blue Grey #98B3B9
RGB
rgb(152, 179, 185)
HSL
hsl(191, 19%, 66%)
Luminance
0.424
Symbolic #AD9FAC
RGB
rgb(173, 159, 172)
HSL
hsl(304, 8%, 65%)
Luminance
0.367
Violet Verbena #878DA5
RGB
rgb(135, 141, 165)
HSL
hsl(228, 14%, 59%)
Luminance
0.269
Heavy Violet #4F556A
RGB
rgb(79, 85, 106)
HSL
hsl(227, 15%, 36%)
Luminance
0.092
Mangu Black #282B37
RGB
rgb(40, 43, 55)
HSL
hsl(228, 16%, 19%)
Luminance
0.025

Contrast & accessibility

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

Aa #050C36 on #98B3B9 8.53:1 AAA
Aa #050C36 on #AD9FAC 7.49:1 AAA
Aa #98B3B9 on #282B37 6.36:1 AA
Aa #050C36 on #7A98B2 6.26:1 AA
Aa #202D53 on #98B3B9 6.07:1 AA
Aa #050C36 on #878DA5 5.74:1 AA
Aa #AD9FAC on #282B37 5.59:1 AA
Aa #202D53 on #AD9FAC 5.34:1 AA
Aa #7A98B2 on #282B37 4.67:1 AA
Aa #202D53 on #7A98B2 4.46:1 AA Large
Aa #878DA5 on #282B37 4.28:1 AA Large
Aa #202D53 on #878DA5 4.09:1 AA Large
Aa #98B3B9 on #4F556A 3.34:1 AA Large
Aa #41567E on #98B3B9 3.32:1 AA Large
Aa #050C36 on #5A617C 3.09:1 AA Large
Aa #AD9FAC on #4F556A 2.93:1 Fail
Aa #41567E on #AD9FAC 2.92:1 Fail
Aa #5A617C on #98B3B9 2.76:1 Fail
Aa #050C36 on #41567E 2.57:1 Fail
Aa #050C36 on #4F556A 2.55:1 Fail
Aa #7A98B2 on #4F556A 2.45:1 Fail
Aa #41567E on #7A98B2 2.44:1 Fail
Aa #5A617C on #AD9FAC 2.43:1 Fail
Aa #5A617C on #282B37 2.30:1 Fail
Aa #878DA5 on #4F556A 2.25:1 Fail
Aa #41567E on #878DA5 2.23:1 Fail
Aa #202D53 on #5A617C 2.20:1 Fail
Aa #5A617C on #7A98B2 2.03:1 Fail
Aa #41567E on #282B37 1.92:1 Fail
Aa #4F556A on #282B37 1.90:1 Fail
Aa #5A617C on #878DA5 1.86:1 Fail
Aa #202D53 on #41567E 1.83:1 Fail
Aa #202D53 on #4F556A 1.82:1 Fail
Aa #98B3B9 on #878DA5 1.49:1 Fail
Aa #050C36 on #202D53 1.40:1 Fail
Aa #7A98B2 on #98B3B9 1.36:1 Fail
Aa #050C36 on #282B37 1.34:1 Fail
Aa #AD9FAC on #878DA5 1.31:1 Fail
Aa #5A617C on #4F556A 1.21:1 Fail
Aa #41567E on #5A617C 1.20:1 Fail
Aa #7A98B2 on #AD9FAC 1.20:1 Fail
Aa #98B3B9 on #AD9FAC 1.14:1 Fail
Aa #7A98B2 on #878DA5 1.09:1 Fail
Aa #202D53 on #282B37 1.05:1 Fail
Aa #41567E on #4F556A 1.01: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