Echo8

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Echo8

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Triadisch green night blue 8colors

Likes 26

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #002429;
  --c-muted-2: #0C335A;
  --c-muted-3: #20506A;
  --c-muted-4: #5A8994;
  --c-muted-5: #ACD2BD;
  --c-muted-6: #B8E4C0;
  --c-muted-7: #D7EED2;
  --c-muted-8: #EEFFED;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Snow White (#EEFFED) bis zum dunkelsten Ton Teal Spill (#002429). Sie vereint Teal Spill, Ambassador Blue, Seafarer, Dusty Turquoise, Misty Jade, Lattice Work, Blue Romance und Snow White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #002429 auf #EEFFED mit 15,7:1.

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

Farben im Detail

Teal Spill #002429

RGB: rgb(0, 36, 41)
HSL: hsl(187, 100%, 8%)
Luminanz: 0,014

Ambassador Blue #0C335A

RGB: rgb(12, 51, 90)
HSL: hsl(210, 76%, 20%)
Luminanz: 0,032

Seafarer #20506A

RGB: rgb(32, 80, 106)
HSL: hsl(201, 54%, 27%)
Luminanz: 0,071

Dusty Turquoise #5A8994

RGB: rgb(90, 137, 148)
HSL: hsl(191, 24%, 47%)
Luminanz: 0,222

Misty Jade #ACD2BD

RGB: rgb(172, 210, 189)
HSL: hsl(147, 30%, 75%)
Luminanz: 0,585

Lattice Work #B8E4C0

RGB: rgb(184, 228, 192)
HSL: hsl(131, 45%, 81%)
Luminanz: 0,695

Blue Romance #D7EED2

RGB: rgb(215, 238, 210)
HSL: hsl(109, 45%, 88%)
Luminanz: 0,803

Snow White #EEFFED

RGB: rgb(238, 255, 237)
HSL: hsl(117, 100%, 96%)
Luminanz: 0,958

Kontrast & Barrierefreiheit

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

Aa #002429 auf #EEFFED 15,70:1 AAA

Aa #002429 auf #D7EED2 13,27:1 AAA

Aa #0C335A auf #EEFFED 12,32:1 AAA

Aa #002429 auf #B8E4C0 11,60:1 AAA

Aa #0C335A auf #D7EED2 10,42:1 AAA

Aa #002429 auf #ACD2BD 9,89:1 AAA

Aa #0C335A auf #B8E4C0 9,10:1 AAA

Aa #20506A auf #EEFFED 8,34:1 AAA

Aa #0C335A auf #ACD2BD 7,76:1 AAA

Aa #20506A auf #D7EED2 7,05:1 AAA

Aa #20506A auf #B8E4C0 6,16:1 AA

Aa #20506A auf #ACD2BD 5,26:1 AA

Aa #002429 auf #5A8994 4,24:1 AA (großer Text)

Aa #5A8994 auf #EEFFED 3,71:1 AA (großer Text)

Aa #0C335A auf #5A8994 3,32:1 AA (großer Text)

Aa #5A8994 auf #D7EED2 3,13:1 AA (großer Text)

Aa #5A8994 auf #B8E4C0 2,74:1 Nicht bestanden

Aa #5A8994 auf #ACD2BD 2,34:1 Nicht bestanden

Aa #20506A auf #5A8994 2,25:1 Nicht bestanden

Aa #002429 auf #20506A 1,88:1 Nicht bestanden

Aa #ACD2BD auf #EEFFED 1,59:1 Nicht bestanden

Aa #0C335A auf #20506A 1,48:1 Nicht bestanden

Aa #B8E4C0 auf #EEFFED 1,35:1 Nicht bestanden

Aa #ACD2BD auf #D7EED2 1,34:1 Nicht bestanden

Aa #002429 auf #0C335A 1,27:1 Nicht bestanden

Aa #D7EED2 auf #EEFFED 1,18:1 Nicht bestanden

Aa #ACD2BD auf #B8E4C0 1,17:1 Nicht bestanden

Aa #B8E4C0 auf #D7EED2 1,14:1 Nicht bestanden

Echo8

Echo8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen