BASIC BIT

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

Zurück zur Bibliothek

BASIC BIT

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

Bearbeiten

Erdig 9 Farben Warm Hell Komplementär simple lowsaturation rainbow

Likes 107

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #D76C6C;
  --c-earthy-2: #F49461;
  --c-earthy-3: #FFDD7E;
  --c-earthy-4: #87BF72;
  --c-earthy-5: #6A94B1;
  --c-earthy-6: #73577E;
  --c-earthy-7: #FFFCF1;
  --c-earthy-8: #BEBEB4;
  --c-earthy-9: #3E3E3E;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Granulated Sugar (#FFFCF1) bis zum dunkelsten Ton Black Lacquer (#3E3E3E). Sie vereint Coral Expression, Brown Sand, Cup Noodles, Laudable Lime, Aragonite Blue, Dr Who, Granulated Sugar, Light Year und Black Lacquer in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFCF1 auf #3E3E3E mit 10,41: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

Coral Expression #D76C6C

RGB: rgb(215, 108, 108)
HSL: hsl(0, 57%, 63%)
Luminanz: 0,263

Brown Sand #F49461

RGB: rgb(244, 148, 97)
HSL: hsl(21, 87%, 67%)
Luminanz: 0,413

Cup Noodles #FFDD7E

RGB: rgb(255, 221, 126)
HSL: hsl(44, 100%, 75%)
Luminanz: 0,745

Laudable Lime #87BF72

RGB: rgb(135, 191, 114)
HSL: hsl(104, 38%, 60%)
Luminanz: 0,436

Aragonite Blue #6A94B1

RGB: rgb(106, 148, 177)
HSL: hsl(205, 31%, 55%)
Luminanz: 0,274

Dr Who #73577E

RGB: rgb(115, 87, 126)
HSL: hsl(283, 18%, 42%)
Luminanz: 0,120

Granulated Sugar #FFFCF1

RGB: rgb(255, 252, 241)
HSL: hsl(47, 100%, 97%)
Luminanz: 0,972

Light Year #BEBEB4

RGB: rgb(190, 190, 180)
HSL: hsl(60, 7%, 73%)
Luminanz: 0,511

Black Lacquer #3E3E3E

RGB: rgb(62, 62, 62)
HSL: hsl(0, 0%, 24%)
Luminanz: 0,048

Kontrast & Barrierefreiheit

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

Aa #FFFCF1 auf #3E3E3E 10,41:1 AAA

Aa #FFDD7E auf #3E3E3E 8,10:1 AAA

Aa #73577E auf #FFFCF1 6,03:1 AA

Aa #BEBEB4 auf #3E3E3E 5,71:1 AA

Aa #87BF72 auf #3E3E3E 4,95:1 AA

Aa #F49461 auf #3E3E3E 4,71:1 AA

Aa #FFDD7E auf #73577E 4,68:1 AA

Aa #6A94B1 auf #3E3E3E 3,30:1 AA (großer Text)

Aa #73577E auf #BEBEB4 3,30:1 AA (großer Text)

Aa #D76C6C auf #FFFCF1 3,27:1 AA (großer Text)

Aa #D76C6C auf #3E3E3E 3,18:1 AA (großer Text)

Aa #6A94B1 auf #FFFCF1 3,15:1 AA (großer Text)

Aa #87BF72 auf #73577E 2,87:1 Nicht bestanden

Aa #F49461 auf #73577E 2,73:1 Nicht bestanden

Aa #D76C6C auf #FFDD7E 2,54:1 Nicht bestanden

Aa #FFDD7E auf #6A94B1 2,45:1 Nicht bestanden

Aa #F49461 auf #FFFCF1 2,21:1 Nicht bestanden

Aa #87BF72 auf #FFFCF1 2,10:1 Nicht bestanden

Aa #6A94B1 auf #73577E 1,91:1 Nicht bestanden

Aa #D76C6C auf #73577E 1,84:1 Nicht bestanden

Aa #FFFCF1 auf #BEBEB4 1,82:1 Nicht bestanden

Aa #D76C6C auf #BEBEB4 1,79:1 Nicht bestanden

Aa #6A94B1 auf #BEBEB4 1,73:1 Nicht bestanden

Aa #73577E auf #3E3E3E 1,73:1 Nicht bestanden

Aa #F49461 auf #FFDD7E 1,72:1 Nicht bestanden

Aa #FFDD7E auf #87BF72 1,63:1 Nicht bestanden

Aa #D76C6C auf #87BF72 1,56:1 Nicht bestanden

Aa #87BF72 auf #6A94B1 1,50:1 Nicht bestanden

Aa #D76C6C auf #F49461 1,48:1 Nicht bestanden

Aa #F49461 auf #6A94B1 1,43:1 Nicht bestanden

Aa #FFDD7E auf #BEBEB4 1,42:1 Nicht bestanden

Aa #FFDD7E auf #FFFCF1 1,29:1 Nicht bestanden

Aa #F49461 auf #BEBEB4 1,21:1 Nicht bestanden

Aa #87BF72 auf #BEBEB4 1,15:1 Nicht bestanden

Aa #F49461 auf #87BF72 1,05:1 Nicht bestanden

Aa #D76C6C auf #6A94B1 1,04:1 Nicht bestanden

BASIC BIT

BASIC BIT

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen