Oktober

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

Zurück zur Bibliothek

Oktober

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär orange fall red soft

Likes 43

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #1A1416;
  --c-earthy-2: #000000;
  --c-earthy-3: #3A4B5D;
  --c-earthy-4: #6C7977;
  --c-earthy-5: #A63E3C;
  --c-earthy-6: #D3892C;
  --c-earthy-7: #EEBB43;
  --c-earthy-8: #B4B0A7;
  --c-earthy-9: #E9E8E2;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Thousand Shells (#E9E8E2) bis zum dunkelsten Ton Black (#000000). Sie vereint Pot Black, Black, Man Friday, Rolling Stone, Bijou Red, Opulent, Golden Glam, Laid Back Grey und Thousand Shells in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #E9E8E2 mit 17,11: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

Pot Black #1A1416

RGB: rgb(26, 20, 22)
HSL: hsl(340, 13%, 9%)
Luminanz: 0,008

Black #000000

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

Man Friday #3A4B5D

RGB: rgb(58, 75, 93)
HSL: hsl(211, 23%, 30%)
Luminanz: 0,067

Rolling Stone #6C7977

RGB: rgb(108, 121, 119)
HSL: hsl(171, 6%, 45%)
Luminanz: 0,182

Bijou Red #A63E3C

RGB: rgb(166, 62, 60)
HSL: hsl(1, 47%, 44%)
Luminanz: 0,119

Opulent #D3892C

RGB: rgb(211, 137, 44)
HSL: hsl(33, 65%, 50%)
Luminanz: 0,319

Golden Glam #EEBB43

RGB: rgb(238, 187, 67)
HSL: hsl(42, 83%, 60%)
Luminanz: 0,541

Laid Back Grey #B4B0A7

RGB: rgb(180, 176, 167)
HSL: hsl(42, 8%, 68%)
Luminanz: 0,435

Thousand Shells #E9E8E2

RGB: rgb(233, 232, 226)
HSL: hsl(51, 14%, 90%)
Luminanz: 0,805

Kontrast & Barrierefreiheit

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

Aa #000000 auf #E9E8E2 17,11:1 AAA

Aa #1A1416 auf #E9E8E2 14,80:1 AAA

Aa #000000 auf #EEBB43 11,82:1 AAA

Aa #1A1416 auf #EEBB43 10,23:1 AAA

Aa #000000 auf #B4B0A7 9,71:1 AAA

Aa #1A1416 auf #B4B0A7 8,40:1 AAA

Aa #000000 auf #D3892C 7,38:1 AAA

Aa #3A4B5D auf #E9E8E2 7,30:1 AAA

Aa #1A1416 auf #D3892C 6,39:1 AA

Aa #A63E3C auf #E9E8E2 5,07:1 AA

Aa #3A4B5D auf #EEBB43 5,04:1 AA

Aa #000000 auf #6C7977 4,64:1 AA

Aa #3A4B5D auf #B4B0A7 4,14:1 AA (großer Text)

Aa #1A1416 auf #6C7977 4,01:1 AA (großer Text)

Aa #6C7977 auf #E9E8E2 3,69:1 AA (großer Text)

Aa #A63E3C auf #EEBB43 3,50:1 AA (großer Text)

Aa #000000 auf #A63E3C 3,38:1 AA (großer Text)

Aa #3A4B5D auf #D3892C 3,15:1 AA (großer Text)

Aa #1A1416 auf #A63E3C 2,92:1 Nicht bestanden

Aa #A63E3C auf #B4B0A7 2,88:1 Nicht bestanden

Aa #6C7977 auf #EEBB43 2,55:1 Nicht bestanden

Aa #000000 auf #3A4B5D 2,34:1 Nicht bestanden

Aa #D3892C auf #E9E8E2 2,32:1 Nicht bestanden

Aa #A63E3C auf #D3892C 2,19:1 Nicht bestanden

Aa #6C7977 auf #B4B0A7 2,09:1 Nicht bestanden

Aa #1A1416 auf #3A4B5D 2,03:1 Nicht bestanden

Aa #3A4B5D auf #6C7977 1,98:1 Nicht bestanden

Aa #B4B0A7 auf #E9E8E2 1,76:1 Nicht bestanden

Aa #D3892C auf #EEBB43 1,60:1 Nicht bestanden

Aa #6C7977 auf #D3892C 1,59:1 Nicht bestanden

Aa #EEBB43 auf #E9E8E2 1,45:1 Nicht bestanden

Aa #3A4B5D auf #A63E3C 1,44:1 Nicht bestanden

Aa #6C7977 auf #A63E3C 1,37:1 Nicht bestanden

Aa #D3892C auf #B4B0A7 1,31:1 Nicht bestanden

Aa #EEBB43 auf #B4B0A7 1,22:1 Nicht bestanden

Aa #1A1416 auf #000000 1,16:1 Nicht bestanden

Oktober

Oktober

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen