AKC12

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

AKC12

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 12 Farben Kühl Gemischt Komplementär retro hardware computer

Likes 339

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #201127;
  --c-earthy-2: #201433;
  --c-earthy-3: #1B1E34;
  --c-earthy-4: #355D68;
  --c-earthy-5: #6AAF9D;
  --c-earthy-6: #94C5AC;
  --c-earthy-7: #FFEB99;
  --c-earthy-8: #FFC27A;
  --c-earthy-9: #EC9A6D;
  --c-earthy-10: #D9626B;
  --c-earthy-11: #C24B6E;
  --c-earthy-12: #A73169;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Old Yella (#FFEB99) bis zum dunkelsten Ton Inside (#201127). Sie vereint Inside, Blacklist, Sombre Night, Under the Sea, Green Crush, Bella Green, Old Yella, Zing, Inventive Orange, Berrylicious, Vibrant Red und Rich Maroon 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 #201127 auf #FFEB99 mit 15,03: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

Inside #201127

RGB: rgb(32, 17, 39)
HSL: hsl(281, 39%, 11%)
Luminanz: 0,009

Blacklist #201433

RGB: rgb(32, 20, 51)
HSL: hsl(263, 44%, 14%)
Luminanz: 0,011

Sombre Night #1B1E34

RGB: rgb(27, 30, 52)
HSL: hsl(233, 32%, 15%)
Luminanz: 0,014

Under the Sea #355D68

RGB: rgb(53, 93, 104)
HSL: hsl(193, 32%, 31%)
Luminanz: 0,096

Green Crush #6AAF9D

RGB: rgb(106, 175, 157)
HSL: hsl(164, 30%, 55%)
Luminanz: 0,362

Bella Green #94C5AC

RGB: rgb(148, 197, 172)
HSL: hsl(149, 30%, 68%)
Luminanz: 0,492

Old Yella #FFEB99

RGB: rgb(255, 235, 153)
HSL: hsl(48, 100%, 80%)
Luminanz: 0,830

Zing #FFC27A

RGB: rgb(255, 194, 122)
HSL: hsl(32, 100%, 74%)
Luminanz: 0,613

Inventive Orange #EC9A6D

RGB: rgb(236, 154, 109)
HSL: hsl(21, 77%, 68%)
Luminanz: 0,421

Berrylicious #D9626B

RGB: rgb(217, 98, 107)
HSL: hsl(355, 61%, 62%)
Luminanz: 0,246

Vibrant Red #C24B6E

RGB: rgb(194, 75, 110)
HSL: hsl(342, 49%, 53%)
Luminanz: 0,176

Rich Maroon #A73169

RGB: rgb(167, 49, 105)
HSL: hsl(332, 55%, 42%)
Luminanz: 0,114

Kontrast & Barrierefreiheit

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

Aa #201127 auf #FFEB99 15,03:1 AAA

Aa #201433 auf #FFEB99 14,55:1 AAA

Aa #1B1E34 auf #FFEB99 13,73:1 AAA

Aa #201127 auf #FFC27A 11,32:1 AAA

Aa #201433 auf #FFC27A 10,96:1 AAA

Aa #1B1E34 auf #FFC27A 10,34:1 AAA

Aa #201127 auf #94C5AC 9,26:1 AAA

Aa #201433 auf #94C5AC 8,97:1 AAA

Aa #1B1E34 auf #94C5AC 8,46:1 AAA

Aa #201127 auf #EC9A6D 8,04:1 AAA

Aa #201433 auf #EC9A6D 7,78:1 AAA

Aa #1B1E34 auf #EC9A6D 7,34:1 AAA

Aa #201127 auf #6AAF9D 7,03:1 AAA

Aa #201433 auf #6AAF9D 6,81:1 AA

Aa #1B1E34 auf #6AAF9D 6,42:1 AA

Aa #355D68 auf #FFEB99 6,03:1 AA

Aa #FFEB99 auf #A73169 5,35:1 AA

Aa #201127 auf #D9626B 5,05:1 AA

Aa #201433 auf #D9626B 4,89:1 AA

Aa #1B1E34 auf #D9626B 4,61:1 AA

Aa #355D68 auf #FFC27A 4,54:1 AA

Aa #FFC27A auf #A73169 4,03:1 AA (großer Text)

Aa #FFEB99 auf #C24B6E 3,89:1 AA (großer Text)

Aa #201127 auf #C24B6E 3,86:1 AA (großer Text)

Aa #201433 auf #C24B6E 3,74:1 AA (großer Text)

Aa #355D68 auf #94C5AC 3,72:1 AA (großer Text)

Aa #1B1E34 auf #C24B6E 3,53:1 AA (großer Text)

Aa #94C5AC auf #A73169 3,30:1 AA (großer Text)

Aa #355D68 auf #EC9A6D 3,23:1 AA (großer Text)

Aa #FFEB99 auf #D9626B 2,98:1 Nicht bestanden

Aa #FFC27A auf #C24B6E 2,93:1 Nicht bestanden

Aa #EC9A6D auf #A73169 2,86:1 Nicht bestanden

Aa #355D68 auf #6AAF9D 2,82:1 Nicht bestanden

Aa #201127 auf #A73169 2,81:1 Nicht bestanden

Aa #201433 auf #A73169 2,72:1 Nicht bestanden

Aa #1B1E34 auf #A73169 2,56:1 Nicht bestanden

Aa #6AAF9D auf #A73169 2,50:1 Nicht bestanden

Aa #201127 auf #355D68 2,49:1 Nicht bestanden

Aa #201433 auf #355D68 2,41:1 Nicht bestanden

Aa #94C5AC auf #C24B6E 2,40:1 Nicht bestanden

Aa #1B1E34 auf #355D68 2,28:1 Nicht bestanden

Aa #FFC27A auf #D9626B 2,24:1 Nicht bestanden

Aa #6AAF9D auf #FFEB99 2,14:1 Nicht bestanden

Aa #EC9A6D auf #C24B6E 2,08:1 Nicht bestanden

Aa #355D68 auf #D9626B 2,03:1 Nicht bestanden

Aa #FFEB99 auf #EC9A6D 1,87:1 Nicht bestanden

Aa #94C5AC auf #D9626B 1,83:1 Nicht bestanden

Aa #6AAF9D auf #C24B6E 1,82:1 Nicht bestanden

Aa #D9626B auf #A73169 1,80:1 Nicht bestanden

Aa #94C5AC auf #FFEB99 1,62:1 Nicht bestanden

Aa #6AAF9D auf #FFC27A 1,61:1 Nicht bestanden

Aa #EC9A6D auf #D9626B 1,59:1 Nicht bestanden

Aa #355D68 auf #C24B6E 1,55:1 Nicht bestanden

Aa #FFC27A auf #EC9A6D 1,41:1 Nicht bestanden

Aa #6AAF9D auf #D9626B 1,39:1 Nicht bestanden

Aa #C24B6E auf #A73169 1,38:1 Nicht bestanden

Aa #FFEB99 auf #FFC27A 1,33:1 Nicht bestanden

Aa #6AAF9D auf #94C5AC 1,32:1 Nicht bestanden

Aa #D9626B auf #C24B6E 1,31:1 Nicht bestanden

Aa #94C5AC auf #FFC27A 1,22:1 Nicht bestanden

Aa #94C5AC auf #EC9A6D 1,15:1 Nicht bestanden

Aa #6AAF9D auf #EC9A6D 1,14:1 Nicht bestanden

Aa #355D68 auf #A73169 1,13:1 Nicht bestanden

Aa #201127 auf #1B1E34 1,09:1 Nicht bestanden

Aa #201433 auf #1B1E34 1,06:1 Nicht bestanden

Aa #201127 auf #201433 1,03:1 Nicht bestanden

AKC12

AKC12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen