Autom8ion

Palette mit 8 Farben · Neutral · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Autom8ion

Palette mit 8 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Gedeckt 8 Farben Neutral Gemischt Analog green simple metal grey

Likes 36

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #ABFF2D;
  --c-muted-2: #66D330;
  --c-muted-3: #40B640;
  --c-muted-4: #35835E;
  --c-muted-5: #F0F0F0;
  --c-muted-6: #999999;
  --c-muted-7: #747474;
  --c-muted-8: #303030;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Snowflake (#F0F0F0) bis zum dunkelsten Ton Off Black (#303030). Sie vereint Chestnut Shell, Download Progress, Matt Green, Chrysocolla Green, Snowflake, Million Grey, Bank Vault und Off Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F0F0F0 auf #303030 mit 11,58:1.

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

Farben im Detail

Chestnut Shell #ABFF2D

RGB: rgb(171, 255, 45)
HSL: hsl(84, 100%, 59%)
Luminanz: 0,804

Download Progress #66D330

RGB: rgb(102, 211, 48)
HSL: hsl(100, 65%, 51%)
Luminanz: 0,496

Matt Green #40B640

RGB: rgb(64, 182, 64)
HSL: hsl(120, 48%, 48%)
Luminanz: 0,349

Chrysocolla Green #35835E

RGB: rgb(53, 131, 94)
HSL: hsl(152, 42%, 36%)
Luminanz: 0,178

Snowflake #F0F0F0

RGB: rgb(240, 240, 240)
HSL: hsl(0, 0%, 94%)
Luminanz: 0,871

Million Grey #999999

RGB: rgb(153, 153, 153)
HSL: hsl(0, 0%, 60%)
Luminanz: 0,319

Bank Vault #747474

RGB: rgb(116, 116, 116)
HSL: hsl(0, 0%, 45%)
Luminanz: 0,175

Off Black #303030

RGB: rgb(48, 48, 48)
HSL: hsl(0, 0%, 19%)
Luminanz: 0,030

Kontrast & Barrierefreiheit

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

Aa #F0F0F0 auf #303030 11,58:1 AAA

Aa #ABFF2D auf #303030 10,73:1 AAA

Aa #66D330 auf #303030 6,87:1 AA

Aa #40B640 auf #303030 5,02:1 AA

Aa #999999 auf #303030 4,63:1 AA

Aa #F0F0F0 auf #747474 4,10:1 AA (großer Text)

Aa #35835E auf #F0F0F0 4,04:1 AA (großer Text)

Aa #ABFF2D auf #747474 3,80:1 AA (großer Text)

Aa #ABFF2D auf #35835E 3,74:1 AA (großer Text)

Aa #35835E auf #303030 2,87:1 Nicht bestanden

Aa #747474 auf #303030 2,82:1 Nicht bestanden

Aa #F0F0F0 auf #999999 2,50:1 Nicht bestanden

Aa #66D330 auf #747474 2,43:1 Nicht bestanden

Aa #66D330 auf #35835E 2,40:1 Nicht bestanden

Aa #ABFF2D auf #999999 2,32:1 Nicht bestanden

Aa #40B640 auf #F0F0F0 2,31:1 Nicht bestanden

Aa #ABFF2D auf #40B640 2,14:1 Nicht bestanden

Aa #40B640 auf #747474 1,78:1 Nicht bestanden

Aa #40B640 auf #35835E 1,75:1 Nicht bestanden

Aa #66D330 auf #F0F0F0 1,69:1 Nicht bestanden

Aa #999999 auf #747474 1,64:1 Nicht bestanden

Aa #35835E auf #999999 1,62:1 Nicht bestanden

Aa #ABFF2D auf #66D330 1,56:1 Nicht bestanden

Aa #66D330 auf #999999 1,48:1 Nicht bestanden

Aa #66D330 auf #40B640 1,37:1 Nicht bestanden

Aa #ABFF2D auf #F0F0F0 1,08:1 Nicht bestanden

Aa #40B640 auf #999999 1,08:1 Nicht bestanden

Aa #35835E auf #747474 1,01:1 Nicht bestanden

Autom8ion

Autom8ion

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen