Avocado

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

Zurück zur Bibliothek

Avocado

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

Bearbeiten

Gedeckt 8 Farben Warm Gemischt Analog green avocado

Likes 24

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #181C17;
  --c-muted-2: #353E3A;
  --c-muted-3: #315D3F;
  --c-muted-4: #657649;
  --c-muted-5: #669457;
  --c-muted-6: #B2BD5B;
  --c-muted-7: #ECE287;
  --c-muted-8: #F2F9CE;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Carla (#F2F9CE) bis zum dunkelsten Ton Twilight Zone (#181C17). Sie vereint Twilight Zone, Old School, Verde Garrafa, Dill Pickle, Irish Charm, Middle Green Yellow, Gold Grillz und Carla in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 10 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #181C17 auf #F2F9CE mit 15,79:1.

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

Farben im Detail

Twilight Zone #181C17

RGB: rgb(24, 28, 23)
HSL: hsl(108, 10%, 10%)
Luminanz: 0,011

Old School #353E3A

RGB: rgb(53, 62, 58)
HSL: hsl(153, 8%, 23%)
Luminanz: 0,045

Verde Garrafa #315D3F

RGB: rgb(49, 93, 63)
HSL: hsl(139, 31%, 28%)
Luminanz: 0,088

Dill Pickle #657649

RGB: rgb(101, 118, 73)
HSL: hsl(83, 24%, 37%)
Luminanz: 0,162

Irish Charm #669457

RGB: rgb(102, 148, 87)
HSL: hsl(105, 26%, 46%)
Luminanz: 0,247

Middle Green Yellow #B2BD5B

RGB: rgb(178, 189, 91)
HSL: hsl(67, 43%, 55%)
Luminanz: 0,466

Gold Grillz #ECE287

RGB: rgb(236, 226, 135)
HSL: hsl(54, 73%, 73%)
Luminanz: 0,740

Carla #F2F9CE

RGB: rgb(242, 249, 206)
HSL: hsl(70, 78%, 89%)
Luminanz: 0,911

Kontrast & Barrierefreiheit

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

Aa #181C17 auf #F2F9CE 15,79:1 AAA

Aa #181C17 auf #ECE287 12,98:1 AAA

Aa #353E3A auf #F2F9CE 10,11:1 AAA

Aa #181C17 auf #B2BD5B 8,48:1 AAA

Aa #353E3A auf #ECE287 8,31:1 AAA

Aa #315D3F auf #F2F9CE 6,94:1 AA

Aa #315D3F auf #ECE287 5,71:1 AA

Aa #353E3A auf #B2BD5B 5,43:1 AA

Aa #181C17 auf #669457 4,88:1 AA

Aa #657649 auf #F2F9CE 4,53:1 AA

Aa #315D3F auf #B2BD5B 3,73:1 AA (großer Text)

Aa #657649 auf #ECE287 3,72:1 AA (großer Text)

Aa #181C17 auf #657649 3,48:1 AA (großer Text)

Aa #669457 auf #F2F9CE 3,24:1 AA (großer Text)

Aa #353E3A auf #669457 3,12:1 AA (großer Text)

Aa #669457 auf #ECE287 2,66:1 Nicht bestanden

Aa #657649 auf #B2BD5B 2,43:1 Nicht bestanden

Aa #181C17 auf #315D3F 2,27:1 Nicht bestanden

Aa #353E3A auf #657649 2,23:1 Nicht bestanden

Aa #315D3F auf #669457 2,15:1 Nicht bestanden

Aa #B2BD5B auf #F2F9CE 1,86:1 Nicht bestanden

Aa #669457 auf #B2BD5B 1,74:1 Nicht bestanden

Aa #181C17 auf #353E3A 1,56:1 Nicht bestanden

Aa #315D3F auf #657649 1,53:1 Nicht bestanden

Aa #B2BD5B auf #ECE287 1,53:1 Nicht bestanden

Aa #353E3A auf #315D3F 1,46:1 Nicht bestanden

Aa #657649 auf #669457 1,40:1 Nicht bestanden

Aa #ECE287 auf #F2F9CE 1,22:1 Nicht bestanden

Avocado

Avocado

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen