Colorum

Palette mit 12 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Colorum

Palette mit 12 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär colors rainbow fade

Likes 32

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #A95A61;
  --c-earthy-2: #CB8F68;
  --c-earthy-3: #DDB483;
  --c-earthy-4: #EFD187;
  --c-earthy-5: #ECDA9D;
  --c-earthy-6: #BCBC96;
  --c-earthy-7: #879C8B;
  --c-earthy-8: #5D8EA2;
  --c-earthy-9: #57697C;
  --c-earthy-10: #475264;
  --c-earthy-11: #635362;
  --c-earthy-12: #BB6650;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Demeter (#ECDA9D) bis zum dunkelsten Ton Tried & True Blue (#475264). Sie vereint Ruby Petals, Ferrous, Cellini Gold, Glistening, Demeter, Paspalum Grass, Birch Forest, Georgian Revival Blue, Fern Flower, Tried & True Blue, Purple Trinket und Autumn Ivy in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #ECDA9D auf #475264 mit 5,67:1.

Bodenständige, natürliche Töne – passend für nachhaltige und Bio-Marken, Cafés, Outdoor-Ausrüstung und warme redaktionelle Typografie.

Farben im Detail

Ruby Petals #A95A61

RGB: rgb(169, 90, 97)
HSL: hsl(355, 31%, 51%)
Luminanz: 0,166

Ferrous #CB8F68

RGB: rgb(203, 143, 104)
HSL: hsl(24, 49%, 60%)
Luminanz: 0,333

Cellini Gold #DDB483

RGB: rgb(221, 180, 131)
HSL: hsl(33, 57%, 69%)
Luminanz: 0,497

Glistening #EFD187

RGB: rgb(239, 209, 135)
HSL: hsl(43, 76%, 73%)
Luminanz: 0,657

Demeter #ECDA9D

RGB: rgb(236, 218, 157)
HSL: hsl(46, 68%, 77%)
Luminanz: 0,704

Paspalum Grass #BCBC96

RGB: rgb(188, 188, 150)
HSL: hsl(60, 22%, 66%)
Luminanz: 0,489

Birch Forest #879C8B

RGB: rgb(135, 156, 139)
HSL: hsl(131, 10%, 57%)
Luminanz: 0,308

Georgian Revival Blue #5D8EA2

RGB: rgb(93, 142, 162)
HSL: hsl(197, 27%, 50%)
Luminanz: 0,243

Fern Flower #57697C

RGB: rgb(87, 105, 124)
HSL: hsl(211, 18%, 41%)
Luminanz: 0,136

Tried & True Blue #475264

RGB: rgb(71, 82, 100)
HSL: hsl(217, 17%, 34%)
Luminanz: 0,083

Purple Trinket #635362

RGB: rgb(99, 83, 98)
HSL: hsl(304, 9%, 36%)
Luminanz: 0,097

Autumn Ivy #BB6650

RGB: rgb(187, 102, 80)
HSL: hsl(12, 44%, 52%)
Luminanz: 0,207

Kontrast & Barrierefreiheit

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

Aa #ECDA9D auf #475264 5,67:1 AA

Aa #EFD187 auf #475264 5,32:1 AA

Aa #ECDA9D auf #635362 5,12:1 AA

Aa #EFD187 auf #635362 4,80:1 AA

Aa #DDB483 auf #475264 4,11:1 AA (großer Text)

Aa #ECDA9D auf #57697C 4,06:1 AA (großer Text)

Aa #BCBC96 auf #475264 4,05:1 AA (großer Text)

Aa #EFD187 auf #57697C 3,80:1 AA (großer Text)

Aa #DDB483 auf #635362 3,71:1 AA (großer Text)

Aa #BCBC96 auf #635362 3,66:1 AA (großer Text)

Aa #A95A61 auf #ECDA9D 3,49:1 AA (großer Text)

Aa #A95A61 auf #EFD187 3,27:1 AA (großer Text)

Aa #DDB483 auf #57697C 2,94:1 Nicht bestanden

Aa #ECDA9D auf #BB6650 2,94:1 Nicht bestanden

Aa #BCBC96 auf #57697C 2,90:1 Nicht bestanden

Aa #CB8F68 auf #475264 2,88:1 Nicht bestanden

Aa #EFD187 auf #BB6650 2,76:1 Nicht bestanden

Aa #879C8B auf #475264 2,69:1 Nicht bestanden

Aa #CB8F68 auf #635362 2,60:1 Nicht bestanden

Aa #ECDA9D auf #5D8EA2 2,58:1 Nicht bestanden

Aa #A95A61 auf #DDB483 2,53:1 Nicht bestanden

Aa #A95A61 auf #BCBC96 2,49:1 Nicht bestanden

Aa #879C8B auf #635362 2,43:1 Nicht bestanden

Aa #EFD187 auf #5D8EA2 2,41:1 Nicht bestanden

Aa #5D8EA2 auf #475264 2,20:1 Nicht bestanden

Aa #DDB483 auf #BB6650 2,13:1 Nicht bestanden

Aa #ECDA9D auf #879C8B 2,11:1 Nicht bestanden

Aa #BCBC96 auf #BB6650 2,10:1 Nicht bestanden

Aa #CB8F68 auf #57697C 2,06:1 Nicht bestanden

Aa #5D8EA2 auf #635362 1,99:1 Nicht bestanden

Aa #EFD187 auf #879C8B 1,98:1 Nicht bestanden

Aa #CB8F68 auf #ECDA9D 1,97:1 Nicht bestanden

Aa #879C8B auf #57697C 1,93:1 Nicht bestanden

Aa #475264 auf #BB6650 1,93:1 Nicht bestanden

Aa #DDB483 auf #5D8EA2 1,87:1 Nicht bestanden

Aa #CB8F68 auf #EFD187 1,84:1 Nicht bestanden

Aa #BCBC96 auf #5D8EA2 1,84:1 Nicht bestanden

Aa #A95A61 auf #CB8F68 1,77:1 Nicht bestanden

Aa #635362 auf #BB6650 1,74:1 Nicht bestanden

Aa #A95A61 auf #879C8B 1,66:1 Nicht bestanden

Aa #A95A61 auf #475264 1,63:1 Nicht bestanden

Aa #5D8EA2 auf #57697C 1,58:1 Nicht bestanden

Aa #DDB483 auf #879C8B 1,53:1 Nicht bestanden

Aa #BCBC96 auf #879C8B 1,50:1 Nicht bestanden

Aa #CB8F68 auf #BB6650 1,49:1 Nicht bestanden

Aa #A95A61 auf #635362 1,47:1 Nicht bestanden

Aa #CB8F68 auf #DDB483 1,43:1 Nicht bestanden

Aa #CB8F68 auf #BCBC96 1,40:1 Nicht bestanden

Aa #ECDA9D auf #BCBC96 1,40:1 Nicht bestanden

Aa #879C8B auf #BB6650 1,40:1 Nicht bestanden

Aa #57697C auf #475264 1,40:1 Nicht bestanden

Aa #DDB483 auf #ECDA9D 1,38:1 Nicht bestanden

Aa #57697C auf #BB6650 1,38:1 Nicht bestanden

Aa #A95A61 auf #5D8EA2 1,35:1 Nicht bestanden

Aa #CB8F68 auf #5D8EA2 1,31:1 Nicht bestanden

Aa #EFD187 auf #BCBC96 1,31:1 Nicht bestanden

Aa #DDB483 auf #EFD187 1,29:1 Nicht bestanden

Aa #57697C auf #635362 1,26:1 Nicht bestanden

Aa #879C8B auf #5D8EA2 1,22:1 Nicht bestanden

Aa #A95A61 auf #BB6650 1,19:1 Nicht bestanden

Aa #A95A61 auf #57697C 1,16:1 Nicht bestanden

Aa #5D8EA2 auf #BB6650 1,14:1 Nicht bestanden

Aa #475264 auf #635362 1,11:1 Nicht bestanden

Aa #CB8F68 auf #879C8B 1,07:1 Nicht bestanden

Aa #EFD187 auf #ECDA9D 1,07:1 Nicht bestanden

Aa #DDB483 auf #BCBC96 1,01:1 Nicht bestanden

Colorum

Colorum

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen