SEAFOAM8

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

Zurück zur Bibliothek

SEAFOAM8

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

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Monochrom blue 8color retro grey

Likes 18

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #C8C8C8;
  --c-muted-2: #A7A7A7;
  --c-muted-3: #787878;
  --c-muted-4: #383838;
  --c-muted-5: #BAC8C8;
  --c-muted-6: #98A7AF;
  --c-muted-7: #6D7883;
  --c-muted-8: #323F4D;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Brushed Metal (#C8C8C8) bis zum dunkelsten Ton Lacquered Liquorice (#383838). Sie vereint Brushed Metal, Moon Landing, Westchester Grey, Lacquered Liquorice, Oceanic Climate, Nor’wester, Lunar Shadow und Deepsea Core in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #C8C8C8 auf #383838 mit 7,01:1.

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

Farben im Detail

Brushed Metal #C8C8C8

RGB: rgb(200, 200, 200)
HSL: hsl(0, 0%, 78%)
Luminanz: 0,578

Moon Landing #A7A7A7

RGB: rgb(167, 167, 167)
HSL: hsl(0, 0%, 65%)
Luminanz: 0,386

Westchester Grey #787878

RGB: rgb(120, 120, 120)
HSL: hsl(0, 0%, 47%)
Luminanz: 0,188

Lacquered Liquorice #383838

RGB: rgb(56, 56, 56)
HSL: hsl(0, 0%, 22%)
Luminanz: 0,040

Oceanic Climate #BAC8C8

RGB: rgb(186, 200, 200)
HSL: hsl(180, 11%, 76%)
Luminanz: 0,559

Nor’wester #98A7AF

RGB: rgb(152, 167, 175)
HSL: hsl(201, 13%, 64%)
Luminanz: 0,374

Lunar Shadow #6D7883

RGB: rgb(109, 120, 131)
HSL: hsl(210, 9%, 47%)
Luminanz: 0,183

Deepsea Core #323F4D

RGB: rgb(50, 63, 77)
HSL: hsl(211, 21%, 25%)
Luminanz: 0,048

Kontrast & Barrierefreiheit

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

Aa #C8C8C8 auf #383838 7,01:1 AAA

Aa #383838 auf #BAC8C8 6,80:1 AA

Aa #C8C8C8 auf #323F4D 6,42:1 AA

Aa #BAC8C8 auf #323F4D 6,24:1 AA

Aa #A7A7A7 auf #383838 4,87:1 AA

Aa #383838 auf #98A7AF 4,74:1 AA

Aa #A7A7A7 auf #323F4D 4,47:1 AA (großer Text)

Aa #98A7AF auf #323F4D 4,34:1 AA (großer Text)

Aa #C8C8C8 auf #6D7883 2,69:1 Nicht bestanden

Aa #787878 auf #383838 2,66:1 Nicht bestanden

Aa #C8C8C8 auf #787878 2,64:1 Nicht bestanden

Aa #BAC8C8 auf #6D7883 2,61:1 Nicht bestanden

Aa #383838 auf #6D7883 2,60:1 Nicht bestanden

Aa #787878 auf #BAC8C8 2,56:1 Nicht bestanden

Aa #787878 auf #323F4D 2,43:1 Nicht bestanden

Aa #6D7883 auf #323F4D 2,39:1 Nicht bestanden

Aa #A7A7A7 auf #6D7883 1,87:1 Nicht bestanden

Aa #A7A7A7 auf #787878 1,84:1 Nicht bestanden

Aa #98A7AF auf #6D7883 1,82:1 Nicht bestanden

Aa #787878 auf #98A7AF 1,78:1 Nicht bestanden

Aa #C8C8C8 auf #98A7AF 1,48:1 Nicht bestanden

Aa #C8C8C8 auf #A7A7A7 1,44:1 Nicht bestanden

Aa #BAC8C8 auf #98A7AF 1,44:1 Nicht bestanden

Aa #A7A7A7 auf #BAC8C8 1,40:1 Nicht bestanden

Aa #383838 auf #323F4D 1,09:1 Nicht bestanden

Aa #C8C8C8 auf #BAC8C8 1,03:1 Nicht bestanden

Aa #A7A7A7 auf #98A7AF 1,03:1 Nicht bestanden

Aa #787878 auf #6D7883 1,02:1 Nicht bestanden

SEAFOAM8

SEAFOAM8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen