Registrieren Registrieren
AG 500Redux

AG 500Redux

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

AG 500Redux

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten
Gedeckt 12 Farben Kühl Gemischt Komplementär oldschool crt retrotech
Likes 74
Farben 12

CSS-Variablen

: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;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Pearl White (#F3F3EE) bis zum dunkelsten Ton Bluish Black (#403F46). Sie vereint Bluish Black, Carriage Wheel, Concord, Fashion Grey, Fog Beacon, Pearl White, Blue Dart, Acapulco Dive, Swagger, Skylar, Emperor Jewel und Viola in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #403F46 auf #F3F3EE mit 9,35:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

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

Kontrast & Barrierefreiheit

5 von 66 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #403F46 auf #F3F3EE 9,35:1 AAA
Aa #403F46 auf #D7D6D1 7,15:1 AAA
Aa #5F6367 auf #F3F3EE 5,44:1 AA
Aa #403F46 auf #67CBC4 5,41:1 AA
Aa #F3F3EE auf #6D5A8C 5,40:1 AA
Aa #403F46 auf #1CB9B5 4,29:1 AA (großer Text)
Aa #5F6367 auf #D7D6D1 4,16:1 AA (großer Text)
Aa #D7D6D1 auf #6D5A8C 4,13:1 AA (großer Text)
Aa #403F46 auf #6BA5E0 4,01:1 AA (großer Text)
Aa #403F46 auf #A19D94 3,85:1 AA (großer Text)
Aa #817F79 auf #F3F3EE 3,60:1 AA (großer Text)
Aa #F3F3EE auf #9A6DB6 3,60:1 AA (großer Text)
Aa #5F6367 auf #67CBC4 3,15:1 AA (großer Text)
Aa #67CBC4 auf #6D5A8C 3,13:1 AA (großer Text)
Aa #F3F3EE auf #4C8ED2 3,09:1 AA (großer Text)
Aa #403F46 auf #4C8ED2 3,03:1 AA (großer Text)
Aa #D7D6D1 auf #9A6DB6 2,76:1 Nicht bestanden
Aa #817F79 auf #D7D6D1 2,75:1 Nicht bestanden
Aa #403F46 auf #817F79 2,60:1 Nicht bestanden
Aa #403F46 auf #9A6DB6 2,60:1 Nicht bestanden
Aa #5F6367 auf #1CB9B5 2,50:1 Nicht bestanden
Aa #1CB9B5 auf #6D5A8C 2,48:1 Nicht bestanden
Aa #A19D94 auf #F3F3EE 2,43:1 Nicht bestanden
Aa #D7D6D1 auf #4C8ED2 2,36:1 Nicht bestanden
Aa #5F6367 auf #6BA5E0 2,33:1 Nicht bestanden
Aa #F3F3EE auf #6BA5E0 2,33:1 Nicht bestanden
Aa #6BA5E0 auf #6D5A8C 2,32:1 Nicht bestanden
Aa #5F6367 auf #A19D94 2,24:1 Nicht bestanden
Aa #A19D94 auf #6D5A8C 2,22:1 Nicht bestanden
Aa #F3F3EE auf #1CB9B5 2,18:1 Nicht bestanden
Aa #817F79 auf #67CBC4 2,08:1 Nicht bestanden
Aa #67CBC4 auf #9A6DB6 2,08:1 Nicht bestanden
Aa #A19D94 auf #D7D6D1 1,86:1 Nicht bestanden
Aa #4C8ED2 auf #67CBC4 1,79:1 Nicht bestanden
Aa #D7D6D1 auf #6BA5E0 1,78:1 Nicht bestanden
Aa #5F6367 auf #4C8ED2 1,76:1 Nicht bestanden
Aa #4C8ED2 auf #6D5A8C 1,75:1 Nicht bestanden
Aa #403F46 auf #6D5A8C 1,73:1 Nicht bestanden
Aa #F3F3EE auf #67CBC4 1,73:1 Nicht bestanden
Aa #403F46 auf #5F6367 1,72:1 Nicht bestanden
Aa #D7D6D1 auf #1CB9B5 1,67:1 Nicht bestanden
Aa #817F79 auf #1CB9B5 1,65:1 Nicht bestanden
Aa #1CB9B5 auf #9A6DB6 1,65:1 Nicht bestanden
Aa #817F79 auf #6BA5E0 1,54:1 Nicht bestanden
Aa #6BA5E0 auf #9A6DB6 1,54:1 Nicht bestanden
Aa #5F6367 auf #817F79 1,51:1 Nicht bestanden
Aa #5F6367 auf #9A6DB6 1,51:1 Nicht bestanden
Aa #817F79 auf #6D5A8C 1,50:1 Nicht bestanden
Aa #6D5A8C auf #9A6DB6 1,50:1 Nicht bestanden
Aa #817F79 auf #A19D94 1,48:1 Nicht bestanden
Aa #A19D94 auf #9A6DB6 1,48:1 Nicht bestanden
Aa #4C8ED2 auf #1CB9B5 1,42:1 Nicht bestanden
Aa #A19D94 auf #67CBC4 1,41:1 Nicht bestanden
Aa #6BA5E0 auf #67CBC4 1,35:1 Nicht bestanden
Aa #D7D6D1 auf #67CBC4 1,32:1 Nicht bestanden
Aa #4C8ED2 auf #6BA5E0 1,32:1 Nicht bestanden
Aa #D7D6D1 auf #F3F3EE 1,31:1 Nicht bestanden
Aa #A19D94 auf #4C8ED2 1,27:1 Nicht bestanden
Aa #1CB9B5 auf #67CBC4 1,26:1 Nicht bestanden
Aa #4C8ED2 auf #9A6DB6 1,17:1 Nicht bestanden
Aa #817F79 auf #4C8ED2 1,16:1 Nicht bestanden
Aa #A19D94 auf #1CB9B5 1,11:1 Nicht bestanden
Aa #6BA5E0 auf #1CB9B5 1,07:1 Nicht bestanden
Aa #A19D94 auf #6BA5E0 1,04:1 Nicht bestanden
Aa #5F6367 auf #6D5A8C 1,01:1 Nicht bestanden
Aa #817F79 auf #9A6DB6 1,00:1 Nicht bestanden

Ähnliche Paletten

#222831 #393E46 #00ADB5 #EEEEEE
4 Farben
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 Farben
#1B262C #0F4C75 #3282B8 #BBE1FA
4 Farben
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 Farben
#27374D #526D82 #9DB2BF #DDE6ED
4 Farben
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 Farben
#E4F9F5 #30E3CA #11999E #40514E
4 Farben
#F0F5F9 #C9D6DF #52616B #1E2022
4 Farben