Num_03

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

Zurück zur Bibliothek

Num_03

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär three 3 number num

Likes 8

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #FFFFFF;
  --c-earthy-2: #5B7083;
  --c-earthy-3: #279EE8;
  --c-earthy-4: #764CBA;
  --c-earthy-5: #D1285C;
  --c-earthy-6: #E65F2A;
  --c-earthy-7: #F7AC2C;
  --c-earthy-8: #22BA67;
  --c-earthy-9: #131B23;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Coarse Wool (#131B23). Sie vereint White, Silver Blueberry, Button Blue, Harley Hair Purple, Beet Wave, Sunset Blaze, Late Afternoon, Welsh Onion und Coarse Wool in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #131B23 mit 17,37: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

White #FFFFFF

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

Silver Blueberry #5B7083

RGB: rgb(91, 112, 131)
HSL: hsl(209, 18%, 44%)
Luminanz: 0,155

Button Blue #279EE8

RGB: rgb(39, 158, 232)
HSL: hsl(203, 81%, 53%)
Luminanz: 0,307

Harley Hair Purple #764CBA

RGB: rgb(118, 76, 186)
HSL: hsl(263, 44%, 51%)
Luminanz: 0,126

Beet Wave #D1285C

RGB: rgb(209, 40, 92)
HSL: hsl(342, 68%, 49%)
Luminanz: 0,159

Sunset Blaze #E65F2A

RGB: rgb(230, 95, 42)
HSL: hsl(17, 79%, 53%)
Luminanz: 0,252

Late Afternoon #F7AC2C

RGB: rgb(247, 172, 44)
HSL: hsl(38, 93%, 57%)
Luminanz: 0,495

Welsh Onion #22BA67

RGB: rgb(34, 186, 103)
HSL: hsl(147, 69%, 43%)
Luminanz: 0,364

Coarse Wool #131B23

RGB: rgb(19, 27, 35)
HSL: hsl(210, 30%, 11%)
Luminanz: 0,010

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #131B23 17,37:1 AAA

Aa #F7AC2C auf #131B23 9,01:1 AAA

Aa #22BA67 auf #131B23 6,86:1 AA

Aa #FFFFFF auf #764CBA 5,98:1 AA

Aa #279EE8 auf #131B23 5,91:1 AA

Aa #FFFFFF auf #5B7083 5,13:1 AA

Aa #FFFFFF auf #D1285C 5,04:1 AA

Aa #E65F2A auf #131B23 4,99:1 AA

Aa #FFFFFF auf #E65F2A 3,48:1 AA (großer Text)

Aa #D1285C auf #131B23 3,45:1 AA (großer Text)

Aa #5B7083 auf #131B23 3,38:1 AA (großer Text)

Aa #764CBA auf #F7AC2C 3,10:1 AA (großer Text)

Aa #FFFFFF auf #279EE8 2,94:1 Nicht bestanden

Aa #764CBA auf #131B23 2,91:1 Nicht bestanden

Aa #5B7083 auf #F7AC2C 2,66:1 Nicht bestanden

Aa #D1285C auf #F7AC2C 2,61:1 Nicht bestanden

Aa #FFFFFF auf #22BA67 2,53:1 Nicht bestanden

Aa #764CBA auf #22BA67 2,36:1 Nicht bestanden

Aa #5B7083 auf #22BA67 2,03:1 Nicht bestanden

Aa #279EE8 auf #764CBA 2,03:1 Nicht bestanden

Aa #D1285C auf #22BA67 1,99:1 Nicht bestanden

Aa #FFFFFF auf #F7AC2C 1,93:1 Nicht bestanden

Aa #E65F2A auf #F7AC2C 1,80:1 Nicht bestanden

Aa #5B7083 auf #279EE8 1,75:1 Nicht bestanden

Aa #764CBA auf #E65F2A 1,72:1 Nicht bestanden

Aa #279EE8 auf #D1285C 1,71:1 Nicht bestanden

Aa #279EE8 auf #F7AC2C 1,53:1 Nicht bestanden

Aa #5B7083 auf #E65F2A 1,48:1 Nicht bestanden

Aa #D1285C auf #E65F2A 1,45:1 Nicht bestanden

Aa #E65F2A auf #22BA67 1,37:1 Nicht bestanden

Aa #F7AC2C auf #22BA67 1,31:1 Nicht bestanden

Aa #764CBA auf #D1285C 1,19:1 Nicht bestanden

Aa #279EE8 auf #E65F2A 1,18:1 Nicht bestanden

Aa #5B7083 auf #764CBA 1,16:1 Nicht bestanden

Aa #279EE8 auf #22BA67 1,16:1 Nicht bestanden

Aa #5B7083 auf #D1285C 1,02:1 Nicht bestanden

Num_03

Num_03

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen