Jungle Level

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

Zurück zur Bibliothek

Jungle Level

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär artist pixeljoint

Likes 11

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #856360;
  --c-vibrant-2: #8D2887;
  --c-vibrant-3: #2B180A;
  --c-vibrant-4: #862A00;
  --c-vibrant-5: #C76735;
  --c-vibrant-6: #E29F51;
  --c-vibrant-7: #C5E369;
  --c-vibrant-8: #C8EDE0;
  --c-vibrant-9: #4492EE;
  --c-vibrant-10: #698426;
  --c-vibrant-11: #2E5B3F;
  --c-vibrant-12: #082B0E;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Teal Melody (#C8EDE0) bis zum dunkelsten Ton Zinnwaldite Brown (#2B180A). Sie vereint Aged Beech, Warm Purple, Zinnwaldite Brown, Red Shade Wash, Winter Sunset, Apple Crisp, Citrus Lime, Teal Melody, Oregon Blue, Straken Green, Emerald Temple und Haunted Forest in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 14 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #2B180A auf #C8EDE0 mit 13,45:1.

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

Farben im Detail

Aged Beech #856360

RGB: rgb(133, 99, 96)
HSL: hsl(5, 16%, 45%)
Luminanz: 0,148

Warm Purple #8D2887

RGB: rgb(141, 40, 135)
HSL: hsl(304, 56%, 35%)
Luminanz: 0,089

Zinnwaldite Brown #2B180A

RGB: rgb(43, 24, 10)
HSL: hsl(25, 62%, 10%)
Luminanz: 0,012

Red Shade Wash #862A00

RGB: rgb(134, 42, 0)
HSL: hsl(19, 100%, 26%)
Luminanz: 0,067

Winter Sunset #C76735

RGB: rgb(199, 103, 53)
HSL: hsl(21, 58%, 49%)
Luminanz: 0,221

Apple Crisp #E29F51

RGB: rgb(226, 159, 81)
HSL: hsl(32, 71%, 60%)
Luminanz: 0,416

Citrus Lime #C5E369

RGB: rgb(197, 227, 105)
HSL: hsl(75, 69%, 65%)
Luminanz: 0,678

Teal Melody #C8EDE0

RGB: rgb(200, 237, 224)
HSL: hsl(159, 51%, 86%)
Luminanz: 0,782

Oregon Blue #4492EE

RGB: rgb(68, 146, 238)
HSL: hsl(212, 83%, 60%)
Luminanz: 0,280

Straken Green #698426

RGB: rgb(105, 132, 38)
HSL: hsl(77, 55%, 33%)
Luminanz: 0,197

Emerald Temple #2E5B3F

RGB: rgb(46, 91, 63)
HSL: hsl(143, 33%, 27%)
Luminanz: 0,084

Haunted Forest #082B0E

RGB: rgb(8, 43, 14)
HSL: hsl(130, 69%, 10%)
Luminanz: 0,018

Kontrast & Barrierefreiheit

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

Aa #2B180A auf #C8EDE0 13,45:1 AAA

Aa #C8EDE0 auf #082B0E 12,22:1 AAA

Aa #2B180A auf #C5E369 11,77:1 AAA

Aa #C5E369 auf #082B0E 10,69:1 AAA

Aa #2B180A auf #E29F51 7,52:1 AAA

Aa #862A00 auf #C8EDE0 7,10:1 AAA

Aa #E29F51 auf #082B0E 6,84:1 AA

Aa #862A00 auf #C5E369 6,21:1 AA

Aa #C8EDE0 auf #2E5B3F 6,20:1 AA

Aa #8D2887 auf #C8EDE0 5,98:1 AA

Aa #C5E369 auf #2E5B3F 5,43:1 AA

Aa #2B180A auf #4492EE 5,33:1 AA

Aa #8D2887 auf #C5E369 5,23:1 AA

Aa #4492EE auf #082B0E 4,84:1 AA

Aa #2B180A auf #C76735 4,38:1 AA (großer Text)

Aa #856360 auf #C8EDE0 4,21:1 AA (großer Text)

Aa #2B180A auf #698426 3,98:1 AA (großer Text)

Aa #C76735 auf #082B0E 3,98:1 AA (großer Text)

Aa #862A00 auf #E29F51 3,97:1 AA (großer Text)

Aa #856360 auf #C5E369 3,69:1 AA (großer Text)

Aa #698426 auf #082B0E 3,62:1 AA (großer Text)

Aa #E29F51 auf #2E5B3F 3,47:1 AA (großer Text)

Aa #C8EDE0 auf #698426 3,38:1 AA (großer Text)

Aa #8D2887 auf #E29F51 3,34:1 AA (großer Text)

Aa #856360 auf #2B180A 3,19:1 AA (großer Text)

Aa #C76735 auf #C8EDE0 3,07:1 AA (großer Text)

Aa #C5E369 auf #698426 2,96:1 Nicht bestanden

Aa #856360 auf #082B0E 2,90:1 Nicht bestanden

Aa #862A00 auf #4492EE 2,81:1 Nicht bestanden

Aa #C76735 auf #C5E369 2,69:1 Nicht bestanden

Aa #C8EDE0 auf #4492EE 2,53:1 Nicht bestanden

Aa #4492EE auf #2E5B3F 2,46:1 Nicht bestanden

Aa #8D2887 auf #4492EE 2,37:1 Nicht bestanden

Aa #856360 auf #E29F51 2,36:1 Nicht bestanden

Aa #862A00 auf #C76735 2,31:1 Nicht bestanden

Aa #8D2887 auf #2B180A 2,25:1 Nicht bestanden

Aa #C5E369 auf #4492EE 2,21:1 Nicht bestanden

Aa #2B180A auf #2E5B3F 2,17:1 Nicht bestanden

Aa #862A00 auf #698426 2,10:1 Nicht bestanden

Aa #8D2887 auf #082B0E 2,05:1 Nicht bestanden

Aa #C76735 auf #2E5B3F 2,02:1 Nicht bestanden

Aa #2E5B3F auf #082B0E 1,97:1 Nicht bestanden

Aa #8D2887 auf #C76735 1,95:1 Nicht bestanden

Aa #2B180A auf #862A00 1,89:1 Nicht bestanden

Aa #E29F51 auf #698426 1,89:1 Nicht bestanden

Aa #698426 auf #2E5B3F 1,84:1 Nicht bestanden

Aa #E29F51 auf #C8EDE0 1,79:1 Nicht bestanden

Aa #8D2887 auf #698426 1,77:1 Nicht bestanden

Aa #862A00 auf #082B0E 1,72:1 Nicht bestanden

Aa #C76735 auf #E29F51 1,72:1 Nicht bestanden

Aa #856360 auf #862A00 1,68:1 Nicht bestanden

Aa #856360 auf #4492EE 1,67:1 Nicht bestanden

Aa #E29F51 auf #C5E369 1,56:1 Nicht bestanden

Aa #856360 auf #2E5B3F 1,47:1 Nicht bestanden

Aa #856360 auf #8D2887 1,42:1 Nicht bestanden

Aa #E29F51 auf #4492EE 1,41:1 Nicht bestanden

Aa #856360 auf #C76735 1,37:1 Nicht bestanden

Aa #4492EE auf #698426 1,34:1 Nicht bestanden

Aa #856360 auf #698426 1,25:1 Nicht bestanden

Aa #C76735 auf #4492EE 1,22:1 Nicht bestanden

Aa #8D2887 auf #862A00 1,19:1 Nicht bestanden

Aa #862A00 auf #2E5B3F 1,14:1 Nicht bestanden

Aa #C5E369 auf #C8EDE0 1,14:1 Nicht bestanden

Aa #2B180A auf #082B0E 1,10:1 Nicht bestanden

Aa #C76735 auf #698426 1,10:1 Nicht bestanden

Aa #8D2887 auf #2E5B3F 1,04:1 Nicht bestanden

Jungle Level

Jungle Level

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen