Retro Bricks

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

Zurück zur Bibliothek

Retro Bricks

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär simple colorful retro bright

Likes 8

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #191919;
  --c-earthy-2: #3D3B34;
  --c-earthy-3: #E4E0D3;
  --c-earthy-4: #D53434;
  --c-earthy-5: #E4BD39;
  --c-earthy-6: #E7ED3D;
  --c-earthy-7: #56D534;
  --c-earthy-8: #3491D5;
  --c-earthy-9: #87418E;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Biotic Grasp (#E7ED3D) bis zum dunkelsten Ton Thamar Black (#191919). Sie vereint Thamar Black, Black Olive, Aragonite, Blood Moon, Solarium, Biotic Grasp, Download Progress, Splish Splash und Dahlia in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #191919 auf #E7ED3D mit 13,88: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

Thamar Black #191919

RGB: rgb(25, 25, 25)
HSL: hsl(0, 0%, 10%)
Luminanz: 0,010

Black Olive #3D3B34

RGB: rgb(61, 59, 52)
HSL: hsl(47, 8%, 22%)
Luminanz: 0,044

Aragonite #E4E0D3

RGB: rgb(228, 224, 211)
HSL: hsl(46, 24%, 86%)
Luminanz: 0,745

Blood Moon #D53434

RGB: rgb(213, 52, 52)
HSL: hsl(0, 66%, 52%)
Luminanz: 0,169

Solarium #E4BD39

RGB: rgb(228, 189, 57)
HSL: hsl(46, 76%, 56%)
Luminanz: 0,532

Biotic Grasp #E7ED3D

RGB: rgb(231, 237, 61)
HSL: hsl(62, 83%, 58%)
Luminanz: 0,779

Download Progress #56D534

RGB: rgb(86, 213, 52)
HSL: hsl(107, 66%, 52%)
Luminanz: 0,498

Splish Splash #3491D5

RGB: rgb(52, 145, 213)
HSL: hsl(205, 66%, 52%)
Luminanz: 0,258

Dahlia #87418E

RGB: rgb(135, 65, 142)
HSL: hsl(295, 37%, 41%)
Luminanz: 0,109

Kontrast & Barrierefreiheit

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

Aa #191919 auf #E7ED3D 13,88:1 AAA

Aa #191919 auf #E4E0D3 13,31:1 AAA

Aa #191919 auf #E4BD39 9,74:1 AAA

Aa #191919 auf #56D534 9,18:1 AAA

Aa #3D3B34 auf #E7ED3D 8,85:1 AAA

Aa #3D3B34 auf #E4E0D3 8,49:1 AAA

Aa #3D3B34 auf #E4BD39 6,21:1 AA

Aa #3D3B34 auf #56D534 5,85:1 AA

Aa #E7ED3D auf #87418E 5,22:1 AA

Aa #191919 auf #3491D5 5,15:1 AA

Aa #E4E0D3 auf #87418E 5,01:1 AA

Aa #D53434 auf #E7ED3D 3,79:1 AA (großer Text)

Aa #191919 auf #D53434 3,66:1 AA (großer Text)

Aa #E4BD39 auf #87418E 3,66:1 AA (großer Text)

Aa #E4E0D3 auf #D53434 3,64:1 AA (großer Text)

Aa #56D534 auf #87418E 3,45:1 AA (großer Text)

Aa #3D3B34 auf #3491D5 3,29:1 AA (großer Text)

Aa #E7ED3D auf #3491D5 2,69:1 Nicht bestanden

Aa #191919 auf #87418E 2,66:1 Nicht bestanden

Aa #D53434 auf #E4BD39 2,66:1 Nicht bestanden

Aa #E4E0D3 auf #3491D5 2,58:1 Nicht bestanden

Aa #D53434 auf #56D534 2,51:1 Nicht bestanden

Aa #3D3B34 auf #D53434 2,33:1 Nicht bestanden

Aa #3491D5 auf #87418E 1,94:1 Nicht bestanden

Aa #E4BD39 auf #3491D5 1,89:1 Nicht bestanden

Aa #56D534 auf #3491D5 1,78:1 Nicht bestanden

Aa #3D3B34 auf #87418E 1,70:1 Nicht bestanden

Aa #191919 auf #3D3B34 1,57:1 Nicht bestanden

Aa #E7ED3D auf #56D534 1,51:1 Nicht bestanden

Aa #E4E0D3 auf #56D534 1,45:1 Nicht bestanden

Aa #E4BD39 auf #E7ED3D 1,42:1 Nicht bestanden

Aa #D53434 auf #3491D5 1,41:1 Nicht bestanden

Aa #D53434 auf #87418E 1,38:1 Nicht bestanden

Aa #E4E0D3 auf #E4BD39 1,37:1 Nicht bestanden

Aa #E4BD39 auf #56D534 1,06:1 Nicht bestanden

Aa #E4E0D3 auf #E7ED3D 1,04:1 Nicht bestanden

Retro Bricks

Retro Bricks

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen