Sign Up Sign Up
Petrichor

Petrichor

12-color palette · Cool · Mixed · Analogous harmony

Back to Library

Petrichor

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

Modify
Muted 12 colors Cool Mixed Analogous green blue soft muted
Likes 44
Colors 12

CSS variables

:root {
  --c-muted-1: #445369;
  --c-muted-2: #586A76;
  --c-muted-3: #677081;
  --c-muted-4: #7A8AA1;
  --c-muted-5: #85A7B4;
  --c-muted-6: #97ADB6;
  --c-muted-7: #9FB3CC;
  --c-muted-8: #BBE3D8;
  --c-muted-9: #497173;
  --c-muted-10: #5B837F;
  --c-muted-11: #558B92;
  --c-muted-12: #6C8D7B;
}

About this palette

This 12-color muted palette runs from Serendipity (#BBE3D8) as its lightest tone to Into the Stratosphere (#445369) as its darkest. It blends Into the Stratosphere, Blue Insignia, Flintstone, Hilo Bay, Equanimity, Pacific Bliss, Stellar Blue, Serendipity, Vining Ivy, Stream Burble, Dusty Turquoise and Hanging Vine into a single set you can drop straight into a UI. Of its 66 color pairings, 1 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #445369 on #BBE3D8 at 5.62:1.

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

Color breakdown

Into the Stratosphere #445369
RGB
rgb(68, 83, 105)
HSL
hsl(216, 21%, 34%)
Luminance
0.084
Blue Insignia #586A76
RGB
rgb(88, 106, 118)
HSL
hsl(204, 15%, 40%)
Luminance
0.137
Flintstone #677081
RGB
rgb(103, 112, 129)
HSL
hsl(219, 11%, 45%)
Luminance
0.161
Hilo Bay #7A8AA1
RGB
rgb(122, 138, 161)
HSL
hsl(215, 17%, 55%)
Luminance
0.249
Equanimity #85A7B4
RGB
rgb(133, 167, 180)
HSL
hsl(197, 24%, 61%)
Luminance
0.359
Pacific Bliss #97ADB6
RGB
rgb(151, 173, 182)
HSL
hsl(197, 18%, 65%)
Luminance
0.398
Stellar Blue #9FB3CC
RGB
rgb(159, 179, 204)
HSL
hsl(213, 31%, 71%)
Luminance
0.440
Serendipity #BBE3D8
RGB
rgb(187, 227, 216)
HSL
hsl(164, 42%, 81%)
Luminance
0.705
Vining Ivy #497173
RGB
rgb(73, 113, 115)
HSL
hsl(183, 22%, 37%)
Luminance
0.145
Stream Burble #5B837F
RGB
rgb(91, 131, 127)
HSL
hsl(174, 18%, 44%)
Luminance
0.200
Dusty Turquoise #558B92
RGB
rgb(85, 139, 146)
HSL
hsl(187, 26%, 45%)
Luminance
0.225
Hanging Vine #6C8D7B
RGB
rgb(108, 141, 123)
HSL
hsl(147, 13%, 49%)
Luminance
0.237

Contrast & accessibility

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

Aa #445369 on #BBE3D8 5.62:1 AA
Aa #586A76 on #BBE3D8 4.04:1 AA Large
Aa #BBE3D8 on #497173 3.88:1 AA Large
Aa #445369 on #9FB3CC 3.64:1 AA Large
Aa #677081 on #BBE3D8 3.58:1 AA Large
Aa #445369 on #97ADB6 3.34:1 AA Large
Aa #445369 on #85A7B4 3.05:1 AA Large
Aa #BBE3D8 on #5B837F 3.02:1 AA Large
Aa #BBE3D8 on #558B92 2.75:1 Fail
Aa #BBE3D8 on #6C8D7B 2.63:1 Fail
Aa #586A76 on #9FB3CC 2.62:1 Fail
Aa #7A8AA1 on #BBE3D8 2.52:1 Fail
Aa #9FB3CC on #497173 2.52:1 Fail
Aa #586A76 on #97ADB6 2.40:1 Fail
Aa #677081 on #9FB3CC 2.33:1 Fail
Aa #97ADB6 on #497173 2.30:1 Fail
Aa #445369 on #7A8AA1 2.22:1 Fail
Aa #586A76 on #85A7B4 2.19:1 Fail
Aa #445369 on #6C8D7B 2.13:1 Fail
Aa #677081 on #97ADB6 2.13:1 Fail
Aa #85A7B4 on #497173 2.10:1 Fail
Aa #445369 on #558B92 2.04:1 Fail
Aa #9FB3CC on #5B837F 1.96:1 Fail
Aa #677081 on #85A7B4 1.94:1 Fail
Aa #445369 on #5B837F 1.86:1 Fail
Aa #85A7B4 on #BBE3D8 1.84:1 Fail
Aa #97ADB6 on #5B837F 1.79:1 Fail
Aa #9FB3CC on #558B92 1.78:1 Fail
Aa #9FB3CC on #6C8D7B 1.71:1 Fail
Aa #97ADB6 on #BBE3D8 1.68:1 Fail
Aa #7A8AA1 on #9FB3CC 1.64:1 Fail
Aa #85A7B4 on #5B837F 1.64:1 Fail
Aa #97ADB6 on #558B92 1.63:1 Fail
Aa #586A76 on #7A8AA1 1.60:1 Fail
Aa #445369 on #677081 1.57:1 Fail
Aa #97ADB6 on #6C8D7B 1.56:1 Fail
Aa #7A8AA1 on #497173 1.54:1 Fail
Aa #9FB3CC on #BBE3D8 1.54:1 Fail
Aa #586A76 on #6C8D7B 1.53:1 Fail
Aa #7A8AA1 on #97ADB6 1.50:1 Fail
Aa #85A7B4 on #558B92 1.49:1 Fail
Aa #586A76 on #558B92 1.47:1 Fail
Aa #497173 on #6C8D7B 1.47:1 Fail
Aa #445369 on #497173 1.45:1 Fail
Aa #85A7B4 on #6C8D7B 1.43:1 Fail
Aa #677081 on #7A8AA1 1.42:1 Fail
Aa #497173 on #558B92 1.41:1 Fail
Aa #445369 on #586A76 1.39:1 Fail
Aa #7A8AA1 on #85A7B4 1.37:1 Fail
Aa #677081 on #6C8D7B 1.36:1 Fail
Aa #586A76 on #5B837F 1.34:1 Fail
Aa #677081 on #558B92 1.30:1 Fail
Aa #497173 on #5B837F 1.28:1 Fail
Aa #7A8AA1 on #5B837F 1.20:1 Fail
Aa #85A7B4 on #9FB3CC 1.20:1 Fail
Aa #677081 on #5B837F 1.19:1 Fail
Aa #5B837F on #6C8D7B 1.15:1 Fail
Aa #586A76 on #677081 1.13:1 Fail
Aa #85A7B4 on #97ADB6 1.10:1 Fail
Aa #5B837F on #558B92 1.10:1 Fail
Aa #7A8AA1 on #558B92 1.09:1 Fail
Aa #97ADB6 on #9FB3CC 1.09:1 Fail
Aa #677081 on #497173 1.08:1 Fail
Aa #586A76 on #497173 1.04:1 Fail
Aa #7A8AA1 on #6C8D7B 1.04:1 Fail
Aa #558B92 on #6C8D7B 1.04: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