Burton's Own

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

Zurück zur Bibliothek

Burton's Own

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär gray septemberstudypalettecontest qirlfriend

Likes 64

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #0C0711;
  --c-earthy-2: #E5DFF0;
  --c-earthy-3: #7A675A;
  --c-earthy-4: #AB988F;
  --c-earthy-5: #645D77;
  --c-earthy-6: #928FB6;
  --c-earthy-7: #9E5E58;
  --c-earthy-8: #B0B263;
  --c-earthy-9: #4F658F;
  --c-earthy-10: #80A392;
  --c-earthy-11: #423058;
  --c-earthy-12: #6D3E5A;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Lingering Lilac (#E5DFF0) bis zum dunkelsten Ton Narwhal Grey (#0C0711). Sie vereint Narwhal Grey, Lingering Lilac, Braid, Putty Pearl, Purple Passage, Purple Amethyst, Rhode Island Red, Green Me, Dutch Blue, Bristol Green, Naggaroth Night und Royal Lines in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 10 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0C0711 auf #E5DFF0 mit 15,32: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

Narwhal Grey #0C0711

RGB: rgb(12, 7, 17)
HSL: hsl(270, 42%, 5%)
Luminanz: 0,003

Lingering Lilac #E5DFF0

RGB: rgb(229, 223, 240)
HSL: hsl(261, 36%, 91%)
Luminanz: 0,757

Braid #7A675A

RGB: rgb(122, 103, 90)
HSL: hsl(24, 15%, 42%)
Luminanz: 0,146

Putty Pearl #AB988F

RGB: rgb(171, 152, 143)
HSL: hsl(19, 14%, 62%)
Luminanz: 0,331

Purple Passage #645D77

RGB: rgb(100, 93, 119)
HSL: hsl(256, 12%, 42%)
Luminanz: 0,119

Purple Amethyst #928FB6

RGB: rgb(146, 143, 182)
HSL: hsl(245, 21%, 64%)
Luminanz: 0,291

Rhode Island Red #9E5E58

RGB: rgb(158, 94, 88)
HSL: hsl(5, 28%, 48%)
Luminanz: 0,160

Green Me #B0B263

RGB: rgb(176, 178, 99)
HSL: hsl(62, 34%, 54%)
Luminanz: 0,420

Dutch Blue #4F658F

RGB: rgb(79, 101, 143)
HSL: hsl(219, 29%, 44%)
Luminanz: 0,130

Bristol Green #80A392

RGB: rgb(128, 163, 146)
HSL: hsl(151, 16%, 57%)
Luminanz: 0,329

Naggaroth Night #423058

RGB: rgb(66, 48, 88)
HSL: hsl(267, 29%, 27%)
Luminanz: 0,040

Royal Lines #6D3E5A

RGB: rgb(109, 62, 90)
HSL: hsl(324, 27%, 34%)
Luminanz: 0,074

Kontrast & Barrierefreiheit

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

Aa #0C0711 auf #E5DFF0 15,32:1 AAA

Aa #E5DFF0 auf #423058 8,99:1 AAA

Aa #0C0711 auf #B0B263 8,91:1 AAA

Aa #0C0711 auf #AB988F 7,23:1 AAA

Aa #0C0711 auf #80A392 7,18:1 AAA

Aa #E5DFF0 auf #6D3E5A 6,49:1 AA

Aa #0C0711 auf #928FB6 6,48:1 AA

Aa #B0B263 auf #423058 5,23:1 AA

Aa #E5DFF0 auf #645D77 4,79:1 AA

Aa #E5DFF0 auf #4F658F 4,50:1 AA

Aa #AB988F auf #423058 4,24:1 AA (großer Text)

Aa #80A392 auf #423058 4,22:1 AA (großer Text)

Aa #E5DFF0 auf #7A675A 4,12:1 AA (großer Text)

Aa #0C0711 auf #9E5E58 3,98:1 AA (großer Text)

Aa #E5DFF0 auf #9E5E58 3,85:1 AA (großer Text)

Aa #928FB6 auf #423058 3,80:1 AA (großer Text)

Aa #B0B263 auf #6D3E5A 3,78:1 AA (großer Text)

Aa #0C0711 auf #7A675A 3,71:1 AA (großer Text)

Aa #0C0711 auf #4F658F 3,41:1 AA (großer Text)

Aa #0C0711 auf #645D77 3,20:1 AA (großer Text)

Aa #AB988F auf #6D3E5A 3,06:1 AA (großer Text)

Aa #80A392 auf #6D3E5A 3,04:1 AA (großer Text)

Aa #645D77 auf #B0B263 2,78:1 Nicht bestanden

Aa #928FB6 auf #6D3E5A 2,75:1 Nicht bestanden

Aa #B0B263 auf #4F658F 2,62:1 Nicht bestanden

Aa #7A675A auf #B0B263 2,40:1 Nicht bestanden

Aa #0C0711 auf #6D3E5A 2,36:1 Nicht bestanden

Aa #E5DFF0 auf #928FB6 2,36:1 Nicht bestanden

Aa #9E5E58 auf #423058 2,34:1 Nicht bestanden

Aa #AB988F auf #645D77 2,26:1 Nicht bestanden

Aa #645D77 auf #80A392 2,24:1 Nicht bestanden

Aa #9E5E58 auf #B0B263 2,24:1 Nicht bestanden

Aa #7A675A auf #423058 2,18:1 Nicht bestanden

Aa #E5DFF0 auf #80A392 2,13:1 Nicht bestanden

Aa #E5DFF0 auf #AB988F 2,12:1 Nicht bestanden

Aa #AB988F auf #4F658F 2,12:1 Nicht bestanden

Aa #4F658F auf #80A392 2,11:1 Nicht bestanden

Aa #645D77 auf #928FB6 2,02:1 Nicht bestanden

Aa #4F658F auf #423058 2,00:1 Nicht bestanden

Aa #7A675A auf #AB988F 1,95:1 Nicht bestanden

Aa #7A675A auf #80A392 1,93:1 Nicht bestanden

Aa #928FB6 auf #4F658F 1,90:1 Nicht bestanden

Aa #645D77 auf #423058 1,88:1 Nicht bestanden

Aa #AB988F auf #9E5E58 1,82:1 Nicht bestanden

Aa #9E5E58 auf #80A392 1,80:1 Nicht bestanden

Aa #7A675A auf #928FB6 1,74:1 Nicht bestanden

Aa #E5DFF0 auf #B0B263 1,72:1 Nicht bestanden

Aa #0C0711 auf #423058 1,70:1 Nicht bestanden

Aa #9E5E58 auf #6D3E5A 1,69:1 Nicht bestanden

Aa #928FB6 auf #9E5E58 1,63:1 Nicht bestanden

Aa #7A675A auf #6D3E5A 1,57:1 Nicht bestanden

Aa #4F658F auf #6D3E5A 1,44:1 Nicht bestanden

Aa #423058 auf #6D3E5A 1,39:1 Nicht bestanden

Aa #928FB6 auf #B0B263 1,38:1 Nicht bestanden

Aa #645D77 auf #6D3E5A 1,36:1 Nicht bestanden

Aa #645D77 auf #9E5E58 1,24:1 Nicht bestanden

Aa #B0B263 auf #80A392 1,24:1 Nicht bestanden

Aa #AB988F auf #B0B263 1,23:1 Nicht bestanden

Aa #9E5E58 auf #4F658F 1,17:1 Nicht bestanden

Aa #7A675A auf #645D77 1,16:1 Nicht bestanden

Aa #AB988F auf #928FB6 1,12:1 Nicht bestanden

Aa #928FB6 auf #80A392 1,11:1 Nicht bestanden

Aa #7A675A auf #4F658F 1,09:1 Nicht bestanden

Aa #7A675A auf #9E5E58 1,07:1 Nicht bestanden

Aa #645D77 auf #4F658F 1,06:1 Nicht bestanden

Aa #AB988F auf #80A392 1,01:1 Nicht bestanden

Burton's Own

Burton's Own

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen