Sign Up Sign Up
AG 500Redux

AG 500Redux

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

AG 500Redux

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

Modify
Muted 12 colors Cool Mixed Complementary oldschool crt retrotech
Likes 74
Colors 12

CSS variables

:root {
  --c-muted-1: #403F46;
  --c-muted-2: #5F6367;
  --c-muted-3: #817F79;
  --c-muted-4: #A19D94;
  --c-muted-5: #D7D6D1;
  --c-muted-6: #F3F3EE;
  --c-muted-7: #4C8ED2;
  --c-muted-8: #6BA5E0;
  --c-muted-9: #1CB9B5;
  --c-muted-10: #67CBC4;
  --c-muted-11: #6D5A8C;
  --c-muted-12: #9A6DB6;
}

About this palette

This 12-color muted palette runs from Pearl White (#F3F3EE) as its lightest tone to Bluish Black (#403F46) as its darkest. It blends Bluish Black, Carriage Wheel, Concord, Fashion Grey, Fog Beacon, Pearl White, Blue Dart, Acapulco Dive, Swagger, Skylar, Emperor Jewel and Viola into a single set you can drop straight into a UI. Of its 66 color pairings, 5 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #403F46 on #F3F3EE at 9.35:1.

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

Color breakdown

Bluish Black #403F46
RGB
rgb(64, 63, 70)
HSL
hsl(249, 5%, 26%)
Luminance
0.051
Carriage Wheel #5F6367
RGB
rgb(95, 99, 103)
HSL
hsl(210, 4%, 39%)
Luminance
0.123
Concord #817F79
RGB
rgb(129, 127, 121)
HSL
hsl(45, 3%, 49%)
Luminance
0.212
Fashion Grey #A19D94
RGB
rgb(161, 157, 148)
HSL
hsl(42, 6%, 61%)
Luminance
0.338
Fog Beacon #D7D6D1
RGB
rgb(215, 214, 209)
HSL
hsl(50, 7%, 83%)
Luminance
0.671
Pearl White #F3F3EE
RGB
rgb(243, 243, 238)
HSL
hsl(60, 17%, 94%)
Luminance
0.893
Blue Dart #4C8ED2
RGB
rgb(76, 142, 210)
HSL
hsl(210, 60%, 56%)
Luminance
0.255
Acapulco Dive #6BA5E0
RGB
rgb(107, 165, 224)
HSL
hsl(210, 65%, 65%)
Luminance
0.354
Swagger #1CB9B5
RGB
rgb(28, 185, 181)
HSL
hsl(178, 74%, 42%)
Luminance
0.383
Skylar #67CBC4
RGB
rgb(103, 203, 196)
HSL
hsl(176, 49%, 60%)
Luminance
0.496
Emperor Jewel #6D5A8C
RGB
rgb(109, 90, 140)
HSL
hsl(263, 22%, 45%)
Luminance
0.125
Viola #9A6DB6
RGB
rgb(154, 109, 182)
HSL
hsl(277, 33%, 57%)
Luminance
0.212

Contrast & accessibility

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

Aa #403F46 on #F3F3EE 9.35:1 AAA
Aa #403F46 on #D7D6D1 7.15:1 AAA
Aa #5F6367 on #F3F3EE 5.44:1 AA
Aa #403F46 on #67CBC4 5.41:1 AA
Aa #F3F3EE on #6D5A8C 5.40:1 AA
Aa #403F46 on #1CB9B5 4.29:1 AA Large
Aa #5F6367 on #D7D6D1 4.16:1 AA Large
Aa #D7D6D1 on #6D5A8C 4.13:1 AA Large
Aa #403F46 on #6BA5E0 4.01:1 AA Large
Aa #403F46 on #A19D94 3.85:1 AA Large
Aa #817F79 on #F3F3EE 3.60:1 AA Large
Aa #F3F3EE on #9A6DB6 3.60:1 AA Large
Aa #5F6367 on #67CBC4 3.15:1 AA Large
Aa #67CBC4 on #6D5A8C 3.13:1 AA Large
Aa #F3F3EE on #4C8ED2 3.09:1 AA Large
Aa #403F46 on #4C8ED2 3.03:1 AA Large
Aa #D7D6D1 on #9A6DB6 2.76:1 Fail
Aa #817F79 on #D7D6D1 2.75:1 Fail
Aa #403F46 on #817F79 2.60:1 Fail
Aa #403F46 on #9A6DB6 2.60:1 Fail
Aa #5F6367 on #1CB9B5 2.50:1 Fail
Aa #1CB9B5 on #6D5A8C 2.48:1 Fail
Aa #A19D94 on #F3F3EE 2.43:1 Fail
Aa #D7D6D1 on #4C8ED2 2.36:1 Fail
Aa #5F6367 on #6BA5E0 2.33:1 Fail
Aa #F3F3EE on #6BA5E0 2.33:1 Fail
Aa #6BA5E0 on #6D5A8C 2.32:1 Fail
Aa #5F6367 on #A19D94 2.24:1 Fail
Aa #A19D94 on #6D5A8C 2.22:1 Fail
Aa #F3F3EE on #1CB9B5 2.18:1 Fail
Aa #817F79 on #67CBC4 2.08:1 Fail
Aa #67CBC4 on #9A6DB6 2.08:1 Fail
Aa #A19D94 on #D7D6D1 1.86:1 Fail
Aa #4C8ED2 on #67CBC4 1.79:1 Fail
Aa #D7D6D1 on #6BA5E0 1.78:1 Fail
Aa #5F6367 on #4C8ED2 1.76:1 Fail
Aa #4C8ED2 on #6D5A8C 1.75:1 Fail
Aa #403F46 on #6D5A8C 1.73:1 Fail
Aa #F3F3EE on #67CBC4 1.73:1 Fail
Aa #403F46 on #5F6367 1.72:1 Fail
Aa #D7D6D1 on #1CB9B5 1.67:1 Fail
Aa #817F79 on #1CB9B5 1.65:1 Fail
Aa #1CB9B5 on #9A6DB6 1.65:1 Fail
Aa #817F79 on #6BA5E0 1.54:1 Fail
Aa #6BA5E0 on #9A6DB6 1.54:1 Fail
Aa #5F6367 on #817F79 1.51:1 Fail
Aa #5F6367 on #9A6DB6 1.51:1 Fail
Aa #817F79 on #6D5A8C 1.50:1 Fail
Aa #6D5A8C on #9A6DB6 1.50:1 Fail
Aa #817F79 on #A19D94 1.48:1 Fail
Aa #A19D94 on #9A6DB6 1.48:1 Fail
Aa #4C8ED2 on #1CB9B5 1.42:1 Fail
Aa #A19D94 on #67CBC4 1.41:1 Fail
Aa #6BA5E0 on #67CBC4 1.35:1 Fail
Aa #D7D6D1 on #67CBC4 1.32:1 Fail
Aa #4C8ED2 on #6BA5E0 1.32:1 Fail
Aa #D7D6D1 on #F3F3EE 1.31:1 Fail
Aa #A19D94 on #4C8ED2 1.27:1 Fail
Aa #1CB9B5 on #67CBC4 1.26:1 Fail
Aa #4C8ED2 on #9A6DB6 1.17:1 Fail
Aa #817F79 on #4C8ED2 1.16:1 Fail
Aa #A19D94 on #1CB9B5 1.11:1 Fail
Aa #6BA5E0 on #1CB9B5 1.07:1 Fail
Aa #A19D94 on #6BA5E0 1.04:1 Fail
Aa #5F6367 on #6D5A8C 1.01:1 Fail
Aa #817F79 on #9A6DB6 1.00: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