Sign Up Sign Up
GirlsBestFriend12

GirlsBestFriend12

12-color palette · Warm · Mixed · Monochromatic harmony

Back to Library

GirlsBestFriend12

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

Modify
Vibrant 12 colors Warm Mixed Monochromatic warm blue pastel cool
Likes 46
Colors 12

CSS variables

:root {
  --c-vibrant-1: #350D02;
  --c-vibrant-2: #6B2B1B;
  --c-vibrant-3: #8C4732;
  --c-vibrant-4: #AD634A;
  --c-vibrant-5: #FFB6AB;
  --c-vibrant-6: #D97F70;
  --c-vibrant-7: #C35838;
  --c-vibrant-8: #AD3100;
  --c-vibrant-9: #D6FAFF;
  --c-vibrant-10: #8CDEFA;
  --c-vibrant-11: #74B2DB;
  --c-vibrant-12: #537FDB;
}

About this palette

This 12-color vibrant palette runs from Salt Mountain (#D6FAFF) as its lightest tone to Chocolate Melange (#350D02) as its darkest. It blends Chocolate Melange, Hereford Cow Brown, Sedona Stone, Red Cent, Washed-Out Crimson, Golgfag Brown, Tartare, Burnt Sienna, Salt Mountain, Tranquil Pool, Tribute and Blue Jay into a single set you can drop straight into a UI. Of its 66 color pairings, 12 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #350D02 on #D6FAFF at 15.69:1.

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

Color breakdown

Chocolate Melange #350D02
RGB
rgb(53, 13, 2)
HSL
hsl(13, 93%, 11%)
Luminance
0.011
Hereford Cow Brown #6B2B1B
RGB
rgb(107, 43, 27)
HSL
hsl(12, 60%, 26%)
Luminance
0.049
Sedona Stone #8C4732
RGB
rgb(140, 71, 50)
HSL
hsl(14, 47%, 37%)
Luminance
0.103
Red Cent #AD634A
RGB
rgb(173, 99, 74)
HSL
hsl(15, 40%, 48%)
Luminance
0.183
Washed-Out Crimson #FFB6AB
RGB
rgb(255, 182, 171)
HSL
hsl(8, 100%, 84%)
Luminance
0.577
Golgfag Brown #D97F70
RGB
rgb(217, 127, 112)
HSL
hsl(9, 58%, 65%)
Luminance
0.311
Tartare #C35838
RGB
rgb(195, 88, 56)
HSL
hsl(14, 55%, 49%)
Luminance
0.189
Burnt Sienna #AD3100
RGB
rgb(173, 49, 0)
HSL
hsl(17, 100%, 34%)
Luminance
0.111
Salt Mountain #D6FAFF
RGB
rgb(214, 250, 255)
HSL
hsl(187, 100%, 92%)
Luminance
0.899
Tranquil Pool #8CDEFA
RGB
rgb(140, 222, 250)
HSL
hsl(195, 92%, 76%)
Luminance
0.647
Tribute #74B2DB
RGB
rgb(116, 178, 219)
HSL
hsl(204, 59%, 66%)
Luminance
0.407
Blue Jay #537FDB
RGB
rgb(83, 127, 219)
HSL
hsl(221, 65%, 59%)
Luminance
0.221

Contrast & accessibility

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

Aa #350D02 on #D6FAFF 15.69:1 AAA
Aa #350D02 on #8CDEFA 11.53:1 AAA
Aa #350D02 on #FFB6AB 10.36:1 AAA
Aa #6B2B1B on #D6FAFF 9.55:1 AAA
Aa #350D02 on #74B2DB 7.55:1 AAA
Aa #6B2B1B on #8CDEFA 7.02:1 AAA
Aa #6B2B1B on #FFB6AB 6.31:1 AA
Aa #8C4732 on #D6FAFF 6.20:1 AA
Aa #350D02 on #D97F70 5.97:1 AA
Aa #AD3100 on #D6FAFF 5.90:1 AA
Aa #6B2B1B on #74B2DB 4.60:1 AA
Aa #8C4732 on #8CDEFA 4.55:1 AA
Aa #350D02 on #537FDB 4.49:1 AA Large
Aa #AD3100 on #8CDEFA 4.34:1 AA Large
Aa #8C4732 on #FFB6AB 4.09:1 AA Large
Aa #AD634A on #D6FAFF 4.07:1 AA Large
Aa #C35838 on #D6FAFF 3.98:1 AA Large
Aa #350D02 on #C35838 3.95:1 AA Large
Aa #FFB6AB on #AD3100 3.90:1 AA Large
Aa #350D02 on #AD634A 3.85:1 AA Large
Aa #6B2B1B on #D97F70 3.63:1 AA Large
Aa #D6FAFF on #537FDB 3.50:1 AA Large
Aa #AD634A on #8CDEFA 2.99:1 Fail
Aa #8C4732 on #74B2DB 2.98:1 Fail
Aa #C35838 on #8CDEFA 2.92:1 Fail
Aa #AD3100 on #74B2DB 2.84:1 Fail
Aa #6B2B1B on #537FDB 2.73:1 Fail
Aa #AD634A on #FFB6AB 2.69:1 Fail
Aa #350D02 on #AD3100 2.66:1 Fail
Aa #FFB6AB on #C35838 2.63:1 Fail
Aa #D97F70 on #D6FAFF 2.63:1 Fail
Aa #8CDEFA on #537FDB 2.57:1 Fail
Aa #350D02 on #8C4732 2.53:1 Fail
Aa #6B2B1B on #C35838 2.40:1 Fail
Aa #8C4732 on #D97F70 2.36:1 Fail
Aa #6B2B1B on #AD634A 2.35:1 Fail
Aa #FFB6AB on #537FDB 2.31:1 Fail
Aa #D97F70 on #AD3100 2.24:1 Fail
Aa #D6FAFF on #74B2DB 2.08:1 Fail
Aa #AD634A on #74B2DB 1.96:1 Fail
Aa #D97F70 on #8CDEFA 1.93:1 Fail
Aa #C35838 on #74B2DB 1.91:1 Fail
Aa #8C4732 on #537FDB 1.77:1 Fail
Aa #FFB6AB on #D97F70 1.74:1 Fail
Aa #AD3100 on #537FDB 1.69:1 Fail
Aa #74B2DB on #537FDB 1.68:1 Fail
Aa #350D02 on #6B2B1B 1.64:1 Fail
Aa #6B2B1B on #AD3100 1.62:1 Fail
Aa #8C4732 on #C35838 1.56:1 Fail
Aa #AD634A on #D97F70 1.55:1 Fail
Aa #6B2B1B on #8C4732 1.54:1 Fail
Aa #8CDEFA on #74B2DB 1.53:1 Fail
Aa #8C4732 on #AD634A 1.52:1 Fail
Aa #FFB6AB on #D6FAFF 1.51:1 Fail
Aa #D97F70 on #C35838 1.51:1 Fail
Aa #C35838 on #AD3100 1.48:1 Fail
Aa #AD634A on #AD3100 1.45:1 Fail
Aa #FFB6AB on #74B2DB 1.37:1 Fail
Aa #D6FAFF on #8CDEFA 1.36:1 Fail
Aa #D97F70 on #537FDB 1.33:1 Fail
Aa #D97F70 on #74B2DB 1.27:1 Fail
Aa #AD634A on #537FDB 1.16:1 Fail
Aa #C35838 on #537FDB 1.14:1 Fail
Aa #FFB6AB on #8CDEFA 1.11:1 Fail
Aa #8C4732 on #AD3100 1.05:1 Fail
Aa #AD634A on #C35838 1.02: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