Fantshat8

Palette mit 8 Farben · Kühl · Dunkel · Harmonie: Komplementär

Zurück zur Bibliothek

Fantshat8

Palette mit 8 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Komplementär

Bearbeiten

Gedeckt 8 Farben Kühl Dunkel Komplementär green black blue 8colors

Likes 58

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #91F2DF;
  --c-muted-2: #4CBDD9;
  --c-muted-3: #53708C;
  --c-muted-4: #5B662C;
  --c-muted-5: #2E5342;
  --c-muted-6: #253140;
  --c-muted-7: #13243D;
  --c-muted-8: #1B1721;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Turquoise Pearl (#91F2DF) bis zum dunkelsten Ton Violet Void (#1B1721). Sie vereint Turquoise Pearl, Bachelor Button, Porch Song, Deathworld Forest, Highland Green, Blue-Black, Cool Balaclavas Are Forever und Violet Void in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #91F2DF auf #1B1721 mit 13,41:1.

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

Farben im Detail

Turquoise Pearl #91F2DF

RGB: rgb(145, 242, 223)
HSL: hsl(168, 79%, 76%)
Luminanz: 0,749

Bachelor Button #4CBDD9

RGB: rgb(76, 189, 217)
HSL: hsl(192, 65%, 57%)
Luminanz: 0,429

Porch Song #53708C

RGB: rgb(83, 112, 140)
HSL: hsl(209, 26%, 44%)
Luminanz: 0,153

Deathworld Forest #5B662C

RGB: rgb(91, 102, 44)
HSL: hsl(71, 40%, 29%)
Luminanz: 0,119

Highland Green #2E5342

RGB: rgb(46, 83, 66)
HSL: hsl(152, 29%, 25%)
Luminanz: 0,072

Blue-Black #253140

RGB: rgb(37, 49, 64)
HSL: hsl(213, 27%, 20%)
Luminanz: 0,030

Cool Balaclavas Are Forever #13243D

RGB: rgb(19, 36, 61)
HSL: hsl(216, 53%, 16%)
Luminanz: 0,017

Violet Void #1B1721

RGB: rgb(27, 23, 33)
HSL: hsl(264, 18%, 11%)
Luminanz: 0,010

Kontrast & Barrierefreiheit

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

Aa #91F2DF auf #1B1721 13,41:1 AAA

Aa #91F2DF auf #13243D 11,85:1 AAA

Aa #91F2DF auf #253140 10,03:1 AAA

Aa #4CBDD9 auf #1B1721 8,05:1 AAA

Aa #4CBDD9 auf #13243D 7,12:1 AAA

Aa #91F2DF auf #2E5342 6,57:1 AA

Aa #4CBDD9 auf #253140 6,02:1 AA

Aa #91F2DF auf #5B662C 4,72:1 AA

Aa #4CBDD9 auf #2E5342 3,94:1 AA (großer Text)

Aa #91F2DF auf #53708C 3,93:1 AA (großer Text)

Aa #53708C auf #1B1721 3,41:1 AA (großer Text)

Aa #53708C auf #13243D 3,02:1 AA (großer Text)

Aa #4CBDD9 auf #5B662C 2,84:1 Nicht bestanden

Aa #5B662C auf #1B1721 2,84:1 Nicht bestanden

Aa #53708C auf #253140 2,55:1 Nicht bestanden

Aa #5B662C auf #13243D 2,51:1 Nicht bestanden

Aa #4CBDD9 auf #53708C 2,36:1 Nicht bestanden

Aa #5B662C auf #253140 2,12:1 Nicht bestanden

Aa #2E5342 auf #1B1721 2,04:1 Nicht bestanden

Aa #2E5342 auf #13243D 1,81:1 Nicht bestanden

Aa #91F2DF auf #4CBDD9 1,67:1 Nicht bestanden

Aa #53708C auf #2E5342 1,67:1 Nicht bestanden

Aa #2E5342 auf #253140 1,53:1 Nicht bestanden

Aa #5B662C auf #2E5342 1,39:1 Nicht bestanden

Aa #253140 auf #1B1721 1,34:1 Nicht bestanden

Aa #53708C auf #5B662C 1,20:1 Nicht bestanden

Aa #253140 auf #13243D 1,18:1 Nicht bestanden

Aa #13243D auf #1B1721 1,13:1 Nicht bestanden

Fantshat8

Fantshat8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen