Cardplay

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

Zurück zur Bibliothek

Cardplay

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

Bearbeiten

Erdig 12 Farben Neutral Gemischt Komplementär 12color colorful cards primary

Likes 48

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #282828;
  --c-earthy-2: #464CA5;
  --c-earthy-3: #B23535;
  --c-earthy-4: #38AD5F;
  --c-earthy-5: #D9BD57;
  --c-earthy-6: #C0BBB3;
  --c-earthy-7: #7C7774;
  --c-earthy-8: #6F87C4;
  --c-earthy-9: #D58C70;
  --c-earthy-10: #82DB84;
  --c-earthy-11: #E4DD7A;
  --c-earthy-12: #EEEADE;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Horseradish Cream (#EEEADE) bis zum dunkelsten Ton Dire Wolf (#282828). Sie vereint Dire Wolf, Dazzling Blue, Red Contrast, Artificial Turf, Golden Bass, Viaduct, Amazon Stone, Violets Are Blue, Terra Cotta Pot, Electric Lettuce, Lustrous Yellow und Horseradish Cream 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 #282828 auf #EEEADE mit 12,26: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

Dire Wolf #282828

RGB: rgb(40, 40, 40)
HSL: hsl(0, 0%, 16%)
Luminanz: 0,021

Dazzling Blue #464CA5

RGB: rgb(70, 76, 165)
HSL: hsl(236, 40%, 46%)
Luminanz: 0,092

Red Contrast #B23535

RGB: rgb(178, 53, 53)
HSL: hsl(0, 54%, 45%)
Luminanz: 0,123

Artificial Turf #38AD5F

RGB: rgb(56, 173, 95)
HSL: hsl(140, 51%, 45%)
Luminanz: 0,316

Golden Bass #D9BD57

RGB: rgb(217, 189, 87)
HSL: hsl(47, 63%, 60%)
Luminanz: 0,518

Viaduct #C0BBB3

RGB: rgb(192, 187, 179)
HSL: hsl(37, 9%, 73%)
Luminanz: 0,500

Amazon Stone #7C7774

RGB: rgb(124, 119, 116)
HSL: hsl(23, 3%, 47%)
Luminanz: 0,187

Violets Are Blue #6F87C4

RGB: rgb(111, 135, 196)
HSL: hsl(223, 42%, 60%)
Luminanz: 0,247

Terra Cotta Pot #D58C70

RGB: rgb(213, 140, 112)
HSL: hsl(17, 55%, 64%)
Luminanz: 0,341

Electric Lettuce #82DB84

RGB: rgb(130, 219, 132)
HSL: hsl(121, 55%, 68%)
Luminanz: 0,571

Lustrous Yellow #E4DD7A

RGB: rgb(228, 221, 122)
HSL: hsl(56, 66%, 69%)
Luminanz: 0,696

Horseradish Cream #EEEADE

RGB: rgb(238, 234, 222)
HSL: hsl(45, 32%, 90%)
Luminanz: 0,823

Kontrast & Barrierefreiheit

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

Aa #282828 auf #EEEADE 12,26:1 AAA

Aa #282828 auf #E4DD7A 10,48:1 AAA

Aa #282828 auf #82DB84 8,72:1 AAA

Aa #282828 auf #D9BD57 7,98:1 AAA

Aa #282828 auf #C0BBB3 7,72:1 AAA

Aa #464CA5 auf #EEEADE 6,15:1 AA

Aa #282828 auf #D58C70 5,49:1 AA

Aa #464CA5 auf #E4DD7A 5,26:1 AA

Aa #282828 auf #38AD5F 5,13:1 AA

Aa #B23535 auf #EEEADE 5,06:1 AA

Aa #464CA5 auf #82DB84 4,38:1 AA (großer Text)

Aa #B23535 auf #E4DD7A 4,32:1 AA (großer Text)

Aa #282828 auf #6F87C4 4,17:1 AA (großer Text)

Aa #464CA5 auf #D9BD57 4,01:1 AA (großer Text)

Aa #464CA5 auf #C0BBB3 3,88:1 AA (großer Text)

Aa #7C7774 auf #EEEADE 3,68:1 AA (großer Text)

Aa #B23535 auf #82DB84 3,59:1 AA (großer Text)

Aa #282828 auf #7C7774 3,33:1 AA (großer Text)

Aa #B23535 auf #D9BD57 3,29:1 AA (großer Text)

Aa #B23535 auf #C0BBB3 3,19:1 AA (großer Text)

Aa #7C7774 auf #E4DD7A 3,14:1 AA (großer Text)

Aa #6F87C4 auf #EEEADE 2,94:1 Nicht bestanden

Aa #464CA5 auf #D58C70 2,75:1 Nicht bestanden

Aa #7C7774 auf #82DB84 2,61:1 Nicht bestanden

Aa #464CA5 auf #38AD5F 2,58:1 Nicht bestanden

Aa #6F87C4 auf #E4DD7A 2,51:1 Nicht bestanden

Aa #282828 auf #B23535 2,42:1 Nicht bestanden

Aa #38AD5F auf #EEEADE 2,39:1 Nicht bestanden

Aa #D9BD57 auf #7C7774 2,39:1 Nicht bestanden

Aa #C0BBB3 auf #7C7774 2,32:1 Nicht bestanden

Aa #B23535 auf #D58C70 2,26:1 Nicht bestanden

Aa #D58C70 auf #EEEADE 2,23:1 Nicht bestanden

Aa #B23535 auf #38AD5F 2,12:1 Nicht bestanden

Aa #464CA5 auf #6F87C4 2,09:1 Nicht bestanden

Aa #6F87C4 auf #82DB84 2,09:1 Nicht bestanden

Aa #38AD5F auf #E4DD7A 2,04:1 Nicht bestanden

Aa #282828 auf #464CA5 1,99:1 Nicht bestanden

Aa #D9BD57 auf #6F87C4 1,91:1 Nicht bestanden

Aa #D58C70 auf #E4DD7A 1,91:1 Nicht bestanden

Aa #C0BBB3 auf #6F87C4 1,85:1 Nicht bestanden

Aa #B23535 auf #6F87C4 1,72:1 Nicht bestanden

Aa #38AD5F auf #82DB84 1,70:1 Nicht bestanden

Aa #464CA5 auf #7C7774 1,67:1 Nicht bestanden

Aa #7C7774 auf #D58C70 1,65:1 Nicht bestanden

Aa #C0BBB3 auf #EEEADE 1,59:1 Nicht bestanden

Aa #D58C70 auf #82DB84 1,59:1 Nicht bestanden

Aa #38AD5F auf #D9BD57 1,55:1 Nicht bestanden

Aa #38AD5F auf #7C7774 1,54:1 Nicht bestanden

Aa #D9BD57 auf #EEEADE 1,54:1 Nicht bestanden

Aa #38AD5F auf #C0BBB3 1,50:1 Nicht bestanden

Aa #D9BD57 auf #D58C70 1,45:1 Nicht bestanden

Aa #C0BBB3 auf #D58C70 1,41:1 Nicht bestanden

Aa #82DB84 auf #EEEADE 1,41:1 Nicht bestanden

Aa #B23535 auf #7C7774 1,37:1 Nicht bestanden

Aa #C0BBB3 auf #E4DD7A 1,36:1 Nicht bestanden

Aa #6F87C4 auf #D58C70 1,32:1 Nicht bestanden

Aa #D9BD57 auf #E4DD7A 1,31:1 Nicht bestanden

Aa #7C7774 auf #6F87C4 1,25:1 Nicht bestanden

Aa #38AD5F auf #6F87C4 1,23:1 Nicht bestanden

Aa #464CA5 auf #B23535 1,22:1 Nicht bestanden

Aa #82DB84 auf #E4DD7A 1,20:1 Nicht bestanden

Aa #E4DD7A auf #EEEADE 1,17:1 Nicht bestanden

Aa #C0BBB3 auf #82DB84 1,13:1 Nicht bestanden

Aa #D9BD57 auf #82DB84 1,09:1 Nicht bestanden

Aa #38AD5F auf #D58C70 1,07:1 Nicht bestanden

Aa #D9BD57 auf #C0BBB3 1,03:1 Nicht bestanden

Cardplay

Cardplay

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen