Jeepers12

Palette mit 12 Farben · Warm · Dunkel · Harmonie: Triadisch

Zurück zur Bibliothek

Jeepers12

Palette mit 12 Farben · Temperatur: Warm · Ton: Dunkel · Harmonie: Triadisch

Bearbeiten

Erdig 12 Farben Warm Dunkel Triadisch night dark spooky goth

Likes 136

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #081431;
  --c-earthy-2: #312441;
  --c-earthy-3: #6A445A;
  --c-earthy-4: #523C52;
  --c-earthy-5: #000000;
  --c-earthy-6: #5A616A;
  --c-earthy-7: #9CA1A4;
  --c-earthy-8: #BDCACD;
  --c-earthy-9: #B47139;
  --c-earthy-10: #83854A;
  --c-earthy-11: #D5BA9C;
  --c-earthy-12: #BDC6B4;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Sleepy Blue (#BDCACD) bis zum dunkelsten Ton Black (#000000). Sie vereint Squid’s Ink, Telopea, Prune Purple, Amethyst Dark Violet, Black, Calligraphy, Aegean Splendour, Sleepy Blue, Saucy Gold, Basil Chiffonade, Bespoke und Clay Ash in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 21 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #BDCACD mit 12,49: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

Squid’s Ink #081431

RGB: rgb(8, 20, 49)
HSL: hsl(222, 72%, 11%)
Luminanz: 0,008

Telopea #312441

RGB: rgb(49, 36, 65)
HSL: hsl(267, 29%, 20%)
Luminanz: 0,023

Prune Purple #6A445A

RGB: rgb(106, 68, 90)
HSL: hsl(325, 22%, 34%)
Luminanz: 0,079

Amethyst Dark Violet #523C52

RGB: rgb(82, 60, 82)
HSL: hsl(300, 15%, 28%)
Luminanz: 0,056

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Calligraphy #5A616A

RGB: rgb(90, 97, 106)
HSL: hsl(214, 8%, 38%)
Luminanz: 0,118

Aegean Splendour #9CA1A4

RGB: rgb(156, 161, 164)
HSL: hsl(203, 4%, 63%)
Luminanz: 0,352

Sleepy Blue #BDCACD

RGB: rgb(189, 202, 205)
HSL: hsl(191, 14%, 77%)
Luminanz: 0,575

Saucy Gold #B47139

RGB: rgb(180, 113, 57)
HSL: hsl(27, 52%, 46%)
Luminanz: 0,218

Basil Chiffonade #83854A

RGB: rgb(131, 133, 74)
HSL: hsl(62, 29%, 41%)
Luminanz: 0,221

Bespoke #D5BA9C

RGB: rgb(213, 186, 156)
HSL: hsl(32, 40%, 72%)
Luminanz: 0,517

Clay Ash #BDC6B4

RGB: rgb(189, 198, 180)
HSL: hsl(90, 14%, 74%)
Luminanz: 0,545

Kontrast & Barrierefreiheit

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

Aa #000000 auf #BDCACD 12,49:1 AAA

Aa #000000 auf #BDC6B4 11,90:1 AAA

Aa #000000 auf #D5BA9C 11,33:1 AAA

Aa #081431 auf #BDCACD 10,82:1 AAA

Aa #081431 auf #BDC6B4 10,31:1 AAA

Aa #081431 auf #D5BA9C 9,81:1 AAA

Aa #312441 auf #BDCACD 8,56:1 AAA

Aa #312441 auf #BDC6B4 8,16:1 AAA

Aa #000000 auf #9CA1A4 8,05:1 AAA

Aa #312441 auf #D5BA9C 7,77:1 AAA

Aa #081431 auf #9CA1A4 6,97:1 AA

Aa #523C52 auf #BDCACD 5,87:1 AA

Aa #523C52 auf #BDC6B4 5,60:1 AA

Aa #312441 auf #9CA1A4 5,51:1 AA

Aa #000000 auf #83854A 5,42:1 AA

Aa #000000 auf #B47139 5,36:1 AA

Aa #523C52 auf #D5BA9C 5,33:1 AA

Aa #6A445A auf #BDCACD 4,83:1 AA

Aa #081431 auf #83854A 4,69:1 AA

Aa #081431 auf #B47139 4,64:1 AA

Aa #6A445A auf #BDC6B4 4,60:1 AA

Aa #6A445A auf #D5BA9C 4,38:1 AA (großer Text)

Aa #523C52 auf #9CA1A4 3,78:1 AA (großer Text)

Aa #5A616A auf #BDCACD 3,73:1 AA (großer Text)

Aa #312441 auf #83854A 3,71:1 AA (großer Text)

Aa #312441 auf #B47139 3,67:1 AA (großer Text)

Aa #5A616A auf #BDC6B4 3,55:1 AA (großer Text)

Aa #5A616A auf #D5BA9C 3,38:1 AA (großer Text)

Aa #000000 auf #5A616A 3,35:1 AA (großer Text)

Aa #6A445A auf #9CA1A4 3,11:1 AA (großer Text)

Aa #081431 auf #5A616A 2,90:1 Nicht bestanden

Aa #6A445A auf #000000 2,59:1 Nicht bestanden

Aa #523C52 auf #83854A 2,55:1 Nicht bestanden

Aa #523C52 auf #B47139 2,52:1 Nicht bestanden

Aa #5A616A auf #9CA1A4 2,40:1 Nicht bestanden

Aa #BDCACD auf #B47139 2,33:1 Nicht bestanden

Aa #BDCACD auf #83854A 2,31:1 Nicht bestanden

Aa #312441 auf #5A616A 2,30:1 Nicht bestanden

Aa #081431 auf #6A445A 2,24:1 Nicht bestanden

Aa #B47139 auf #BDC6B4 2,22:1 Nicht bestanden

Aa #83854A auf #BDC6B4 2,20:1 Nicht bestanden

Aa #523C52 auf #000000 2,13:1 Nicht bestanden

Aa #B47139 auf #D5BA9C 2,11:1 Nicht bestanden

Aa #6A445A auf #83854A 2,09:1 Nicht bestanden

Aa #83854A auf #D5BA9C 2,09:1 Nicht bestanden

Aa #6A445A auf #B47139 2,07:1 Nicht bestanden

Aa #081431 auf #523C52 1,84:1 Nicht bestanden

Aa #312441 auf #6A445A 1,77:1 Nicht bestanden

Aa #5A616A auf #83854A 1,62:1 Nicht bestanden

Aa #5A616A auf #B47139 1,60:1 Nicht bestanden

Aa #523C52 auf #5A616A 1,58:1 Nicht bestanden

Aa #9CA1A4 auf #BDCACD 1,55:1 Nicht bestanden

Aa #9CA1A4 auf #B47139 1,50:1 Nicht bestanden

Aa #9CA1A4 auf #83854A 1,49:1 Nicht bestanden

Aa #9CA1A4 auf #BDC6B4 1,48:1 Nicht bestanden

Aa #312441 auf #523C52 1,46:1 Nicht bestanden

Aa #312441 auf #000000 1,46:1 Nicht bestanden

Aa #9CA1A4 auf #D5BA9C 1,41:1 Nicht bestanden

Aa #6A445A auf #5A616A 1,30:1 Nicht bestanden

Aa #081431 auf #312441 1,26:1 Nicht bestanden

Aa #6A445A auf #523C52 1,22:1 Nicht bestanden

Aa #081431 auf #000000 1,15:1 Nicht bestanden

Aa #BDCACD auf #D5BA9C 1,10:1 Nicht bestanden

Aa #BDCACD auf #BDC6B4 1,05:1 Nicht bestanden

Aa #D5BA9C auf #BDC6B4 1,05:1 Nicht bestanden

Aa #B47139 auf #83854A 1,01:1 Nicht bestanden

Jeepers12

Jeepers12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen