4-Color Tears of Joy Palette

4-Color Tears of Joy Palette

4-color palette · Cool · Light · Complementary harmony

4-Color Tears of Joy Palette

4-color palette · Cool temperature · Light tone · Complementary harmony

Modify
Muted 4 colors Cool Light Complementary
Likes 2,915
Colors 4


CSS variables

:root {
  --c-muted-1: #30364F;
  --c-muted-2: #ACBAC4;
  --c-muted-3: #E1D9BC;
  --c-muted-4: #F0F0DB;
}

About this palette

This 4-color muted palette runs from Tears of Joy (#F0F0DB) as its lightest tone to Tiě Hēi Metal (#30364F) as its darkest. It blends Tiě Hēi Metal, Cold Snap, Coconut Cream and Tears of Joy into a single set you can drop straight into a UI. Of its 6 color pairings, 3 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #30364F on #F0F0DB at 10.3:1.

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


Color breakdown

Tiě Hēi Metal #30364F
RGB
rgb(48, 54, 79)
HSL
hsl(228, 24%, 25%)
Luminance
0.038
Cold Snap #ACBAC4
RGB
rgb(172, 186, 196)
HSL
hsl(205, 17%, 72%)
Luminance
0.479
Coconut Cream #E1D9BC
RGB
rgb(225, 217, 188)
HSL
hsl(47, 38%, 81%)
Luminance
0.693
Tears of Joy #F0F0DB
RGB
rgb(240, 240, 219)
HSL
hsl(60, 41%, 90%)
Luminance
0.860

Contrast & accessibility

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

Aa #30364F on #F0F0DB 10.30:1 AAA
Aa #30364F on #E1D9BC 8.41:1 AAA
Aa #30364F on #ACBAC4 5.99:1 AA
Aa #ACBAC4 on #F0F0DB 1.72:1 Fail
Aa #ACBAC4 on #E1D9BC 1.40:1 Fail
Aa #E1D9BC on #F0F0DB 1.22:1 Fail

Similar palettes

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE
4 colors
#F4EEFF #DCD6F7 #A6B1E1 #424874
4 colors
#B1B2FF #AAC4FF #D2DAFF #EEF1FF
4 colors
#6096B4 #93BFCF #BDCDD6 #EEE9DA
4 colors
#A8D8EA #AA96DA #FCBAD3 #FFFFD2
4 colors
#DEFCF9 #CADEFC #C3BEF0 #CCA8E9
4 colors
#F7FBFC #D6E6F2 #B9D7EA #769FCD
4 colors
#C4DFDF #D2E9E9 #E3F4F4 #F8F6F4
4 colors