Sign Up Sign Up
Watermelon 21

Watermelon 21

12-color palette · Warm · Mixed · Triadic harmony

Back to Library

Watermelon 21

12-color palette · Warm temperature · Mixed tone · Triadic harmony

Modify
Vibrant 12 colors Warm Mixed Triadic cute happy summer fruit
Likes 10
Colors 12

CSS variables

:root {
  --c-vibrant-1: #EE0E66;
  --c-vibrant-2: #F25290;
  --c-vibrant-3: #FA9ABF;
  --c-vibrant-4: #FCE7F0;
  --c-vibrant-5: #F3DAA4;
  --c-vibrant-6: #A7B363;
  --c-vibrant-7: #808B2D;
  --c-vibrant-8: #397E09;
  --c-vibrant-9: #3F854F;
  --c-vibrant-10: #E9FAFE;
  --c-vibrant-11: #C4F9FD;
  --c-vibrant-12: #97C8CF;
}

About this palette

This 12-color vibrant palette runs from Placebo Sky (#E9FAFE) as its lightest tone to Green People (#397E09) as its darkest. It blends Borderline Pink, Pansy, Pastel Magenta, Cherubic, Double Cream, Cornstalk, Absinthe Dreams, Green People, Imperial Green, Placebo Sky, Thin Air and Adriatic Haze 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 #397E09 on #E9FAFE at 4.7:1.

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

Color breakdown

Borderline Pink #EE0E66
RGB
rgb(238, 14, 102)
HSL
hsl(336, 89%, 49%)
Luminance
0.195
Pansy #F25290
RGB
rgb(242, 82, 144)
HSL
hsl(337, 86%, 64%)
Luminance
0.269
Pastel Magenta #FA9ABF
RGB
rgb(250, 154, 191)
HSL
hsl(337, 91%, 79%)
Luminance
0.472
Cherubic #FCE7F0
RGB
rgb(252, 231, 240)
HSL
hsl(334, 78%, 95%)
Luminance
0.841
Double Cream #F3DAA4
RGB
rgb(243, 218, 164)
HSL
hsl(41, 77%, 80%)
Luminance
0.719
Cornstalk #A7B363
RGB
rgb(167, 179, 99)
HSL
hsl(69, 34%, 55%)
Luminance
0.414
Absinthe Dreams #808B2D
RGB
rgb(128, 139, 45)
HSL
hsl(67, 51%, 36%)
Luminance
0.232
Green People #397E09
RGB
rgb(57, 126, 9)
HSL
hsl(95, 87%, 26%)
Luminance
0.158
Imperial Green #3F854F
RGB
rgb(63, 133, 79)
HSL
hsl(134, 36%, 38%)
Luminance
0.184
Placebo Sky #E9FAFE
RGB
rgb(233, 250, 254)
HSL
hsl(191, 91%, 95%)
Luminance
0.929
Thin Air #C4F9FD
RGB
rgb(196, 249, 253)
HSL
hsl(184, 93%, 88%)
Luminance
0.866
Adriatic Haze #97C8CF
RGB
rgb(151, 200, 207)
HSL
hsl(188, 37%, 70%)
Luminance
0.524

Contrast & accessibility

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

Aa #397E09 on #E9FAFE 4.70:1 AA
Aa #397E09 on #C4F9FD 4.40:1 AA Large
Aa #FCE7F0 on #397E09 4.28:1 AA Large
Aa #3F854F on #E9FAFE 4.18:1 AA Large
Aa #EE0E66 on #E9FAFE 4.00:1 AA Large
Aa #3F854F on #C4F9FD 3.91:1 AA Large
Aa #FCE7F0 on #3F854F 3.81:1 AA Large
Aa #EE0E66 on #C4F9FD 3.75:1 AA Large
Aa #F3DAA4 on #397E09 3.69:1 AA Large
Aa #EE0E66 on #FCE7F0 3.65:1 AA Large
Aa #808B2D on #E9FAFE 3.46:1 AA Large
Aa #F3DAA4 on #3F854F 3.29:1 AA Large
Aa #808B2D on #C4F9FD 3.24:1 AA Large
Aa #FCE7F0 on #808B2D 3.16:1 AA Large
Aa #EE0E66 on #F3DAA4 3.14:1 AA Large
Aa #F25290 on #E9FAFE 3.06:1 AA Large
Aa #F25290 on #C4F9FD 2.87:1 Fail
Aa #F25290 on #FCE7F0 2.79:1 Fail
Aa #397E09 on #97C8CF 2.76:1 Fail
Aa #F3DAA4 on #808B2D 2.72:1 Fail
Aa #FA9ABF on #397E09 2.51:1 Fail
Aa #3F854F on #97C8CF 2.45:1 Fail
Aa #F25290 on #F3DAA4 2.41:1 Fail
Aa #EE0E66 on #97C8CF 2.35:1 Fail
Aa #FA9ABF on #3F854F 2.23:1 Fail
Aa #A7B363 on #397E09 2.23:1 Fail
Aa #EE0E66 on #FA9ABF 2.13:1 Fail
Aa #A7B363 on #E9FAFE 2.11:1 Fail
Aa #808B2D on #97C8CF 2.03:1 Fail
Aa #A7B363 on #3F854F 1.98:1 Fail
Aa #A7B363 on #C4F9FD 1.98:1 Fail
Aa #FCE7F0 on #A7B363 1.92:1 Fail
Aa #EE0E66 on #A7B363 1.90:1 Fail
Aa #FA9ABF on #E9FAFE 1.87:1 Fail
Aa #FA9ABF on #808B2D 1.85:1 Fail
Aa #F25290 on #97C8CF 1.80:1 Fail
Aa #FA9ABF on #C4F9FD 1.75:1 Fail
Aa #FA9ABF on #FCE7F0 1.71:1 Fail
Aa #E9FAFE on #97C8CF 1.70:1 Fail
Aa #F3DAA4 on #A7B363 1.66:1 Fail
Aa #A7B363 on #808B2D 1.64:1 Fail
Aa #F25290 on #FA9ABF 1.63:1 Fail
Aa #C4F9FD on #97C8CF 1.60:1 Fail
Aa #FCE7F0 on #97C8CF 1.55:1 Fail
Aa #F25290 on #397E09 1.53:1 Fail
Aa #FA9ABF on #F3DAA4 1.47:1 Fail
Aa #F25290 on #A7B363 1.45:1 Fail
Aa #F25290 on #3F854F 1.36:1 Fail
Aa #808B2D on #397E09 1.36:1 Fail
Aa #F3DAA4 on #97C8CF 1.34:1 Fail
Aa #EE0E66 on #F25290 1.31:1 Fail
Aa #F3DAA4 on #E9FAFE 1.27:1 Fail
Aa #A7B363 on #97C8CF 1.24:1 Fail
Aa #808B2D on #3F854F 1.21:1 Fail
Aa #F3DAA4 on #C4F9FD 1.19:1 Fail
Aa #EE0E66 on #397E09 1.17:1 Fail
Aa #EE0E66 on #808B2D 1.16:1 Fail
Aa #FCE7F0 on #F3DAA4 1.16:1 Fail
Aa #F25290 on #808B2D 1.13:1 Fail
Aa #FA9ABF on #A7B363 1.13:1 Fail
Aa #397E09 on #3F854F 1.12:1 Fail
Aa #FA9ABF on #97C8CF 1.10:1 Fail
Aa #FCE7F0 on #E9FAFE 1.10:1 Fail
Aa #E9FAFE on #C4F9FD 1.07:1 Fail
Aa #EE0E66 on #3F854F 1.05:1 Fail
Aa #FCE7F0 on #C4F9FD 1.03:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors