Bobobo

Palette mit 7 Farben · Warm · Hell · Harmonie: Komplementär

Zurück zur Bibliothek

Bobobo

Palette mit 7 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Komplementär

Bearbeiten

Gedeckt 7 Farben Warm Hell Komplementär

Likes 14

Farben 7

CSS-Variablen

:root {
  --c-muted-1: #5B6B61;
  --c-muted-2: #96839E;
  --c-muted-3: #87BBC9;
  --c-muted-4: #E3AEBC;
  --c-muted-5: #A8DBC5;
  --c-muted-6: #E8E6DC;
  --c-muted-7: #F5F5F0;
}

Über diese Palette

Diese gedeckte Palette mit 7 Farben reicht vom hellsten Ton Classic Chalk (#F5F5F0) bis zum dunkelsten Ton Sage Shadow (#5B6B61). Sie vereint Sage Shadow, Hatoba Pigeon, Blue Bird Morning, Sekichiku Pink, Southern Belle, Narvik und Classic Chalk in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 2 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #5B6B61 auf #F5F5F0 mit 5,16:1.

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

Farben im Detail

Sage Shadow #5B6B61

RGB: rgb(91, 107, 97)
HSL: hsl(143, 8%, 39%)
Luminanz: 0,136

Hatoba Pigeon #96839E

RGB: rgb(150, 131, 158)
HSL: hsl(282, 12%, 57%)
Luminanz: 0,252

Blue Bird Morning #87BBC9

RGB: rgb(135, 187, 201)
HSL: hsl(193, 38%, 66%)
Luminanz: 0,449

Sekichiku Pink #E3AEBC

RGB: rgb(227, 174, 188)
HSL: hsl(344, 49%, 79%)
Luminanz: 0,502

Southern Belle #A8DBC5

RGB: rgb(168, 219, 197)
HSL: hsl(154, 41%, 76%)
Luminanz: 0,630

Narvik #E8E6DC

RGB: rgb(232, 230, 220)
HSL: hsl(50, 21%, 89%)
Luminanz: 0,789

Classic Chalk #F5F5F0

RGB: rgb(245, 245, 240)
HSL: hsl(60, 20%, 95%)
Luminanz: 0,910

Kontrast & Barrierefreiheit

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

Aa #5B6B61 auf #F5F5F0 5,16:1 AA

Aa #5B6B61 auf #E8E6DC 4,51:1 AA

Aa #5B6B61 auf #A8DBC5 3,66:1 AA (großer Text)

Aa #96839E auf #F5F5F0 3,18:1 AA (großer Text)

Aa #5B6B61 auf #E3AEBC 2,97:1 Nicht bestanden

Aa #96839E auf #E8E6DC 2,78:1 Nicht bestanden

Aa #5B6B61 auf #87BBC9 2,68:1 Nicht bestanden

Aa #96839E auf #A8DBC5 2,25:1 Nicht bestanden

Aa #87BBC9 auf #F5F5F0 1,92:1 Nicht bestanden

Aa #96839E auf #E3AEBC 1,83:1 Nicht bestanden

Aa #E3AEBC auf #F5F5F0 1,74:1 Nicht bestanden

Aa #87BBC9 auf #E8E6DC 1,68:1 Nicht bestanden

Aa #96839E auf #87BBC9 1,65:1 Nicht bestanden

Aa #5B6B61 auf #96839E 1,62:1 Nicht bestanden

Aa #E3AEBC auf #E8E6DC 1,52:1 Nicht bestanden

Aa #A8DBC5 auf #F5F5F0 1,41:1 Nicht bestanden

Aa #87BBC9 auf #A8DBC5 1,36:1 Nicht bestanden

Aa #E3AEBC auf #A8DBC5 1,23:1 Nicht bestanden

Aa #A8DBC5 auf #E8E6DC 1,23:1 Nicht bestanden

Aa #E8E6DC auf #F5F5F0 1,14:1 Nicht bestanden

Aa #87BBC9 auf #E3AEBC 1,11:1 Nicht bestanden

Bobobo

Bobobo

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen