BYTE 12

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

Zurück zur Bibliothek

BYTE 12

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär fun games byte twelve

Likes 12

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #992323;
  --c-earthy-2: #BEB225;
  --c-earthy-3: #3561AF;
  --c-earthy-4: #94BB4F;
  --c-earthy-5: #7E529A;
  --c-earthy-6: #DD997F;
  --c-earthy-7: #E05E95;
  --c-earthy-8: #636363;
  --c-earthy-9: #D1D1D1;
  --c-earthy-10: #202020;
  --c-earthy-11: #5B41C5;
  --c-earthy-12: #161B82;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Blowing Smoke (#D1D1D1) bis zum dunkelsten Ton Lead (#202020). Sie vereint Manchester Nights, Sharp Lime, Adventure of the Seas, Early Spring, Royal Lilac, Light Terracotta, Carmine Rose, Digital, Blowing Smoke, Lead, Dragonlord Purple und Galactic Cruise in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #D1D1D1 auf #202020 mit 10,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

Manchester Nights #992323

RGB: rgb(153, 35, 35)
HSL: hsl(0, 63%, 37%)
Luminanz: 0,081

Sharp Lime #BEB225

RGB: rgb(190, 178, 37)
HSL: hsl(55, 67%, 45%)
Luminanz: 0,429

Adventure of the Seas #3561AF

RGB: rgb(53, 97, 175)
HSL: hsl(218, 54%, 45%)
Luminanz: 0,124

Early Spring #94BB4F

RGB: rgb(148, 187, 79)
HSL: hsl(82, 44%, 52%)
Luminanz: 0,424

Royal Lilac #7E529A

RGB: rgb(126, 82, 154)
HSL: hsl(277, 31%, 46%)
Luminanz: 0,128

Light Terracotta #DD997F

RGB: rgb(221, 153, 127)
HSL: hsl(17, 58%, 68%)
Luminanz: 0,397

Carmine Rose #E05E95

RGB: rgb(224, 94, 149)
HSL: hsl(335, 68%, 62%)
Luminanz: 0,260

Digital #636363

RGB: rgb(99, 99, 99)
HSL: hsl(0, 0%, 39%)
Luminanz: 0,125

Blowing Smoke #D1D1D1

RGB: rgb(209, 209, 209)
HSL: hsl(0, 0%, 82%)
Luminanz: 0,638

Lead #202020

RGB: rgb(32, 32, 32)
HSL: hsl(0, 0%, 13%)
Luminanz: 0,014

Dragonlord Purple #5B41C5

RGB: rgb(91, 65, 197)
HSL: hsl(252, 53%, 51%)
Luminanz: 0,100

Galactic Cruise #161B82

RGB: rgb(22, 27, 130)
HSL: hsl(237, 71%, 30%)
Luminanz: 0,026

Kontrast & Barrierefreiheit

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

Aa #D1D1D1 auf #202020 10,67:1 AAA

Aa #D1D1D1 auf #161B82 9,09:1 AAA

Aa #BEB225 auf #202020 7,44:1 AAA

Aa #94BB4F auf #202020 7,36:1 AAA

Aa #DD997F auf #202020 6,93:1 AA

Aa #BEB225 auf #161B82 6,33:1 AA

Aa #94BB4F auf #161B82 6,26:1 AA

Aa #DD997F auf #161B82 5,91:1 AA

Aa #992323 auf #D1D1D1 5,25:1 AA

Aa #E05E95 auf #202020 4,81:1 AA

Aa #D1D1D1 auf #5B41C5 4,57:1 AA

Aa #E05E95 auf #161B82 4,10:1 AA (großer Text)

Aa #3561AF auf #D1D1D1 3,95:1 AA (großer Text)

Aa #636363 auf #D1D1D1 3,93:1 AA (großer Text)

Aa #7E529A auf #D1D1D1 3,86:1 AA (großer Text)

Aa #992323 auf #BEB225 3,66:1 AA (großer Text)

Aa #992323 auf #94BB4F 3,62:1 AA (großer Text)

Aa #992323 auf #DD997F 3,41:1 AA (großer Text)

Aa #BEB225 auf #5B41C5 3,19:1 AA (großer Text)

Aa #94BB4F auf #5B41C5 3,15:1 AA (großer Text)

Aa #DD997F auf #5B41C5 2,97:1 Nicht bestanden

Aa #7E529A auf #202020 2,76:1 Nicht bestanden

Aa #BEB225 auf #3561AF 2,75:1 Nicht bestanden

Aa #BEB225 auf #636363 2,74:1 Nicht bestanden

Aa #3561AF auf #94BB4F 2,72:1 Nicht bestanden

Aa #94BB4F auf #636363 2,71:1 Nicht bestanden

Aa #636363 auf #202020 2,71:1 Nicht bestanden

Aa #3561AF auf #202020 2,70:1 Nicht bestanden

Aa #BEB225 auf #7E529A 2,69:1 Nicht bestanden

Aa #94BB4F auf #7E529A 2,66:1 Nicht bestanden

Aa #3561AF auf #DD997F 2,57:1 Nicht bestanden

Aa #DD997F auf #636363 2,56:1 Nicht bestanden

Aa #7E529A auf #DD997F 2,51:1 Nicht bestanden

Aa #992323 auf #E05E95 2,37:1 Nicht bestanden

Aa #7E529A auf #161B82 2,35:1 Nicht bestanden

Aa #202020 auf #5B41C5 2,33:1 Nicht bestanden

Aa #636363 auf #161B82 2,31:1 Nicht bestanden

Aa #3561AF auf #161B82 2,30:1 Nicht bestanden

Aa #E05E95 auf #D1D1D1 2,22:1 Nicht bestanden

Aa #E05E95 auf #5B41C5 2,06:1 Nicht bestanden

Aa #992323 auf #202020 2,03:1 Nicht bestanden

Aa #5B41C5 auf #161B82 1,99:1 Nicht bestanden

Aa #3561AF auf #E05E95 1,78:1 Nicht bestanden

Aa #E05E95 auf #636363 1,78:1 Nicht bestanden

Aa #7E529A auf #E05E95 1,74:1 Nicht bestanden

Aa #992323 auf #161B82 1,73:1 Nicht bestanden

Aa #BEB225 auf #E05E95 1,54:1 Nicht bestanden

Aa #DD997F auf #D1D1D1 1,54:1 Nicht bestanden

Aa #94BB4F auf #E05E95 1,53:1 Nicht bestanden

Aa #94BB4F auf #D1D1D1 1,45:1 Nicht bestanden

Aa #DD997F auf #E05E95 1,44:1 Nicht bestanden

Aa #BEB225 auf #D1D1D1 1,43:1 Nicht bestanden

Aa #992323 auf #7E529A 1,36:1 Nicht bestanden

Aa #992323 auf #3561AF 1,33:1 Nicht bestanden

Aa #992323 auf #636363 1,33:1 Nicht bestanden

Aa #7E529A auf #5B41C5 1,18:1 Nicht bestanden

Aa #202020 auf #161B82 1,17:1 Nicht bestanden

Aa #3561AF auf #5B41C5 1,16:1 Nicht bestanden

Aa #636363 auf #5B41C5 1,16:1 Nicht bestanden

Aa #992323 auf #5B41C5 1,15:1 Nicht bestanden

Aa #BEB225 auf #DD997F 1,07:1 Nicht bestanden

Aa #94BB4F auf #DD997F 1,06:1 Nicht bestanden

Aa #3561AF auf #7E529A 1,02:1 Nicht bestanden

Aa #7E529A auf #636363 1,02:1 Nicht bestanden

Aa #BEB225 auf #94BB4F 1,01:1 Nicht bestanden

Aa #3561AF auf #636363 1,00:1 Nicht bestanden

BYTE 12

BYTE 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen