SLURPO12

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

Zurück zur Bibliothek

SLURPO12

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär desaturated versatile 12 12colors

Likes 10

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #000000;
  --c-earthy-2: #1B4418;
  --c-earthy-3: #5E5441;
  --c-earthy-4: #5F5B8B;
  --c-earthy-5: #777777;
  --c-earthy-6: #975858;
  --c-earthy-7: #A6BB4C;
  --c-earthy-8: #A6858F;
  --c-earthy-9: #CD92D0;
  --c-earthy-10: #FFBE8B;
  --c-earthy-11: #B0FFBC;
  --c-earthy-12: #FFFFFF;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Myrtle, Hiking Boots, Purple Balloon, Lucky Grey, Baca Berry, Money Banks, Lacy Mist, Ineffable Magenta, Orange Mousse, Light Mint und White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 19 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #FFFFFF mit 21: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

Black #000000

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

Myrtle #1B4418

RGB: rgb(27, 68, 24)
HSL: hsl(116, 48%, 18%)
Luminanz: 0,044

Hiking Boots #5E5441

RGB: rgb(94, 84, 65)
HSL: hsl(39, 18%, 31%)
Luminanz: 0,091

Purple Balloon #5F5B8B

RGB: rgb(95, 91, 139)
HSL: hsl(245, 21%, 45%)
Luminanz: 0,118

Lucky Grey #777777

RGB: rgb(119, 119, 119)
HSL: hsl(0, 0%, 47%)
Luminanz: 0,185

Baca Berry #975858

RGB: rgb(151, 88, 88)
HSL: hsl(0, 26%, 47%)
Luminanz: 0,143

Money Banks #A6BB4C

RGB: rgb(166, 187, 76)
HSL: hsl(71, 45%, 52%)
Luminanz: 0,442

Lacy Mist #A6858F

RGB: rgb(166, 133, 143)
HSL: hsl(342, 16%, 59%)
Luminanz: 0,269

Ineffable Magenta #CD92D0

RGB: rgb(205, 146, 208)
HSL: hsl(297, 40%, 69%)
Luminanz: 0,381

Orange Mousse #FFBE8B

RGB: rgb(255, 190, 139)
HSL: hsl(26, 100%, 77%)
Luminanz: 0,600

Light Mint #B0FFBC

RGB: rgb(176, 255, 188)
HSL: hsl(129, 100%, 85%)
Luminanz: 0,844

White #FFFFFF

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

Kontrast & Barrierefreiheit

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

Aa #000000 auf #FFFFFF 21,00:1 AAA

Aa #000000 auf #B0FFBC 17,88:1 AAA

Aa #000000 auf #FFBE8B 12,99:1 AAA

Aa #1B4418 auf #FFFFFF 11,13:1 AAA

Aa #000000 auf #A6BB4C 9,83:1 AAA

Aa #1B4418 auf #B0FFBC 9,48:1 AAA

Aa #000000 auf #CD92D0 8,62:1 AAA

Aa #5E5441 auf #FFFFFF 7,45:1 AAA

Aa #1B4418 auf #FFBE8B 6,89:1 AA

Aa #000000 auf #A6858F 6,37:1 AA

Aa #5E5441 auf #B0FFBC 6,34:1 AA

Aa #5F5B8B auf #FFFFFF 6,26:1 AA

Aa #975858 auf #FFFFFF 5,45:1 AA

Aa #5F5B8B auf #B0FFBC 5,33:1 AA

Aa #1B4418 auf #A6BB4C 5,21:1 AA

Aa #000000 auf #777777 4,69:1 AA

Aa #975858 auf #B0FFBC 4,64:1 AA

Aa #5E5441 auf #FFBE8B 4,61:1 AA

Aa #1B4418 auf #CD92D0 4,57:1 AA

Aa #777777 auf #FFFFFF 4,48:1 AA (großer Text)

Aa #5F5B8B auf #FFBE8B 3,87:1 AA (großer Text)

Aa #000000 auf #975858 3,85:1 AA (großer Text)

Aa #777777 auf #B0FFBC 3,81:1 AA (großer Text)

Aa #5E5441 auf #A6BB4C 3,49:1 AA (großer Text)

Aa #1B4418 auf #A6858F 3,38:1 AA (großer Text)

Aa #975858 auf #FFBE8B 3,37:1 AA (großer Text)

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

Aa #A6858F auf #FFFFFF 3,30:1 AA (großer Text)

Aa #5E5441 auf #CD92D0 3,06:1 AA (großer Text)

Aa #5F5B8B auf #A6BB4C 2,93:1 Nicht bestanden

Aa #000000 auf #5E5441 2,82:1 Nicht bestanden

Aa #A6858F auf #B0FFBC 2,80:1 Nicht bestanden

Aa #777777 auf #FFBE8B 2,77:1 Nicht bestanden

Aa #5F5B8B auf #CD92D0 2,57:1 Nicht bestanden

Aa #975858 auf #A6BB4C 2,55:1 Nicht bestanden

Aa #1B4418 auf #777777 2,49:1 Nicht bestanden

Aa #CD92D0 auf #FFFFFF 2,44:1 Nicht bestanden

Aa #5E5441 auf #A6858F 2,26:1 Nicht bestanden

Aa #975858 auf #CD92D0 2,24:1 Nicht bestanden

Aa #A6BB4C auf #FFFFFF 2,14:1 Nicht bestanden

Aa #777777 auf #A6BB4C 2,10:1 Nicht bestanden

Aa #CD92D0 auf #B0FFBC 2,07:1 Nicht bestanden

Aa #1B4418 auf #975858 2,04:1 Nicht bestanden

Aa #A6858F auf #FFBE8B 2,04:1 Nicht bestanden

Aa #5F5B8B auf #A6858F 1,90:1 Nicht bestanden

Aa #000000 auf #1B4418 1,89:1 Nicht bestanden

Aa #777777 auf #CD92D0 1,84:1 Nicht bestanden

Aa #A6BB4C auf #B0FFBC 1,82:1 Nicht bestanden

Aa #1B4418 auf #5F5B8B 1,78:1 Nicht bestanden

Aa #5E5441 auf #777777 1,66:1 Nicht bestanden

Aa #975858 auf #A6858F 1,65:1 Nicht bestanden

Aa #FFBE8B auf #FFFFFF 1,62:1 Nicht bestanden

Aa #A6BB4C auf #A6858F 1,54:1 Nicht bestanden

Aa #CD92D0 auf #FFBE8B 1,51:1 Nicht bestanden

Aa #1B4418 auf #5E5441 1,49:1 Nicht bestanden

Aa #5F5B8B auf #777777 1,40:1 Nicht bestanden

Aa #FFBE8B auf #B0FFBC 1,38:1 Nicht bestanden

Aa #5E5441 auf #975858 1,37:1 Nicht bestanden

Aa #777777 auf #A6858F 1,36:1 Nicht bestanden

Aa #A6858F auf #CD92D0 1,35:1 Nicht bestanden

Aa #A6BB4C auf #FFBE8B 1,32:1 Nicht bestanden

Aa #777777 auf #975858 1,22:1 Nicht bestanden

Aa #5E5441 auf #5F5B8B 1,19:1 Nicht bestanden

Aa #B0FFBC auf #FFFFFF 1,17:1 Nicht bestanden

Aa #5F5B8B auf #975858 1,15:1 Nicht bestanden

Aa #A6BB4C auf #CD92D0 1,14:1 Nicht bestanden

SLURPO12

SLURPO12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen