Nature 10

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

Zurück zur Bibliothek

Nature 10

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

Bearbeiten

Gedeckt 10 Farben Warm Gemischt Analog lowsaturation 10colors

Likes 40

Farben 10

CSS-Variablen

:root {
  --c-muted-1: #BBC8C8;
  --c-muted-2: #CCD9D8;
  --c-muted-3: #715148;
  --c-muted-4: #85685C;
  --c-muted-5: #514E39;
  --c-muted-6: #948E69;
  --c-muted-7: #B7B399;
  --c-muted-8: #95AC71;
  --c-muted-9: #C88E55;
  --c-muted-10: #EBE6BE;
}

Über diese Palette

Diese gedeckte Palette mit 10 Farben reicht vom hellsten Ton Arctic Daisy (#EBE6BE) bis zum dunkelsten Ton Panda (#514E39). Sie vereint Oceanic Climate, Raffia Light Grey, Buffalo Herd, Quartersawn Oak, Panda, Extra Mile, Bonsai Pot, Geranium Leaf, Slightly Golden und Arctic Daisy in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 45. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #514E39 auf #EBE6BE mit 6,64:1.

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

Farben im Detail

Oceanic Climate #BBC8C8

RGB: rgb(187, 200, 200)
HSL: hsl(180, 11%, 76%)
Luminanz: 0,560

Raffia Light Grey #CCD9D8

RGB: rgb(204, 217, 216)
HSL: hsl(175, 15%, 83%)
Luminanz: 0,674

Buffalo Herd #715148

RGB: rgb(113, 81, 72)
HSL: hsl(13, 22%, 36%)
Luminanz: 0,099

Quartersawn Oak #85685C

RGB: rgb(133, 104, 92)
HSL: hsl(18, 18%, 44%)
Luminanz: 0,157

Panda #514E39

RGB: rgb(81, 78, 57)
HSL: hsl(53, 17%, 27%)
Luminanz: 0,075

Extra Mile #948E69

RGB: rgb(148, 142, 105)
HSL: hsl(52, 17%, 50%)
Luminanz: 0,267

Bonsai Pot #B7B399

RGB: rgb(183, 179, 153)
HSL: hsl(52, 17%, 66%)
Luminanz: 0,446

Geranium Leaf #95AC71

RGB: rgb(149, 172, 113)
HSL: hsl(83, 26%, 56%)
Luminanz: 0,371

Slightly Golden #C88E55

RGB: rgb(200, 142, 85)
HSL: hsl(30, 51%, 56%)
Luminanz: 0,323

Arctic Daisy #EBE6BE

RGB: rgb(235, 230, 190)
HSL: hsl(53, 53%, 83%)
Luminanz: 0,780

Kontrast & Barrierefreiheit

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

Aa #514E39 auf #EBE6BE 6,64:1 AA

Aa #CCD9D8 auf #514E39 5,80:1 AA

Aa #715148 auf #EBE6BE 5,58:1 AA

Aa #BBC8C8 auf #514E39 4,89:1 AA

Aa #CCD9D8 auf #715148 4,87:1 AA

Aa #BBC8C8 auf #715148 4,11:1 AA (großer Text)

Aa #85685C auf #EBE6BE 4,02:1 AA (großer Text)

Aa #514E39 auf #B7B399 3,97:1 AA (großer Text)

Aa #CCD9D8 auf #85685C 3,51:1 AA (großer Text)

Aa #514E39 auf #95AC71 3,37:1 AA (großer Text)

Aa #715148 auf #B7B399 3,34:1 AA (großer Text)

Aa #514E39 auf #C88E55 2,98:1 Nicht bestanden

Aa #BBC8C8 auf #85685C 2,95:1 Nicht bestanden

Aa #715148 auf #95AC71 2,83:1 Nicht bestanden

Aa #948E69 auf #EBE6BE 2,62:1 Nicht bestanden

Aa #514E39 auf #948E69 2,53:1 Nicht bestanden

Aa #715148 auf #C88E55 2,51:1 Nicht bestanden

Aa #85685C auf #B7B399 2,40:1 Nicht bestanden

Aa #CCD9D8 auf #948E69 2,29:1 Nicht bestanden

Aa #C88E55 auf #EBE6BE 2,23:1 Nicht bestanden

Aa #715148 auf #948E69 2,13:1 Nicht bestanden

Aa #85685C auf #95AC71 2,04:1 Nicht bestanden

Aa #95AC71 auf #EBE6BE 1,97:1 Nicht bestanden

Aa #CCD9D8 auf #C88E55 1,94:1 Nicht bestanden

Aa #BBC8C8 auf #948E69 1,93:1 Nicht bestanden

Aa #85685C auf #C88E55 1,80:1 Nicht bestanden

Aa #CCD9D8 auf #95AC71 1,72:1 Nicht bestanden

Aa #B7B399 auf #EBE6BE 1,67:1 Nicht bestanden

Aa #85685C auf #514E39 1,65:1 Nicht bestanden

Aa #BBC8C8 auf #C88E55 1,64:1 Nicht bestanden

Aa #948E69 auf #B7B399 1,57:1 Nicht bestanden

Aa #85685C auf #948E69 1,53:1 Nicht bestanden

Aa #CCD9D8 auf #B7B399 1,46:1 Nicht bestanden

Aa #BBC8C8 auf #95AC71 1,45:1 Nicht bestanden

Aa #715148 auf #85685C 1,39:1 Nicht bestanden

Aa #BBC8C8 auf #EBE6BE 1,36:1 Nicht bestanden

Aa #948E69 auf #95AC71 1,33:1 Nicht bestanden

Aa #B7B399 auf #C88E55 1,33:1 Nicht bestanden

Aa #BBC8C8 auf #B7B399 1,23:1 Nicht bestanden

Aa #BBC8C8 auf #CCD9D8 1,19:1 Nicht bestanden

Aa #715148 auf #514E39 1,19:1 Nicht bestanden

Aa #948E69 auf #C88E55 1,18:1 Nicht bestanden

Aa #B7B399 auf #95AC71 1,18:1 Nicht bestanden

Aa #CCD9D8 auf #EBE6BE 1,15:1 Nicht bestanden

Aa #95AC71 auf #C88E55 1,13:1 Nicht bestanden

Nature 10

Nature 10

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen