Tank Palette

Palette mit 8 Farben · Warm · Dunkel · Harmonie: Analog

Zurück zur Bibliothek

Tank Palette

Palette mit 8 Farben · Temperatur: Warm · Ton: Dunkel · Harmonie: Analog

Bearbeiten

Gedeckt 8 Farben Warm Dunkel Analog 8color videogame army

Likes 11

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #000000;
  --c-muted-2: #8AA653;
  --c-muted-3: #728945;
  --c-muted-4: #5A6B36;
  --c-muted-5: #414D27;
  --c-muted-6: #636166;
  --c-muted-7: #86838A;
  --c-muted-8: #665A3D;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Mosquito Fern (#8AA653) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Mosquito Fern, Athonian Camoshade, Tiāntāi Mountain Green, Bronze Tone, Windsor Grey, Suva Grey und Puff Dragon in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #8AA653 mit 7,66:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Black #000000

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

Mosquito Fern #8AA653

RGB: rgb(138, 166, 83)
HSL: hsl(80, 33%, 49%)
Luminanz: 0,333

Athonian Camoshade #728945

RGB: rgb(114, 137, 69)
HSL: hsl(80, 33%, 40%)
Luminanz: 0,219

Tiāntāi Mountain Green #5A6B36

RGB: rgb(90, 107, 54)
HSL: hsl(79, 33%, 32%)
Luminanz: 0,130

Bronze Tone #414D27

RGB: rgb(65, 77, 39)
HSL: hsl(79, 33%, 23%)
Luminanz: 0,066

Windsor Grey #636166

RGB: rgb(99, 97, 102)
HSL: hsl(264, 3%, 39%)
Luminanz: 0,122

Suva Grey #86838A

RGB: rgb(134, 131, 138)
HSL: hsl(266, 3%, 53%)
Luminanz: 0,231

Puff Dragon #665A3D

RGB: rgb(102, 90, 61)
HSL: hsl(42, 25%, 32%)
Luminanz: 0,105

Kontrast & Barrierefreiheit

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

Aa #000000 auf #8AA653 7,66:1 AAA

Aa #000000 auf #86838A 5,63:1 AA

Aa #000000 auf #728945 5,38:1 AA

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

Aa #000000 auf #636166 3,43:1 AA (großer Text)

Aa #8AA653 auf #414D27 3,31:1 AA (großer Text)

Aa #000000 auf #665A3D 3,09:1 AA (großer Text)

Aa #8AA653 auf #665A3D 2,48:1 Nicht bestanden

Aa #414D27 auf #86838A 2,43:1 Nicht bestanden

Aa #000000 auf #414D27 2,32:1 Nicht bestanden

Aa #728945 auf #414D27 2,32:1 Nicht bestanden

Aa #8AA653 auf #636166 2,23:1 Nicht bestanden

Aa #8AA653 auf #5A6B36 2,13:1 Nicht bestanden

Aa #86838A auf #665A3D 1,82:1 Nicht bestanden

Aa #728945 auf #665A3D 1,74:1 Nicht bestanden

Aa #636166 auf #86838A 1,64:1 Nicht bestanden

Aa #728945 auf #636166 1,57:1 Nicht bestanden

Aa #5A6B36 auf #86838A 1,57:1 Nicht bestanden

Aa #5A6B36 auf #414D27 1,55:1 Nicht bestanden

Aa #728945 auf #5A6B36 1,50:1 Nicht bestanden

Aa #414D27 auf #636166 1,48:1 Nicht bestanden

Aa #8AA653 auf #728945 1,42:1 Nicht bestanden

Aa #8AA653 auf #86838A 1,36:1 Nicht bestanden

Aa #414D27 auf #665A3D 1,34:1 Nicht bestanden

Aa #5A6B36 auf #665A3D 1,16:1 Nicht bestanden

Aa #636166 auf #665A3D 1,11:1 Nicht bestanden

Aa #728945 auf #86838A 1,05:1 Nicht bestanden

Aa #5A6B36 auf #636166 1,05:1 Nicht bestanden

Tank Palette

Tank Palette

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen